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.项目地址：

0x01 前言

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

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

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

如果遇到不能编译的问题，可以参考的出错处理方案。

 0x02 页面布局编写

新建一个Android项目

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

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

1 
       2 
      
        6 
        10 
       
         18 
         25 
         32 
         39 
        40 
      

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

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

1 
      2 
      
        4 
        5 
        6 
      

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

guide_first.axml

1 
       2 
      
        6 
        12 
      

guide_second.axml

1 
       2 
      
        6 
        12 
      

guide_third.axml

1 
       2 
      
        6 
        13 
        22 
      

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

最后是Main.axml

1 
       2 
      
        5 
        12 
      

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
      
       (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
      
        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
       
        (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
        
         (); 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
         
          (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
          (Resource.Id.startBtn); 58 btnStart.Click += Start; 59 } 60 /// 
 61 /// page selected 62 /// 
 63 ///  64 ///  65 private void PageSelected(object sender, PageSelectedEventArgs e) 66 { 67 ll = FindViewById
           
            (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 /// 
            
 76 /// start the main page 77 /// 
 78 /// 
             79 /// 
             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
      
        views; 9 public ViewPagerAdapter(List
       
         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 效果图