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. <android.support.v4.view.ViewPager
  6. android:id="@+id/viewpage"
  7. android:layout_width="match_parent"
  8. android:layout_height="match_parent"></android.support.v4.view.ViewPager>
  9. <LinearLayout
  10. android:id="@+id/point"
  11. android:layout_width="wrap_content"
  12. android:layout_height="wrap_content"
  13. android:orientation="horizontal"
  14. android:layout_alignParentBottom="true"
  15. android:layout_centerHorizontal="true"
  16. android:layout_marginBottom="24.0dp"
  17. android:gravity="center_horizontal"></LinearLayout>
  18. <TextView
  19. android:id="@+id/guideText"
  20. android:layout_width="90dp"
  21. android:layout_height="28dp"
  22. android:text="立即体验"
  23. android:textColor="@color/White"
  24. android:background="@drawable/guide_button"
  25. android:layout_centerHorizontal="true"
  26. android:gravity="center"
  27. android:layout_marginBottom="20dp"
  28. android:layout_above="@id/point"
  29. android:visibility="gone"
  30. />
  31. </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. 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. if (i < 1)
  8. {
  9. pointParams.SetMargins(0, 0, 0, 0);
  10. }
  11. else
  12. {
  13. pointParams.SetMargins(10, 0, 0, 0);
  14. }
  15. ImageView imageView = new ImageView(this);
  16. imageView.LayoutParameters = pointParams;
  17. imageView.SetBackgroundResource(Resource.Drawable.NoPress);
  18. linearLayout_Point.AddView(imageView);
  19. }
  20. // 设置默认选中第一张圆点
  21. 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. public void OnPageScrollStateChanged(int state)
  5. {
  6. }
  7. /// <summary>
  8. /// 滑动到第几张图片
  9. /// </summary>
  10. /// <param name="position"></param>
  11. public void OnPageSelected(int position)
  12. {
  13. for (int i = 0; i < imageView.Length; i++)
  14. {
  15. if (i == position)
  16. {
  17. linearLayout_Point.GetChildAt(position).SetBackgroundResource(Resource.Drawable.Press);
  18. }
  19. else
  20. {
  21. linearLayout_Point.GetChildAt(i).SetBackgroundResource(Resource.Drawable.NoPress);
  22. }
  23. }
  24. // 滑动到最后一张图，显示按钮
  25. if (position == imageView.Length - 1)
  26. {
  27. tv.Visibility = ViewStates.Visible;
  28. }
  29. else
  30. {
  31. tv.Visibility = ViewStates.Gone;
  32. }
  33. }

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

Xamarin.Android 引导页相关推荐

  1. Android 引导页开发管理2

    <Android 引导页开发管理1>说明的是连续页面的闪烁效果,本次文章显示的是,一张效果效果图等待3s后进入主页面. 后续开发可以显示一段flash或者其他效果图看看. 1.splash ...

  2. Android开发--实现Android引导页

    几乎每个app都有引导页,下面我们来做一个引导页的实现. 引导页,是指软件首次进入或者更新完成后,软件显示的页面,一般展示软件特色功能或者更新的内容. 先判断是否第一次启动app,如果是,则进入引导页 ...

  3. Android引导页图片拉伸问题

    程序启动时候通过设置主体Theme的方式设置引导页,这样会使程序视觉上启动较快,不卡顿,参考以下链接: https://blog.csdn.net/Mr_Tony/article/details/10 ...

  4. android引导页自动轮播,Android使用ViewPager实现自动轮播

    很多APP中都实现了类似引导页的自动轮播,不由得想到昨天的引导页上修改一下代码实现轮播. 其实大体上只需要添加一个线程循环执行就可以了. 同样的先上图 直接上代码,注释都全的,我想这样更有利于理解. ...

  5. android 启动页大小,android引导页大图

    引导页图片一般采用本地图片打包在APK中,并且显示大小为整个屏幕,所以在显示引导页图片时有以下几点需要注意: 1. 最好使用多个尺寸的引导页来保证适配效果,比如在drawable-hdpi, draw ...

  6. android引导页大小,Android:启动引导页实现

    2 android:layout_width=match_parent 3 android:layout_height=match_parent > 4 5 6 android:id=@+id/ ...

  7. android引导页图片全屏适配,关于图片适配不同尺寸的image View（实战）

    分享人:广州华软佐罗 一. 前言 在前端开发过程中,设计稿中往往只提供一张图片,但是app内需要用到的尺寸各种各样. 同时图片不仅是信息的直接表达,也会为网站起到美观点缀的作用,图片的变形.过分裁切会 ...

  8. java中引导页面的,Android实现欢迎引导页面

    现在的大多数应用都会有一个欢迎引导页面, 需求分析: 程序安装后第一次启动: 启动页-->功能引导页-->应用主页 以后启动: 启动页-->应用主页 实现原理: 用SharedPre ...

  9. Android进阶篇之引导页系列之ViewPager实现Animation动画引导页

    Android进阶篇之引导页系列之ViewPager实现Animation动画引导页 转载于:https://www.cnblogs.com/zhujiabin/p/5795789.html

  10. Android APP 引导页实现-第一次应用进入时加载

    APP引导页是每个优质APP必备的元素,下面我们研究一下如何只在第一次进入应用时进行加载引导页的方法. 1.判断是否第一次进入应用的方法: package com.yayun.guide;import ...

最新文章

  1. 【深度学习】一文弄懂CNN及图像识别(Python)
  2. linux npm环境变量,linux配置npm环境变量
  3. matlab余割平方方向图,基于余割平方赋形波束的宽带微带阵列天线设计
  4. mysql-数据库操作
  5. 只读副本和Spring Data第3部分：配置两个实体管理器
  6. js实时获取窗口大小变化
  7. 边界信任模型，零信任模型
  8. JQuery的click、bind、delegate、off、unbind
  9. java工具类专利申请文档_Java工具类 (3)------WordUtils------利用Poi根据模板生成新的word文档...
  10. WIN7开机欢迎界面后黑屏
  11. 马斯克联名2000多AI专家誓言禁绝杀人机器人！发起人泰格马克将亲临AI World2018...
  12. 用Excel做简单的数据分析
  13. Chrome恐龙小游戏“开挂“跑分
  14. Pandas实战-Series的方法
  15. getch()函数怎么用
  16. 百度地图API和2D/3D地图的转换
  17. 微信分享服务器,微信分享的链接会被腾讯后台先访问
  18. Matlab表格和时间表中的分组计算
  19. 成交量分布图识别阻力支撑区域构建交易策略
  20. android 图片凸出

热门文章

  1. win10 当前操作环境不支持支付宝控件 完美解决办法
  2. 深入浅出CChart 每日一课——快乐高四第九课 于无声处，CChart内置功能介绍之数据存取篇...
  3. 浅谈 JSON 那些被转义的字符们
  4. 在PS中读取敏感数据
  5. 《NS与网络模拟》第五章node示例
  6. vue 静态资源文件夹src下的assets 和static的区别
  7. 用Atlas来实现一个基于AJAX的无刷新Chatroom
  8. 读取页面上所有的checkbox
  9. CentOS 7添加应用快捷方式到桌面
  10. 学生管理系统----当然封装类型