用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 效果图
如果您认为这篇文章还不错或者有所收获，可以点击右下角的【推荐】按钮，因为你的支持是我继续写作，分享的最大动力！
作者：Catcher Wong ( 黄文清 )
来源：http://catcher1994.cnblogs.com/
声明：
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。如果您发现博客中出现了错误，或者有更好的建议、想法，请及时与我联系！！如果想找我私下交流，可以私信或者加我微信。