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

Xamarin.Android 引导页的更多相关文章

Android 引导页公共方法LeaderPager
SimpAndroidFarme是近期脑子突然发热想做的android快速开发的框架,目标是模块化常用的控件,方便新手学习和使用.也欢迎老鸟来一起充实项目:项目地址引导页是我们开发app很常用的功 ...
Android引导页设计
大家在安装好一个应用后,第一次打开时往往会出现一个使用引导页,形式一般为三.四张图片,随着我们的滑动进行切换,在最后一页会有一个进入应用的按钮,我们通过点击这个按钮可以进入应用,其实这其中没有太多的复 ...
Android引导页过多导致OOM内存泄漏
摘要:前几天推广我们APP的时候,有些手机加载引导页的时候会闪退或崩溃,在Bugly显示是OOM异常. 然后Bugly上面显示的解决方案是: 该异常表示未能成功分配字节内存,通常是因为内存不足导 ...
android引导页的实现及跳转到主页面
第一个activity package com.qualitypicture.activity; import java.util.ArrayList; import java.util.List; ...
Xamarin.Android 启动页
打开软件的时候相当慢,会有白屏显示,这样的用户体验效果不好,所以需要增加一个启动页来过渡.步骤如下: 第一步:根据自己需求找到一个png图片,用于启动展示,放在Drawable 文件夹下,我这里命名为 ...
Android 引导页的代码
布局代码 <android.support.v4.view.ViewPager android:id="@+id/viewpage" android:layout_width ...
Android引导页
源码地址:https://github.com/myloften/IntroSliderSample 博客地址:http://blog.csdn.net/loften_93663469/article ...
Android 高级UI设计笔记22：Android 指示引导页（带圆点）
1. 引导页: 我们在安装某个软件首次运行时,大部分都会有一个引导页的提示,介绍软件新功能的加入或者使用说明等,支持滑动且下面会有几个圆点,显示共有多少页和当前图片的位置,类似如下效果: 2. 引导页 ...
Xamarin.Android之引导页的简单制作
0x01 前言对于现在大部分的APP,第一次打开刚安装或更新安装的APP都会有几个引导界面,通常这几个引导页是告诉用户 APP有些什么功能或者修改了什么bug.新增了什么功能等等等. 下面就用Xam ...

随机推荐

Retrofit网络请求库应用01
PS:什么是Retrofit? 在官方文档中有这样一句话--A type-safe HTTP client for Android and Java(一个类型安全的http client库),具体的话 ...
使用tail命令实时查看日志文件
[Shell] 纯文本查看复制代码 ? 1 tail -f /日志文件好了.就这样用.简单吧退出ctrl+C
PHP 八种基本的数据类型小结
四种标量类型: boolean (布尔型) integer (整型) float (浮点型, 也称作 double) string (字符串) 两种复合类型: array (数组) object (对 ...
SQL Server学习之路（四）：“增删改查”之“删”
0.目录 1.前言 2.通过SSMS删除 3.通过SQL语句删除 3.1 删除单行数据 3.2 删除所有行数据 3.3 删除表和数据库 1.前言增删改查都是对数据的操作,其中"删" ...
apply/call/bind的区别与用法
apply 方法/call 方法 obj.call(thisObj, arg1, arg2, ...);obj.apply(thisObj, [arg1, arg2, ...]); 两者作用一致,都是 ...
单点登录（SSO）的设计
一.前言什么是SSO? SSO英文全称Single Sign On,单点登录.SSO是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统.https://baike.baidu.c ...
Effective Java 第三版——2. 当构造方法参数过多时使用builder模式
Tips <Effective Java, Third Edition>一书英文版已经出版,这本书的第二版想必很多人都读过,号称Java四大名著之一,不过第二版2009年出版,到现在已经将 ...
4、libgdx应用框架
(原文:http://www.libgdx.cn/topic/29/4-libgdx%E5%BA%94%E7%94%A8%E6%A1%86%E6%9E%B6) 模块作为核心.libgdx提供了六个接 ...
【NOI2010】海拔【平面图最小割】
[问题描写叙述] YT市是一个规划良好的城市,城市被东西向和南北向的主干道划分为n×n个区域.简单起见.能够将YT市看作一个正方形,每个区域也可看作一个正方形.从而.YT城市中包含(n+1)×(n+ ...
hdu 4109 dfs+剪枝优化
求最久时间即在无环有向图里求最远路径 dfs+剪枝优化从0节点(自己添加的)出发,0到1~n个节点之间的距离为1.mt[i]表示从0点到第i个节点眼下所得的最长路径 #include<iost ...

Xamarin.Android 引导页