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项目

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

首先是添加个启动页面，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 效果图

 

转载于:https://www.cnblogs.com/LuoEast/p/8045982.html