• ViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view。
  • ViewPager类直接继承了ViewGroup类,所以它是一个容器类,可以在其中添加其他的view类。
  • ViewPager类需要一个PagerAdapter适配器类给它提供数据。
  • ViewPager经常和Fragment一起使用,并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

实现这种效果:
有好几个页面,上面是viewpager可以左右滑,中间是按钮,只在最后一页显示出来,点击跳转到主页面。下面的几个点的实现可以是几张图片,也可以动态的添加几个点,小红点跟随页面动。
1.布局
  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. android:layout_width="match_parent"
  3. android:layout_height="match_parent" >
  4. <android.support.v4.view.ViewPager
  5. android:id="@+id/vp_guide"
  6. android:layout_width="match_parent"
  7. android:layout_height="match_parent" />
  8. <Button
  9. android:id="@+id/btn_start"
  10. android:layout_width="wrap_content"
  11. android:layout_height="wrap_content"
  12. android:layout_alignParentBottom="true"
  13. android:layout_centerHorizontal="true"
  14. android:layout_marginBottom="60dp"
  15. android:background="@drawable/btn_guide_selector"
  16. android:padding="5dp"//padding是从内往外撑
  17. android:text="开始体验"
  18. android:visibility="invisible"
  19. android:textColor="@drawable/btn_guide_text_selector" />
  20. <RelativeLayout
  21. android:layout_width="wrap_content"
  22. android:layout_height="wrap_content"
  23. android:layout_alignParentBottom="true"
  24. android:layout_centerHorizontal="true"
  25. android:layout_marginBottom="20dp" >
  26. <LinearLayout
  27. android:id="@+id/ll_point_group"
  28. android:layout_width="wrap_content"
  29. android:layout_height="wrap_content"
  30. android:orientation="horizontal" >
  31. </LinearLayout>
  32. <View
  33. android:id="@+id/view_red_point"
  34. android:layout_width="10dp"
  35. android:layout_height="10dp"
  36. android:background="@drawable/shape_point_red" />
  37. </RelativeLayout>
  38. </RelativeLayout>
按钮的选择器
  1. //新建drawable目录,背景状态选择器
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item android:drawable="@drawable/button_red_pressed" android:state_pressed="true"/>
  4. <item android:drawable="@drawable/button_red_normal"/>
  5. </selector>
  1. //文字颜色选择器
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
  3. <item android:state_pressed="true" android:color="@android:color/black"/>
  4. <item android:color="@android:color/white"/>
  5. </selector>
小点:
  1. //drawable目录下,形状选择器
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
  3. android:shape="oval" >
  4. <solid android:color="#f00" />
  5. </shape>
  6. <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval" >
        <solid android:color="@android:color/darker_gray" />
    </shape>
2.主页面
LayoutParams相当于一个Layout的信息包,它封装了Layout的位置、高、宽等信息。其实这个LayoutParams类是用于child view(子视图) 向 parent view(父视图)传达自己的意愿的一个东西(孩子想变成什么样向其父亲说明)其实子视图父视图可以简单理解成
一个LinearLayout 和 这个LinearLayout里边一个 TextView 的关系 TextView 就算LinearLayout的子视图 child view 。需要注意的是LayoutParams只是ViewGroup的一个内部类这里边这个也就是ViewGroup里边这个LayoutParams类是 base class 基类实际上每个不同的ViewGroup都有自己的LayoutParams子类
  1. //第一个参数为宽的设置,第二个参数为高的设置。
  2. LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(
  3. LinearLayout.LayoutParams.FILL_PARENT,
  4. LinearLayout.LayoutParams.WRAP_CONTENT
  5. );
  6. //调用addView()方法增加一个TextView到线性布局中
  7. mLayout.addView(textView, p);
  8. //比较简单的一个例子
  9. /**<TextView 
               android:layout_width="fill_parent" 
               android:layout_height="wrap_content" 
               android:text="Text View"/>*/  效果一样
  1. /**
  2. * 新手引导
  3. *
  4. * @author Kevin
  5. *
  6. */
  7. public class GuideActivity extends Activity {
  8. private static final int[] mImageIds = new int[] { R.drawable.guide_1,
  9. R.drawable.guide_2, R.drawable.guide_3 };
  10. private ViewPager vpGuide;
  11. private ArrayList<ImageView> mImageViewList;
  12. private LinearLayout llPointGroup;// 引导圆点的父控件
  13. private int mPointWidth;// 圆点间的距离
  14. private View viewRedPoint;// 小红点
  15. private Button btnStart;// 开始体验
  16. @Override
  17. protected void onCreate(Bundle savedInstanceState) {
  18. super.onCreate(savedInstanceState);
  19. requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题
  20. setContentView(R.layout.activity_guide);
  21. vpGuide = (ViewPager) findViewById(R.id.vp_guide);
  22. llPointGroup = (LinearLayout) findViewById(R.id.ll_point_group);
  23. viewRedPoint = findViewById(R.id.view_red_point);
  24. btnStart = (Button) findViewById(R.id.btn_start);
  25. btnStart.setOnClickListener(new OnClickListener() {
  26. @Override
  27. public void onClick(View v) {
  28. // 更新sp, 表示已经展示了新手引导
  29. PrefUtils.setBoolean(GuideActivity.this,
  30. "is_user_guide_showed", true);
  31. // 跳转主页面
  32. startActivity(new Intent(GuideActivity.this, MainActivity.class));
  33. finish();
  34. }
  35. });
  36. initViews();
  37. vpGuide.setAdapter(new GuideAdapter());
  38. vpGuide.setOnPageChangeListener(new GuidePageListener());
  39. }
  40. /**
  41. * 初始化界面
  42. */
  43. private void initViews() {
  44. mImageViewList = new ArrayList<ImageView>();
  45. // 初始化引导页的3个页面
  46. for (int i = 0; i < mImageIds.length; i++) {
  47. ImageView image = new ImageView(this);
  48. image.setBackgroundResource(mImageIds[i]);// 设置引导页背景,注意是Resource
  49. mImageViewList.add(image);
  50. }
  51. // 初始化引导页的小圆点
  52. for (int i = 0; i < mImageIds.length; i++) {
  53. View point = new View(this);
  54. point.setBackgroundResource(R.drawable.shape_point_gray);// 设置引导页默认圆点
  55. LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10, 10);//通过params设置布局的参数,括号里是宽高
  56. if (i > 0) {
  57. params.leftMargin = 10;// 设置圆点间隔
  58. }
  59. point.setLayoutParams(params);// 设置圆点的大小
  60. llPointGroup.addView(point);// 将圆点添加给线性布局
  61. }
  62. // 获取视图树, 对layout结束事件进行监听,获取小灰点的距离
  63. llPointGroup.getViewTreeObserver().addOnGlobalLayoutListener(
  64. new OnGlobalLayoutListener() {
  65. // 当layout执行结束后回调此方法
  66. @Override
  67. public void onGlobalLayout() {
  68. System.out.println("layout 结束");
  69. llPointGroup.getViewTreeObserver()
  70. .removeGlobalOnLayoutListener(this);
  71. mPointWidth = llPointGroup.getChildAt(1).getLeft()
  72. - llPointGroup.getChildAt(0).getLeft();
  73. System.out.println("圆点距离:" + mPointWidth);
  74. }
  75. });
  76. }
  77. /**
  78. * ViewPager数据适配器
  79. *
  80. * @author Kevin
  81. *
  82. */
  83. class GuideAdapter extends PagerAdapter {
  84. @Override
  85. public int getCount() {
  86. return mImageIds.length;
  87. }
  88. @Override
  89. public boolean isViewFromObject(View arg0, Object arg1) {
  90. return arg0 == arg1;
  91. }
  92. @Override
  93. public Object instantiateItem(ViewGroup container, int position) {
  94. container.addView(mImageViewList.get(position));
  95. return mImageViewList.get(position);
  96. }
  97. @Override
  98. public void destroyItem(ViewGroup container, int position, Object object) {
  99. container.removeView((View) object);
  100. }
  101. }
  102. /**
  103. * viewpager的滑动监听
  104. *
  105. * @author Kevin
  106. *
  107. */
  108. class GuidePageListener implements OnPageChangeListener {
  109. // 滑动事件
  110. @Override
  111. public void onPageScrolled(int position, float positionOffset,
  112. int positionOffsetPixels) {
  113. // System.out.println("当前位置:" + position + ";百分比:" + positionOffset
  114. // + ";移动距离:" + positionOffsetPixels);
  115. int len = (int) (mPointWidth * positionOffset) + position
  116. * mPointWidth;
  117. RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) viewRedPoint
  118. .getLayoutParams();// 获取当前红点的布局参数
  119. params.leftMargin = len;// 设置左边距
  120. viewRedPoint.setLayoutParams(params);// 重新给小红点设置布局参数
  121. }
  122. // 某个页面被选中
  123. @Override
  124. public void onPageSelected(int position) {
  125. if (position == mImageIds.length - 1) {// 最后一个页面
  126. btnStart.setVisibility(View.VISIBLE);// 显示开始体验的按钮
  127. } else {
  128. btnStart.setVisibility(View.INVISIBLE);
  129. }
  130. }
  131. // 滑动状态发生变化
  132. @Override
  133. public void onPageScrollStateChanged(int state) {
  134. }
  135. }
  136. }
3.SharePreference封装类
  1. public class PrefUtils {
  2. public static final String PREF_NAME = "config";
  3. public static boolean getBoolean(Context ctx, String key,
  4. boolean defaultValue) {
  5. SharedPreferences sp = ctx.getSharedPreferences(PREF_NAME,
  6. Context.MODE_PRIVATE);
  7. return sp.getBoolean(key, defaultValue);
  8. }
  9. public static void setBoolean(Context ctx, String key, boolean value) {
  10. SharedPreferences sp = ctx.getSharedPreferences(PREF_NAME,
  11. Context.MODE_PRIVATE);
  12. sp.edit().putBoolean(key, value).commit();
  13. }
  14. }
2.闪屏页
只有一个imageview,主要是对动画的操作
  1. /**
  2. * 闪屏页
  3. */
  4. public class SplashActivity extends Activity {
  5. RelativeLayout rlRoot;
  6. @Override
  7. protected void onCreate(Bundle savedInstanceState) {
  8. super.onCreate(savedInstanceState);
  9. setContentView(R.layout.activity_splash);
  10. rlRoot = (RelativeLayout) findViewById(R.id.rl_root);
  11. startAnim();
  12. //LibUtils.doSomething();
  13. //rlRoot.setBackgroundResource(R.drawable.newscenter_press);
  14. }
  15. /**
  16. * 开启动画
  17. */
  18. private void startAnim() {
  19. // 动画集合
  20. AnimationSet set = new AnimationSet(false);
  21. // 旋转动画
  22. RotateAnimation rotate = new RotateAnimation(0, 360,
  23. Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
  24. 0.5f);
  25. rotate.setDuration(1000);// 动画时间
  26. rotate.setFillAfter(true);// 保持动画状态
  27. // 缩放动画
  28. ScaleAnimation scale = new ScaleAnimation(0, 1, 0, 1,
  29. Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
  30. 0.5f);
  31. scale.setDuration(1000);// 动画时间
  32. scale.setFillAfter(true);// 保持动画状态
  33. // 渐变动画
  34. AlphaAnimation alpha = new AlphaAnimation(0, 1);
  35. alpha.setDuration(2000);// 动画时间
  36. alpha.setFillAfter(true);// 保持动画状态
  37. set.addAnimation(rotate);
  38. set.addAnimation(scale);
  39. set.addAnimation(alpha);
  40. // 设置动画监听
  41. set.setAnimationListener(new AnimationListener() {
  42. @Override
  43. public void onAnimationStart(Animation animation) {
  44. }
  45. @Override
  46. public void onAnimationRepeat(Animation animation) {
  47. }
  48. // 动画执行结束
  49. @Override
  50. public void onAnimationEnd(Animation animation) {
  51. jumpNextPage();
  52. }
  53. });
  54. rlRoot.startAnimation(set);
  55. }
  56. /**
  57. * 跳转下一个页面
  58. */
  59. private void jumpNextPage() {
  60. // 判断之前有没有显示过新手引导
  61. boolean userGuide = PrefUtils.getBoolean(this, "is_user_guide_showed",
  62. false);
  63. if (!userGuide) {
  64. // 跳转到新手引导页
  65. startActivity(new Intent(SplashActivity.this, GuideActivity.class));
  66. } else {
  67. startActivity(new Intent(SplashActivity.this, MainActivity.class));
  68. }
  69. finish();
  70. }
  71. }

1.viewpager的更多相关文章

  1. 踩石行动:ViewPager无限轮播的坑

    2016-6-19 前言 View轮播效果在app中很常见,一想到左右滑动的效果就很容易想到使用ViewPager来实现.对于像我们常说的banner这样的效果,具备无限滑动的功能是可以用ViewPa ...

  2. Android ViewPager打造3D画廊

    本文已授权微信公众号:鸿洋(hongyangAndroid)在微信公众号平台原创首发. 网上有很多关于使用Gallery来打造3D画廊的博客,但是在关于Gallery的官方说法中表明: This cl ...

  3. Android中Fragment和ViewPager那点事儿(仿微信APP)

    在之前的博文<Android中使用ViewPager实现屏幕页面切换和引导页效果实现>和<Android中Fragment的两种创建方式>以及<Android中Fragm ...

  4. TabLayout + ViewPager

    一.实现思路 1.在build.gradle中添加依赖,例如: compile 'com.android.support:support-v4:23.4.0'compile 'com.android. ...

  5. android内部培训视频_第三节(3)_常用控件(ViewPager、日期时间相关、ListView)

    第三节(2):常用控件之ViewPager.日期时间相关.ListView  一.ViewPager 实例:结合PagerAdapter滑动切换图片  二.日期时间相关:AnalogClock\Dig ...

  6. 简单的ViewPager了解Scroller类

    View滑动是自定义ViewGroup中十分常见的一个功能.Android提供了多种View滑动的方法. layout方法 offsetLeftAndRight()与offsetTopAndBotto ...

  7. PagerSlidingTabStrip介绍及使用,让ViewPager更绚丽

    转载请注明出处http://blog.csdn.net/harryweasley/article/details/42290595,谢谢. 以前一直想着,ViewPager中间的那个横线怎么跟着屏幕的 ...

  8. 详细分析Android viewpager 无限循环滚动图片

    由于最近在忙于项目,就没时间更新博客了,于是趁着周日在房间把最近的在项目中遇到的技术总结下.最近在项目中要做一个在viewpager无限滚动图片的需求,其实百度一下有好多的例子,但是大部分虽然实现了, ...

  9. 一行代码引入 ViewPager 无限循环 + 页码显示

    (出处:http://www.cnblogs.com/linguanh) 前序: 网上的这类 ViewPager 很多,但是很多都不够好,体现在 bug多.对少页面不支持,例如1~2张图片.功能整合不 ...

  10. 使用ViewPager实现自动轮播

    很多APP中都实现了类似引导页的自动轮播,不由得想到昨天的引导页上修改一下代码实现轮播. 其实大体上只需要添加一个线程循环执行就可以了. 项目已同步至:https://github.com/nanch ...

随机推荐

  1. model.form使用,配合form的钩子

    一次model.form的使用记录,配合form钩子的过程 在写信息采集功能的时候,需要添加资产信息,使用modelform组件减少工作量 官网介绍:版本1.9.https://docs.django ...

  2. Linux中近期使用高频命令小结

    配置定时任务命令crontab : 用来增加系统的定时任务,可以指定用户,时间,以及相关指令: 查看端口是否相通,扫描端口nc: nc -v ip地址 端口号: 转换格式命令dos2unix: 用来将 ...

  3. Linux的Namespace与Cgroups介绍

    Namespace 的概念 Linux Namespace 是kernel 的一个功能,它可以隔离一系列系统的资源,比如PID(Process ID),User ID, Network等等.一般看到这 ...

  4. Python介绍与安装

    Python 是一种面向对象的解释型程序设计语言,支持支持面向过程.函数式和面向对象编程.另外,Python可以在Windows.UNIX等多个操作系统上使用. 为什么学编程 编程是一种工具,可以实现 ...

  5. 接入层高性能缓存技术nginx+redis利器OpenResty

    一. OpenRestyOpenResty是一个基于 Nginx与 Lua的高性能 Web平台,其内部集成了大量精良的 Lua库.第三方模块以及大多数的依赖项.用于方便地搭建能够处理超高并发.扩展性极 ...

  6. H5页面input输入框含有键盘自带的表情符时显示异常

    在做一个关于新闻的评论功能的H5页面时,需求里面要求能够发送表情显示表情,如果使用自定义的表情库,则在评论也还要加载大量的表情符图片,极大的影响加载速度,消耗流量,去看了下别的新闻网页版的评论部分也没 ...

  7. VS2010 Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)

    步骤如下: 1. Chart控件(一)Chart控件在ASP.NET网站中的应用示例详解(C#语言)" title="VS2010 Chart控件(一)Chart控件在ASP.NE ...

  8. sed 笔记

    sed是一个非交互式文本编辑器,他可以对文本文件和标准输入进行编辑,标准输入可以是来自键盘,文件重定向,字符串,变量甚至来自于管道的文本.sed适用于以下三种场合: 编辑相对交互式文本编辑器而言太大的 ...

  9. jquery抓娃娃机代码

    <html><head><title>jQuery抓娃娃机游戏代码 - 源码之家</title><meta name="content- ...

  10. 联想RD450带Read10服务器操作系统密码忘记

    联想RD450带Read10服务器操作系统密码忘记 可以用U盘PE进入重写密码 按F1进入BIOS界面设置如下 进入BOOT选项卡,设置U盘第一启动,也就是图中 Boot Option #1 设置为 ...