Xamarin.Android 引导页

Posted 键盘上落下的泪

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Xamarin.Android 引导页相关的知识,希望对你有一定的参考价值。

http://blog.csdn.net/qq1326702940/article/details/78665588

https://www.cnblogs.com/catcher1994/p/5554456.html

 第一次安装的APP,一般都会浏览几张引导图片,才进入APP

1.界面布局

  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 }以上是关于Xamarin.Android 引导页的主要内容,如果未能解决你的问题,请参考以下文章

Xamarin Android 片段库

片段中的 Xamarin Android Google 地图错误

如何在运行时用 ChildFragmentManager 和没有 PagerSlidingTabStrip Xamarin.Android 标题的片段替换片段

Xamarin.Android WebView App性能问题

在 xamarin.android 中管理屏幕旋转时的片段外观

二进制 XML 文件第 1 行:Xamarin Android 中 Google Maps 的类片段错误膨胀错误