Xamarin.Android 引导页
http://blog.csdn.net/qq1326702940/article/details/78665588
https://www.cnblogs.com/catcher1994/p/5554456.html
第一次安装的APP，一般都会浏览几张引导图片，才进入APP
1.界面布局
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- <android.support.v4.view.ViewPager
- android:id="@+id/viewpage"
- android:layout_width="match_parent"
- android:layout_height="match_parent"></android.support.v4.view.ViewPager>
- <LinearLayout
- android:id="@+id/point"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:orientation="horizontal"
- android:layout_alignParentBottom="true"
- android:layout_centerHorizontal="true"
- android:layout_marginBottom="24.0dp"
- android:gravity="center_horizontal"></LinearLayout>
- <TextView
- android:id="@+id/guideText"
- android:layout_width="90dp"
- android:layout_height="28dp"
- android:text="立即体验"
- android:textColor="@color/White"
- android:background="@drawable/guide_button"
- android:layout_centerHorizontal="true"
- android:gravity="center"
- android:layout_marginBottom="20dp"
- android:layout_above="@id/point"
- android:visibility="gone"
- />
- </RelativeLayout>
>>> 其中的 LinearLayout 是为了显示图片切换到第几张显示的白点
2.后台
2.1 填充 ViewPager 控件的数据源
- list = new List<View>();
- // 设置图片布局参数
- LinearLayout.LayoutParams ps = new LinearLayout.LayoutParams(ActionBar.LayoutParams.MatchParent, ActionBar.LayoutParams.MatchParent);
- // 创建引导图
- for (int i = 0; i < imageView.Length; i++)
- {
- ImageView iv = new ImageView(this);
- iv.LayoutParameters = ps;
- iv.SetScaleType(ImageView.ScaleType.FitXy);
- iv.SetImageResource(imageView[i]);
- list.Add(iv);
- }
- // 加入适配器
- viewpage.Adapter = new GuideAdapter(list);
>>> 其中GuideAdapter 是继承了Android.Support.V4.View.PagerAdapter的自定义累
2.2 根据引导图数量，创建对应数量的小圆点
- // 添加小圆点
- for (int i = 0; i < imageView.Length; i++)
- {
- // 圆点大小适配
- var size = Resources.GetDimensionPixelSize(Resource.Dimension.Size_18);
- LinearLayout.LayoutParams pointParams = new LinearLayout.LayoutParams(size, size);
- if (i < 1)
- {
- pointParams.SetMargins(0, 0, 0, 0);
- }
- else
- {
- pointParams.SetMargins(10, 0, 0, 0);
- }
- ImageView imageView = new ImageView(this);
- imageView.LayoutParameters = pointParams;
- imageView.SetBackgroundResource(Resource.Drawable.NoPress);
- linearLayout_Point.AddView(imageView);
- }
- // 设置默认选中第一张圆点
- linearLayout_Point.GetChildAt(0).SetBackgroundResource(Resource.Drawable.Press);
3. ViewPager 的 ViewPager.IOnPageChangeListener 事件处理
- public void OnPageScrolled(int position, float positionOffset, int positionOffsetPixels)
- {
- }
- public void OnPageScrollStateChanged(int state)
- {
- }
- /// <summary>
- /// 滑动到第几张图片
- /// </summary>
- /// <param name="position"></param>
- public void OnPageSelected(int position)
- {
- for (int i = 0; i < imageView.Length; i++)
- {
- if (i == position)
- {
- linearLayout_Point.GetChildAt(position).SetBackgroundResource(Resource.Drawable.Press);
- }
- else
- {
- linearLayout_Point.GetChildAt(i).SetBackgroundResource(Resource.Drawable.NoPress);
- }
- }
- // 滑动到最后一张图，显示按钮
- if (position == imageView.Length - 1)
- {
- tv.Visibility = ViewStates.Visible;
- }
- else
- {
- tv.Visibility = ViewStates.Gone;
- }
- }
4.项目地址：https://github.com/harrylsp/Guide
Xamarin.Android之引导页的简单制作
0x01 前言
对于现在大部分的APP，第一次打开刚安装或更新安装的APP都会有几个引导界面，通常这几个引导页是告诉用户
APP有些什么功能或者修改了什么bug、新增了什么功能等等等。
下面就用Xamarin.Android来简单实现一下。主要用到的是ViewPager，当然也就离不开Xamarin.Android.Support.v4
如果遇到不能编译的问题，可以参考Xamarin.Android之简单的抽屉布局的出错处理方案。
0x02 页面布局编写
新建一个Android项目
添加几个简单的布局页面。
首先是添加个启动页面，splash.axml
1 <?xml version="1.0" encoding="utf-8"?>
2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 xmlns:tools="http://schemas.android.com/tools"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent">
6 <android.support.v4.view.ViewPager
7 android:id="@+id/viewpager"
8 android:layout_width="match_parent"
9 android:layout_height="match_parent" />
10 <LinearLayout
11 android:id="@+id/ll"
12 android:orientation="horizontal"
13 android:layout_width="wrap_content"
14 android:layout_height="wrap_content"
15 android:layout_marginBottom="24.0dip"
16 android:layout_alignParentBottom="true"
17 android:layout_centerHorizontal="true">
18 <ImageView
19 android:layout_width="wrap_content"
20 android:layout_height="wrap_content"
21 android:layout_gravity="center_vertical"
22 android:clickable="true"
23 android:padding="15.0dip"
24 android:src="@drawable/dot" />
25 <ImageView
26 android:layout_width="wrap_content"
27 android:layout_height="wrap_content"
28 android:layout_gravity="center_vertical"
29 android:clickable="true"
30 android:padding="15.0dip"
31 android:src="@drawable/dot" />
32 <ImageView
33 android:layout_width="wrap_content"
34 android:layout_height="wrap_content"
35 android:layout_gravity="center_vertical"
36 android:clickable="true"
37 android:padding="15.0dip"
38 android:src="@drawable/dot" />
39 </LinearLayout>
40 </RelativeLayout>
引导页，用了一个ViewPager，下面的线性布局是用来存放的三个点就是当前所在的引导页面。
用到的ImageView有个src指向drawable下面的dot.xml。内容如下：
1 <?xml version="1.0" encoding="utf-8" ?>
2 <selector
3 xmlns:android="http://schemas.android.com/apk/res/android">
4 <item android:state_enabled="true" android:drawable="@drawable/dark_dot" />
5 <item android:state_enabled="false" android:drawable="@drawable/white_dot" />
6 </selector>
然后是3个引导页的具体内容。
guide_first.axml
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="vertical">
6 <TextView
7 android:layout_width="match_parent"
8 android:layout_height="match_parent"
9 android:gravity="center"
10 android:text="guide---first"
11 android:textSize="30sp" />
12 </LinearLayout>
guide_second.axml
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="vertical">
6 <TextView
7 android:layout_width="match_parent"
8 android:layout_height="match_parent"
9 android:gravity="center"
10 android:text="guide--second"
11 android:textSize="30sp" />
12 </LinearLayout>
guide_third.axml
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="vertical">
6 <TextView
7 android:layout_width="match_parent"
8 android:layout_height="wrap_content"
9 android:layout_marginTop="250dp"
10 android:gravity="center"
11 android:text="guide--third"
12 android:textSize="30sp" />
13 <Button
14 android:id="@+id/startBtn"
15 android:layout_width="wrap_content"
16 android:layout_height="wrap_content"
17 android:layout_alignParentBottom="true"
18 android:layout_centerHorizontal="true"
19 android:text="begin now"
20 android:layout_gravity="center"
21 android:layout_marginBottom="55dp" />
22 </LinearLayout>
这里没有用图片来展示，就简单的用了文字，没有设计师设计，so....随意一点。
最后是Main.axml
1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="fill_parent"
4 android:layout_height="fill_parent">
5 <TextView
6 android:layout_width="fill_parent"
7 android:layout_height="wrap_content"
8 android:gravity="center"
9 android:layout_gravity="center_vertical"
10 android:text="the main page"
11 android:textSize="30sp" />
12 </LinearLayout>
0x03 Activity的编写
首先SplashActivity
1 using Android.App;
2 using Android.Content;
3 using Android.Content.PM;
4 using Android.OS;
5 using Android.Widget;
6 namespace GuideDemo
7 {
8 [Activity(Label = "GuideDemo", MainLauncher = true, Icon = "@drawable/icon")]
9 public class SplashActivity : Activity
10 {
11 protected override void OnCreate(Bundle savedInstanceState)
12 {
13 base.OnCreate(savedInstanceState);
14 SetContentView(Resource.Layout.splash);
15 //version's infomation
16 var version = PackageManager.GetPackageInfo(this.PackageName, PackageInfoFlags.MatchAll).VersionName;
17 var tvVersion = FindViewById<TextView>(Resource.Id.tv_version);
18 tvVersion.Text = "Version " + version;
19 //get infomation from shared preferences
20 var sp = GetSharedPreferences("app_setting", FileCreationMode.Private);
21 new Handler().PostDelayed(() =>
22 {
23 Intent intent;
24 //first or not
25 if (sp.GetString("version", "") != version)
26 {
27 intent = new Intent(this, typeof(GuideActivity));
28 }
29 else
30 {
31 intent = new Intent(this, typeof(MainActivity));
32 }
33 StartActivity(intent);
34 this.Finish();
35 }, 1000);
36 }
37 }
38 }
把是否是第一次开启信息存放到sharepreferences，我这里主要是通过版本号来控制。
然后是GuideActivity
1 using Android.App;
2 using Android.Content;
3 using Android.Content.PM;
4 using Android.OS;
5 using Android.Support.V4.View;
6 using Android.Views;
7 using Android.Widget;
8 using System;
9 using System.Collections.Generic;
10 using static Android.Support.V4.View.ViewPager;
11 namespace GuideDemo
12 {
13 [Activity(Label = "GuideActivity")]
14 public class GuideActivity : Activity
15 {
16 private ViewPager viewPager;
17
18 private List<View> views;
19
20 private View view1, view2, view3;
21
22 private Button btnStart;
23
24 private ImageView[] dots;
25
26 private int currentIndex;
27 private LinearLayout ll;
28 protected override void OnCreate(Bundle savedInstanceState)
29 {
30 base.OnCreate(savedInstanceState);
31 SetContentView(Resource.Layout.activity_guide);
32 viewPager = FindViewById<ViewPager>(Resource.Id.viewpager);
33 //the layout
34 LayoutInflater mLi = LayoutInflater.From(this);
35 view1 = mLi.Inflate(Resource.Layout.guide_first, null);
36 view2 = mLi.Inflate(Resource.Layout.guide_second, null);
37 view3 = mLi.Inflate(Resource.Layout.guide_third, null);
38 views = new List<View>();
39 views.Add(view1);
40 views.Add(view2);
41 views.Add(view3);
42
43 //the adapter
44 viewPager.Adapter = new ViewPagerAdapter(views);
45 //page selected
46 viewPager.PageSelected += PageSelected;
47 ll = FindViewById<LinearLayout>(Resource.Id.ll);
48 //the dot infomation
49 dots = new ImageView[3];
50 for (int i = 0; i < views.Count; i++)
51 {
52 dots[i] = (ImageView)ll.GetChildAt(i);
53 dots[i].Enabled = false;
54 }
55 dots[0].Enabled = true;
56 //the button
57 btnStart = view3.FindViewById<Button>(Resource.Id.startBtn);
58 btnStart.Click += Start;
59 }
60 /// <summary>
61 /// page selected
62 /// </summary>
63 /// <param name="sender"></param>
64 /// <param name="e"></param>
65 private void PageSelected(object sender, PageSelectedEventArgs e)
66 {
67 ll = FindViewById<LinearLayout>(Resource.Id.ll);
68 for (int i = 0; i < views.Count; i++)
69 {
70 dots[i] = (ImageView)ll.GetChildAt(i);
71 dots[i].Enabled = false;
72 }
73 dots[e.Position].Enabled = true;
74 }
75 /// <summary>
76 /// start the main page
77 /// </summary>
78 /// <param name="sender"></param>
79 /// <param name="e"></param>
80 private void Start(object sender, EventArgs e)
81 {
82 //get infomation from shared preferences
83 var sp = GetSharedPreferences("app_setting", FileCreationMode.Private);
84 //the editor
85 var editor = sp.Edit();
86 //update
87 editor.PutString("version", PackageManager.GetPackageInfo(this.PackageName, PackageInfoFlags.MatchAll).VersionName).Commit() ;
88 StartActivity(typeof(MainActivity));
89 this.Finish();
90 }
91 }
92 }
主要是ViewPager处理、页面切换点的处理以及begin now 按钮的点击事件。
其中有个ViewPagerAdapter要自己实现
1 using Android.Support.V4.View;
2 using Android.Views;
3 using System.Collections.Generic;
4 namespace GuideDemo
5 {
6 internal class ViewPagerAdapter : PagerAdapter
7 {
8 private List<View> views;
9 public ViewPagerAdapter(List<View> views)
10 {
11 this.views = views;
12 }
13 public override int Count
14 {
15 get
16 {
17 if (views != null)
18 {
19 return views.Count;
20 }
21 else
22 {
23 return 0;
24 }
25 }
26 }
27 public override bool IsViewFromObject(View view, Java.Lang.Object objectValue)
28 {
29 return view== objectValue;
30 }
31 public override void DestroyItem(ViewGroup container, int position, Java.Lang.Object objectValue)
32 {
33 container.RemoveView(views[position]);
34 }
35 public override Java.Lang.Object InstantiateItem(ViewGroup container, int position)
36 {
37 container.AddView(views[position], 0);
38 return views[position];
39 }
40 }
41 }
最后是MainActivity
1 using Android.App;
2 using Android.OS;
3 namespace GuideDemo
4 {
5 [Activity(Label = "GuideDemo")]
6 public class MainActivity : Activity
7 {
8 protected override void OnCreate(Bundle bundle)
9 {
10 base.OnCreate(bundle);
11
12 SetContentView(Resource.Layout.Main);
13 }
14 }
15 }
到这里就OK了，下面就来看看效果。
0x04 效果图
