Xamarin.Android 引导页

莫道桑榆晚,为霞尚满天。这篇文章主要讲述Xamarin.Android 引导页相关的知识,希望能为你提供帮助。
http://blog.csdn.net/qq1326702940/article/details/78665588
https://www.cnblogs.com/catcher1994/p/5554456.html
  第一次安装的APP,一般都会浏览几张引导图片,才进入APP
1.界面布局
[html] view plain copy

  1. < ?xml  version="1.0"  encoding="utf-8"?>    
  2. < RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"   
  3.         android:layout_width="match_parent"   
  4.         android:layout_height="match_parent">    
  5.    
  6.     < android.support.v4.view.ViewPager   
  7.             android:id="@+id/viewpage"   
  8.             android:layout_width="match_parent"   
  9.             android:layout_height="match_parent"> < /android.support.v4.view.ViewPager>    
  10.    
  11.     < LinearLayout   
  12.             android:id="@+id/point"   
  13.             android:layout_width="wrap_content"   
  14.             android:layout_height="wrap_content"   
  15.             android:orientation="horizontal"   
  16.             android:layout_alignParentBottom="true"   
  17.             android:layout_centerHorizontal="true"   
  18.             android:layout_marginBottom="24.0dp"   
  19.             android:gravity="center_horizontal"> < /LinearLayout>    
  20.     < TextView   
  21.             android:id="@+id/guideText"   
  22.             android:layout_width="90dp"   
  23.             android:layout_height="28dp"   
  24.             android:text="立即体验"   
  25.             android:textColor="@color/White"   
  26.             android:background="@drawable/guide_button"   
  27.             android:layout_centerHorizontal="true"   
  28.             android:gravity="center"   
  29.             android:layout_marginBottom="20dp"   
  30.             android:layout_above="@id/point"   
  31.             android:visibility="gone"   
  32.                 />    
  33. < /RelativeLayout>    
> > > 其中的 LinearLayout 是为了显示图片切换到第几张显示的白点
2.后台
  2.1   填充 ViewPager 控件的数据源
[csharp] view plain copy
  1. list  =  new  List< View> ();    
  2.                         //  设置图片布局参数   
  3.                         LinearLayout.LayoutParams  ps  =  new  LinearLayout.LayoutParams(ActionBar.LayoutParams.MatchParent,  ActionBar.LayoutParams.MatchParent);    
  4.                         //  创建引导图   
  5.                         for  (int  i  =  0;   i  <   imageView.Length;   i++)   
  6.                         {   
  7.                                 ImageView  iv  =  new  ImageView(this);    
  8.                                 iv.LayoutParameters  =  ps;    
  9.                                 iv.SetScaleType(ImageView.ScaleType.FitXy);    
  10.                                 iv.SetImageResource(imageView[i]);    
  11.                                 list.Add(iv);    
  12.                         }   
  13.    
  14.                         //  加入适配器   
  15.                         viewpage.Adapter  =  new  GuideAdapter(list);    
> > > 其中GuideAdapter 是继承了Android.Support.V4.View.PagerAdapter的自定义累
2.2 根据引导图数量,创建对应数量的小圆点
[csharp] view plain copy
  1. //  添加小圆点   
  2.                         for  (int  i  =  0;   i  <   imageView.Length;   i++)   
  3.                         {   
  4.                                 //  圆点大小适配   
  5.                                 var  size  =  Resources.GetDimensionPixelSize(Resource.Dimension.Size_18);    
  6.                                 LinearLayout.LayoutParams  pointParams  =  new  LinearLayout.LayoutParams(size,  size);    
  7.    
  8.                                 if  (i  <   1)   
  9.                                 {   
  10.                                         pointParams.SetMargins(0,  0,  0,  0);    
  11.                                 }   
  12.                                 else   
  13.                                 {   
  14.                                         pointParams.SetMargins(10,  0,  0,  0);    
  15.                                 }   
  16.    
  17.                                 ImageView  imageView  =  new  ImageView(this);    
  18.                                 imageView.LayoutParameters  =  pointParams;    
  19.    
  20.                                 imageView.SetBackgroundResource(Resource.Drawable.NoPress);    
  21.                                 linearLayout_Point.AddView(imageView);    
  22.                         }   
  23.    
  24.                         //  设置默认选中第一张圆点   
  25.                         linearLayout_Point.GetChildAt(0).SetBackgroundResource(Resource.Drawable.Press);    
3.  ViewPager 的  ViewPager.IOnPageChangeListener 事件处理
[csharp] view plain copy
  1. public  void  OnPageScrolled(int  position,  float  positionOffset,  int  positionOffsetPixels)   
  2.                 {   
  3.                 }   
  4.    
  5.                 public  void  OnPageScrollStateChanged(int  state)   
  6.                 {   
  7.                 }   
  8.                 ///  < summary>    
  9.                 ///  滑动到第几张图片   
  10.                 ///  < /summary>    
  11.                 ///  < param  name="position"> < /param>    
  12.                 public  void  OnPageSelected(int  position)   
  13.                 {   
  14.                         for  (int  i  =  0;   i  <   imageView.Length;   i++)   
  15.                         {   
  16.                                 if  (i  ==  position)   
  17.                                 {   
  18.                                         linearLayout_Point.GetChildAt(position).SetBackgroundResource(Resource.Drawable.Press);    
  19.                                 }   
  20.                                 else   
  21.                                 {   
  22.                                         linearLayout_Point.GetChildAt(i).SetBackgroundResource(Resource.Drawable.NoPress);    
  23.                                 }   
  24.                         }   
  25.    
  26.                         //  滑动到最后一张图,显示按钮   
  27.                         if  (position  ==  imageView.Length  -  1)   
  28.                         {   
  29.                                 tv.Visibility  =  ViewStates.Visible;    
  30.                         }   
  31.                         else   
  32.                         {   
  33.                                 tv.Visibility  =  ViewStates.Gone;    
  34.                         }   
  35.                 }   

4.项目地址:https://github.com/harrylsp/Guide
Xamarin.Android之引导页的简单制作0x01 前言  对于现在大部分的APP,第一次打开刚安装或更新安装的APP都会有几个引导界面,通常这几个引导页是告诉用户
APP有些什么功能或者修改了什么bug、新增了什么功能等等等。
下面就用Xamarin.Android来简单实现一下。主要用到的是ViewPager,当然也就离不开Xamarin.Android.Support.v4 如果遇到不能编译的问题,可以参考Xamarin.Android之简单的抽屉布局的出错处理方案。   0x02 页面布局编写新建一个Android项目
添加几个简单的布局页面。
【Xamarin.Android 引导页】首先是添加个启动页面,splash.axml
Xamarin.Android 引导页

文章图片
1 < ?xml version="1.0" encoding="utf-8"?> 2 < RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3xmlns:tools="http://schemas.android.com/tools" 4android:layout_width="match_parent" 5android:layout_height="match_parent"> 6< android.support.v4.view.ViewPager 7android:id="@+id/viewpager" 8android:layout_width="match_parent" 9android:layout_height="match_parent" /> 10< LinearLayout 11android:id="@+id/ll" 12android:orientation="horizontal" 13android:layout_width="wrap_content" 14android:layout_height="wrap_content" 15android:layout_marginBottom="24.0dip" 16android:layout_alignParentBottom="true" 17android:layout_centerHorizontal="true"> 18< ImageView 19android:layout_width="wrap_content" 20android:layout_height="wrap_content" 21android:layout_gravity="center_vertical" 22android:clickable="true" 23android:padding="15.0dip" 24android:src="https://www.songbingjia.com/android/@drawable/dot" /> 25< ImageView 26android:layout_width="wrap_content" 27android:layout_height="wrap_content" 28android:layout_gravity="center_vertical" 29android:clickable="true" 30android:padding="15.0dip" 31android:src="https://www.songbingjia.com/android/@drawable/dot" /> 32< ImageView 33android:layout_width="wrap_content" 34android:layout_height="wrap_content" 35android:layout_gravity="center_vertical" 36android:clickable="true" 37android:padding="15.0dip" 38android:src="https://www.songbingjia.com/android/@drawable/dot" /> 39< /LinearLayout> 40 < /RelativeLayout>

Xamarin.Android 引导页

文章图片
引导页,用了一个ViewPager,下面的线性布局是用来存放的三个点就是当前所在的引导页面。
用到的ImageView有个src指向drawable下面的dot.xml。内容如下:
Xamarin.Android 引导页

文章图片
1 < ?xml version="1.0" encoding="utf-8" ?> 2 < selector 3xmlns: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>

Xamarin.Android 引导页

文章图片

然后是3个引导页的具体内容。
guide_first.axml
Xamarin.Android 引导页

文章图片
1 < ?xml version="1.0" encoding="utf-8"?> 2 < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3android:layout_width="match_parent" 4android:layout_height="match_parent" 5android:orientation="vertical"> 6< TextView 7android:layout_width="match_parent" 8android:layout_height="match_parent" 9android:gravity="center" 10android:text="guide---first" 11android:textSize="30sp" /> 12 < /LinearLayout>

Xamarin.Android 引导页

文章图片
guide_second.axml
Xamarin.Android 引导页

文章图片
1 < ?xml version="1.0" encoding="utf-8"?> 2 < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3android:layout_width="match_parent" 4android:layout_height="match_parent" 5android:orientation="vertical"> 6< TextView 7android:layout_width="match_parent" 8android:layout_height="match_parent" 9android:gravity="center" 10android:text="guide--second" 11android:textSize="30sp" /> 12 < /LinearLayout>

Xamarin.Android 引导页

文章图片
guide_third.axml
Xamarin.Android 引导页

文章图片
1 < ?xml version="1.0" encoding="utf-8"?> 2 < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3android:layout_width="match_parent" 4android:layout_height="match_parent" 5android:orientation="vertical"> 6< TextView 7android:layout_width="match_parent" 8android:layout_height="wrap_content" 9android:layout_marginTop="250dp" 10android:gravity="center" 11android:text="guide--third" 12android:textSize="30sp" /> 13< Button 14android:id="@+id/startBtn" 15android:layout_width="wrap_content" 16android:layout_height="wrap_content" 17android:layout_alignParentBottom="true" 18android:layout_centerHorizontal="true" 19android:text="begin now" 20android:layout_gravity="center" 21android:layout_marginBottom="55dp" /> 22 < /LinearLayout>

Xamarin.Android 引导页

文章图片
这里没有用图片来展示,就简单的用了文字,没有设计师设计,so....随意一点。
最后是Main.axml
Xamarin.Android 引导页

文章图片
1 < ?xml version="1.0" encoding="utf-8"?> 2 < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3android:layout_width="fill_parent" 4android:layout_height="fill_parent"> 5< TextView 6android:layout_width="fill_parent" 7android:layout_height="wrap_content" 8android:gravity="center" 9android:layout_gravity="center_vertical" 10android:text="the main page" 11android:textSize="30sp" /> 12 < /LinearLayout>

Xamarin.Android 引导页

文章图片
0x03 Activity的编写首先SplashActivity
Xamarin.Android 引导页

文章图片
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")] 9public class SplashActivity : Activity 10{ 11protected override void OnCreate(Bundle savedInstanceState) 12{ 13base.OnCreate(savedInstanceState); 14SetContentView(Resource.Layout.splash); 15//version\'s infomation 16var version = PackageManager.GetPackageInfo(this.PackageName, PackageInfoFlags.MatchAll).VersionName; 17var tvVersion = FindViewById< TextView> (Resource.Id.tv_version); 18tvVersion.Text = "Version " + version; 19//get infomation from shared preferences 20var sp = GetSharedPreferences("app_setting", FileCreationMode.Private); 21new Handler().PostDelayed(() => 22{ 23Intent intent; 24//first or not 25if (sp.GetString("version", "") != version) 26{ 27intent = new Intent(this, typeof(GuideActivity)); 28} 29else 30{ 31intent = new Intent(this, typeof(MainActivity)); 32} 33StartActivity(intent); 34this.Finish(); 35}, 1000); 36} 37} 38 }

Xamarin.Android 引导页

文章图片
把是否是第一次开启信息存放到sharepreferences,我这里主要是通过版本号来控制。
然后是GuideActivity
Xamarin.Android 引导页

文章图片
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")] 14public class GuideActivity : Activity 15{ 16private ViewPager viewPager; 17 18private List< View> views; 19 20private View view1, view2, view3; 21 22private Button btnStart; 23 24private ImageView[] dots; 25 26private int currentIndex; 27private LinearLayout ll; 28protected override void OnCreate(Bundle savedInstanceState) 29{ 30base.OnCreate(savedInstanceState); 31SetContentView(Resource.Layout.activity_guide); 32viewPager = FindViewById< ViewPager> (Resource.Id.viewpager); 33//the layout 34LayoutInflater mLi = LayoutInflater.From(this); 35view1 = mLi.Inflate(Resource.Layout.guide_first, null); 36view2 = mLi.Inflate(Resource.Layout.guide_second, null); 37view3 = mLi.Inflate(Resource.Layout.guide_third, null); 38views = new List< View> (); 39views.Add(view1); 40views.Add(view2); 41views.Add(view3); 42 43//the adapter 44viewPager.Adapter = new ViewPagerAdapter(views); 45//page selected 46viewPager.PageSelected += PageSelected; 47ll = FindViewById< LinearLayout> (Resource.Id.ll); 48//the dot infomation 49dots = new ImageView[3]; 50for (int i = 0; i < views.Count; i++) 51{ 52dots[i] = (ImageView)ll.GetChildAt(i); 53dots[i].Enabled = false; 54} 55dots[0].Enabled = true; 56//the button 57btnStart = view3.FindViewById< Button> (Resource.Id.startBtn); 58btnStart.Click += Start; 59} 60/// < summary> 61/// page selected 62/// < /summary> 63/// < param name="sender"> < /param> 64/// < param name="e"> < /param> 65private void PageSelected(object sender, PageSelectedEventArgs e) 66{ 67ll = FindViewById< LinearLayout> (Resource.Id.ll); 68for (int i = 0; i < views.Count; i++) 69{ 70dots[i] = (ImageView)ll.GetChildAt(i); 71dots[i].Enabled = false; 72} 73dots[e.Position].Enabled = true; 74} 75/// < summary> 76/// start the main page 77/// < /summary> 78/// < param name="sender"> < /param> 79/// < param name="e"> < /param> 80private void Start(object sender, EventArgs e) 81{ 82//get infomation from shared preferences 83var sp = GetSharedPreferences("app_setting", FileCreationMode.Private); 84//the editor 85var editor = sp.Edit(); 86//update 87editor.PutString("version", PackageManager.GetPackageInfo(this.PackageName, PackageInfoFlags.MatchAll).VersionName).Commit() ; 88StartActivity(typeof(MainActivity)); 89this.Finish(); 90} 91} 92 }

    推荐阅读