Xamarin.Android之引导页的简单制作

0x01 前言

　　对于现在大部分的APP，第一次打开刚安装或更新安装的APP都会有几个引导界面，通常这几个引导页是告诉用户

APP有些什么功能或者修改了什么bug、新增了什么功能等等等。

　　下面就用Xamarin.Android来简单实现一下。主要用到的是ViewPager，当然也就离不开Xamarin.Android.Support.v4

如果遇到不能编译的问题，可以参考Xamarin.Android之简单的抽屉布局的出错处理方案。

0x02 页面布局编写

新建一个Android项目

添加几个简单的布局页面。

首先是添加个启动页面，splash.axml

 <?xml version="1.0" encoding="utf-8"?>
 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent">
     <android.support.v4.view.ViewPager
         android:id="@+id/viewpager"
         android:layout_width="match_parent"
         android:layout_height="match_parent" />
     <LinearLayout
         android:id="@+id/ll"
         android:orientation="horizontal"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_marginBottom="24.0dip"
         android:layout_alignParentBottom="true"
         android:layout_centerHorizontal="true">
         <ImageView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center_vertical"
             android:clickable="true"
             android:padding="15.0dip"
             android:src="@drawable/dot" />
         <ImageView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center_vertical"
             android:clickable="true"
             android:padding="15.0dip"
             android:src="@drawable/dot" />
         <ImageView
             android:layout_width="wrap_content"
             android:layout_height="wrap_content"
             android:layout_gravity="center_vertical"
             android:clickable="true"
             android:padding="15.0dip"
             android:src="@drawable/dot" />
     </LinearLayout>
 </RelativeLayout>

引导页，用了一个ViewPager，下面的线性布局是用来存放的三个点就是当前所在的引导页面。

用到的ImageView有个src指向drawable下面的dot.xml。内容如下：

 <?xml version="1.0" encoding="utf-8" ?>
 <selector
   xmlns:android="http://schemas.android.com/apk/res/android">
   <item android:state_enabled="true" android:drawable="@drawable/dark_dot" />
   <item android:state_enabled="false" android:drawable="@drawable/white_dot" />
 </selector>

然后是3个引导页的具体内容。

guide_first.axml

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical">
     <TextView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:gravity="center"
         android:text="guide---first"
         android:textSize="30sp" />
 </LinearLayout>

guide_second.axml

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical">
     <TextView
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:gravity="center"
         android:text="guide--second"
         android:textSize="30sp" />
 </LinearLayout>

guide_third.axml

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:orientation="vertical">
     <TextView
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:layout_marginTop="250dp"
         android:gravity="center"
         android:text="guide--third"
         android:textSize="30sp" />
     <Button
         android:id="@+id/startBtn"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_alignParentBottom="true"
         android:layout_centerHorizontal="true"
         android:text="begin now"
         android:layout_gravity="center"
         android:layout_marginBottom="55dp" />
 </LinearLayout>

这里没有用图片来展示，就简单的用了文字，没有设计师设计，so....随意一点。

最后是Main.axml

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="fill_parent"
     android:layout_height="fill_parent">
     <TextView
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:gravity="center"
         android:layout_gravity="center_vertical"
         android:text="the main page"
         android:textSize="30sp" />
 </LinearLayout>

0x03 Activity的编写

首先SplashActivity

 using Android.App;
 using Android.Content;
 using Android.Content.PM;
 using Android.OS;
 using Android.Widget;
 namespace GuideDemo
 {
     [Activity(Label = "GuideDemo", MainLauncher = true, Icon = "@drawable/icon")]
     public class SplashActivity : Activity
     {
         protected override void OnCreate(Bundle savedInstanceState)
         {
             base.OnCreate(savedInstanceState);
             SetContentView(Resource.Layout.splash);
             //version's infomation
             var version = PackageManager.GetPackageInfo(this.PackageName, PackageInfoFlags.MatchAll).VersionName;
             var tvVersion = FindViewById<TextView>(Resource.Id.tv_version);
             tvVersion.Text = "Version " + version;
             //get infomation from shared preferences
             var sp = GetSharedPreferences("app_setting", FileCreationMode.Private);
             new Handler().PostDelayed(() =>
             {
                 Intent intent;
                 //first or not
                 if (sp.GetString("version", "") != version)
                 {
                     intent = new Intent(this, typeof(GuideActivity));
                 }
                 else
                 {
                     intent = new Intent(this, typeof(MainActivity));
                 }
                 StartActivity(intent);
                 this.Finish();
             }, );
         }
     }
 }

把是否是第一次开启信息存放到sharepreferences，我这里主要是通过版本号来控制。

然后是GuideActivity

 using Android.App;
 using Android.Content;
 using Android.Content.PM;
 using Android.OS;
 using Android.Support.V4.View;
 using Android.Views;
 using Android.Widget;
 using System;
 using System.Collections.Generic;
 using static Android.Support.V4.View.ViewPager;
 namespace GuideDemo
 {
     [Activity(Label = "GuideActivity")]
     public class GuideActivity : Activity
     {
         private ViewPager viewPager;

         private List<View> views;

         private View view1, view2, view3;

         private Button btnStart;

         private ImageView[] dots;

         private int currentIndex;
         private LinearLayout ll;
         protected override void OnCreate(Bundle savedInstanceState)
         {
             base.OnCreate(savedInstanceState);
             SetContentView(Resource.Layout.activity_guide);
             viewPager = FindViewById<ViewPager>(Resource.Id.viewpager);
             //the layout
             LayoutInflater mLi = LayoutInflater.From(this);
             view1 = mLi.Inflate(Resource.Layout.guide_first, null);
             view2 = mLi.Inflate(Resource.Layout.guide_second, null);
             view3 = mLi.Inflate(Resource.Layout.guide_third, null);
             views = new List<View>();
             views.Add(view1);
             views.Add(view2);
             views.Add(view3);

             //the adapter
             viewPager.Adapter = new ViewPagerAdapter(views);
             //page selected
             viewPager.PageSelected += PageSelected;
             ll = FindViewById<LinearLayout>(Resource.Id.ll);
             //the dot infomation
             dots = new ImageView[];
             for (int i = ; i < views.Count; i++)
             {
                 dots[i] = (ImageView)ll.GetChildAt(i);
                 dots[i].Enabled = false;
             }
             dots[].Enabled = true;
             //the button
             btnStart = view3.FindViewById<Button>(Resource.Id.startBtn);
             btnStart.Click += Start;
         }
         /// <summary>
         /// page selected
         /// </summary>
         /// <param name="sender"></param>
         /// <param name="e"></param>
         private void PageSelected(object sender, PageSelectedEventArgs e)
         {
             ll = FindViewById<LinearLayout>(Resource.Id.ll);
             for (int i = ; i < views.Count; i++)
             {
                 dots[i] = (ImageView)ll.GetChildAt(i);
                 dots[i].Enabled = false;
             }
             dots[e.Position].Enabled = true;
         }
         /// <summary>
         /// start the main page
         /// </summary>
         /// <param name="sender"></param>
         /// <param name="e"></param>
         private void Start(object sender, EventArgs e)
         {
             //get infomation from shared preferences
             var sp = GetSharedPreferences("app_setting", FileCreationMode.Private);
             //the editor
             var editor = sp.Edit();
             //update
             editor.PutString("version", PackageManager.GetPackageInfo(this.PackageName, PackageInfoFlags.MatchAll).VersionName).Commit() ;
             StartActivity(typeof(MainActivity));
             this.Finish();
         }
     }
 }

主要是ViewPager处理、页面切换点的处理以及begin now 按钮的点击事件。

其中有个ViewPagerAdapter要自己实现

 using Android.Support.V4.View;
 using Android.Views;
 using System.Collections.Generic;
 namespace GuideDemo
 {
     internal class ViewPagerAdapter : PagerAdapter
     {
         private List<View> views;
         public ViewPagerAdapter(List<View> views)
         {
             this.views = views;
         }
         public override int Count
         {
             get
             {
                 if (views != null)
                 {
                     return views.Count;
                 }
                 else
                 {
                     return ;
                 }
             }
         }
         public override bool IsViewFromObject(View view, Java.Lang.Object objectValue)
         {
             return view== objectValue;
         }
         public override void DestroyItem(ViewGroup container, int position, Java.Lang.Object objectValue)
         {
             container.RemoveView(views[position]);
         }
         public override Java.Lang.Object InstantiateItem(ViewGroup container, int position)
         {
             container.AddView(views[position], );
             return views[position];
         }
     }
 }

最后是MainActivity

 using Android.App;
 using Android.OS;
 namespace GuideDemo
 {
     [Activity(Label = "GuideDemo")]
     public class MainActivity : Activity
     {
         protected override void OnCreate(Bundle bundle)
         {
             base.OnCreate(bundle);

             SetContentView(Resource.Layout.Main);
         }
     }
 }

到这里就OK了，下面就来看看效果。

0x04 效果图