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 效果图
