当前位置： 代码迷 >> Android >> android UI进阶之用ViewPager兑现欢迎引导页面
  详细解决方案

android UI进阶之用ViewPager兑现欢迎引导页面

热度：148   发布时间：2016-05-01 20:21:25.0
android UI进阶之用ViewPager实现欢迎引导页面

ViewPager需要android-support-v4.jar这个包的支持，来自google提供的一个附加包。大家搜下即可。

ViewPager主要用来组织一组数据，并且通过左右滑动的方式来展示。

现在的大多数应用都会有一个欢迎引导页面，如图所示，通过左右滑动来告知用户一些功能特性。


这个引导图效果用ViewPager可以很轻松的实现。

正如前面所说，ViewPager是用来展示一组数据的，所以肯定需要Adapter来绑定数据和view。先写一个Adapter：

[java]?view plaincopy
  1. package?com.notice.viewpagerd;??
  2. ??
  3. import?java.util.List;??
  4. ??
  5. import?android.os.Parcelable;??
  6. import?android.support.v4.view.PagerAdapter;??
  7. import?android.support.v4.view.ViewPager;??
  8. import?android.view.View;??
  9. ??
  10. public?class?ViewPagerAdapter?extends?PagerAdapter{??
  11. ??????
  12. ????//界面列表??
  13. ????private?List<View>?views;??
  14. ??????
  15. ????public?ViewPagerAdapter?(List<View>?views){??
  16. ????????this.views?=?views;??
  17. ????}??
  18. ??
  19. ????//销毁arg1位置的界面??
  20. ????@Override??
  21. ????public?void?destroyItem(View?arg0,?int?arg1,?Object?arg2)?{??
  22. ????????((ViewPager)?arg0).removeView(views.get(arg1));???????
  23. ????}??
  24. ??
  25. ????@Override??
  26. ????public?void?finishUpdate(View?arg0)?{??
  27. ????????//?TODO?Auto-generated?method?stub??
  28. ??????????
  29. ????}??
  30. ??
  31. ????//获得当前界面数??
  32. ????@Override??
  33. ????public?int?getCount()?{??
  34. ????????if?(views?!=?null)??
  35. ????????{??
  36. ????????????return?views.size();??
  37. ????????}??
  38. ??????????
  39. ????????return?0;??
  40. ????}??
  41. ??????
  42. ??
  43. ????//初始化arg1位置的界面??
  44. ????@Override??
  45. ????public?Object?instantiateItem(View?arg0,?int?arg1)?{??
  46. ??????????
  47. ????????((ViewPager)?arg0).addView(views.get(arg1),?0);??
  48. ??????????
  49. ????????return?views.get(arg1);??
  50. ????}??
  51. ??
  52. ????//判断是否由对象生成界面??
  53. ????@Override??
  54. ????public?boolean?isViewFromObject(View?arg0,?Object?arg1)?{??
  55. ????????return?(arg0?==?arg1);??
  56. ????}??
  57. ??
  58. ????@Override??
  59. ????public?void?restoreState(Parcelable?arg0,?ClassLoader?arg1)?{??
  60. ????????//?TODO?Auto-generated?method?stub??
  61. ??????????
  62. ????}??
  63. ??
  64. ????@Override??
  65. ????public?Parcelable?saveState()?{??
  66. ????????//?TODO?Auto-generated?method?stub??
  67. ????????return?null;??
  68. ????}??
  69. ??
  70. ????@Override??
  71. ????public?void?startUpdate(View?arg0)?{??
  72. ????????//?TODO?Auto-generated?method?stub??
  73. ??????????
  74. ????}??
  75. ??
  76. }??

?


这里我们要绑定的每一个item就是一个引导界面，我们用一个list来保存。

通过继承PagerAdapter，并实现几个我写注释的方法即可。

布局界面比较简单，加入ViewPager组件，以及底部的引导小点：

[html]?view plaincopy
  1. <?xml?version="1.0"?encoding="utf-8"?>??
  2. <RelativeLayout?xmlns:android="http://schemas.android.com/apk/res/android"??
  3. ????android:layout_width="fill_parent"??
  4. ????android:layout_height="fill_parent"??
  5. ????android:orientation="vertical"?>??
  6. ??
  7. ????<android.support.v4.view.ViewPager??
  8. ????????android:id="@+id/viewpager"??
  9. ????????android:layout_width="fill_parent"???
  10. ????????android:layout_height="fill_parent"???
  11. ????????/>??????
  12. ??????
  13. ??????
  14. ????<LinearLayout???
  15. ????????android:id="@+id/ll"???
  16. ????????android:orientation="horizontal"???
  17. ????????android:layout_width="wrap_content"???
  18. ????????android:layout_height="wrap_content"???
  19. ????????android:layout_marginBottom="24.0dip"???
  20. ????????android:layout_alignParentBottom="true"???
  21. ????????android:layout_centerHorizontal="true">??
  22. ??????????
  23. ????????<ImageView??
  24. ????????????android:layout_width="wrap_content"??
  25. ????????????android:layout_height="wrap_content"??
  26. ????????????android:layout_gravity="center_vertical"??
  27. ????????????android:clickable="true"??
  28. ????????????android:padding="15.0dip"??
  29. ????????????android:src="@drawable/dot"?/>??
  30. ??
  31. ????????<ImageView??
  32. ????????????android:layout_width="wrap_content"??
  33. ????????????android:layout_height="wrap_content"??
  34. ????????????android:layout_gravity="center_vertical"??
  35. ????????????android:clickable="true"??
  36. ????????????android:padding="15.0dip"??
  37. ????????????android:src="@drawable/dot"?/>??
  38. ??
  39. ????????<ImageView??
  40. ????????????android:layout_width="wrap_content"??
  41. ????????????android:layout_height="wrap_content"??
  42. ????????????android:layout_gravity="center_vertical"??
  43. ????????????android:clickable="true"??
  44. ????????????android:padding="15.0dip"??
  45. ????????????android:src="@drawable/dot"?/>??
  46. ??
  47. ????????<ImageView??
  48. ????????????android:layout_width="wrap_content"??
  49. ????????????android:layout_height="wrap_content"??
  50. ????????????android:layout_gravity="center_vertical"??
  51. ????????????android:clickable="true"??
  52. ????????????android:padding="15.0dip"??
  53. ????????????android:src="@drawable/dot"?/>??
  54. ??
  55. ????</LinearLayout>??
  56. ??
  57. </RelativeLayout>??

其中小点的图片用一个selector来控制颜色（设置item的enable为true或者false）

?

dot.xml:

[html]?view plaincopy
  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>??

?


下面就是写Activity了。

?

[java]?view plaincopy
  1. package?com.notice.viewpagerd;??
  2. ??
  3. import?java.util.ArrayList;??
  4. import?java.util.List;??
  5. ??
  6. import?android.app.Activity;??
  7. import?android.os.Bundle;??
  8. import?android.support.v4.view.ViewPager;??
  9. import?android.support.v4.view.ViewPager.OnPageChangeListener;??
  10. import?android.view.View;??
  11. import?android.view.View.OnClickListener;??
  12. import?android.widget.ImageView;??
  13. import?android.widget.LinearLayout;??
  14. ??
  15. public?class?ViewPagerDemoActivity?extends?Activity?implements?OnClickListener,?OnPageChangeListener{??
  16. ??????
  17. ????private?ViewPager?vp;??
  18. ????private?ViewPagerAdapter?vpAdapter;??
  19. ????private?List<View>?views;??
  20. ??????
  21. ????//引导图片资源??
  22. ????private?static?final?int[]?pics?=?{?R.drawable.whatsnew_00,??
  23. ????????????R.drawable.whatsnew_01,?R.drawable.whatsnew_02,??
  24. ????????????R.drawable.whatsnew_03?};??
  25. ??????
  26. ????//底部小店图片??
  27. ????private?ImageView[]?dots?;??
  28. ??????
  29. ????//记录当前选中位置??
  30. ????private?int?currentIndex;??
  31. ??????
  32. ????/**?Called?when?the?activity?is?first?created.?*/??
  33. ????@Override??
  34. ????public?void?onCreate(Bundle?savedInstanceState)?{??
  35. ????????super.onCreate(savedInstanceState);??
  36. ????????setContentView(R.layout.main);??
  37. ??????????
  38. ????????views?=?new?ArrayList<View>();??
  39. ?????????
  40. ????????LinearLayout.LayoutParams?mParams?=?new?LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,??
  41. ????????????????LinearLayout.LayoutParams.WRAP_CONTENT);??
  42. ??????????
  43. ????????//初始化引导图片列表??
  44. ????????for(int?i=0;?i<pics.length;?i++)?{??
  45. ????????????ImageView?iv?=?new?ImageView(this);??
  46. ????????????iv.setLayoutParams(mParams);??
  47. ????????????iv.setImageResource(pics[i]);??
  48. ????????????views.add(iv);??
  49. ????????}??
  50. ????????vp?=?(ViewPager)?findViewById(R.id.viewpager);??
  51. ????????//初始化Adapter??
  52. ????????vpAdapter?=?new?ViewPagerAdapter(views);??
  53. ????????vp.setAdapter(vpAdapter);??
  54. ????????//绑定回调??
  55. ????????vp.setOnPageChangeListener(this);??
  56. ??????????
  57. ????????//初始化底部小点??
  58. ????????initDots();??
  59. ??????????
  60. ????}??
  61. ??????
  62. ????private?void?initDots()?{??
  63. ????????LinearLayout?ll?=?(LinearLayout)?findViewById(R.id.ll);??
  64. ??
  65. ????????dots?=?new?ImageView[pics.length];??
  66. ??
  67. ????????//循环取得小点图片??
  68. ????????for?(int?i?=?0;?i?<?pics.length;?i++)?{??
  69. ????????????dots[i]?=?(ImageView)?ll.getChildAt(i);??
  70. ????????????dots[i].setEnabled(true);//都设为灰色??
  71. ????????????dots[i].setOnClickListener(this);??
  72. ????????????dots[i].setTag(i);//设置位置tag，方便取出与当前位置对应??
  73. ????????}??
  74. ??
  75. ????????currentIndex?=?0;??
  76. ????????dots[currentIndex].setEnabled(false);//设置为白色，即选中状态??
  77. ????}??
  78. ??????
  79. ????/**?
  80. ?????*设置当前的引导页??
  81. ?????*/??
  82. ????private?void?setCurView(int?position)??
  83. ????{??
  84. ????????if?(position?<?0?||?position?>=?pics.length)?{??
  85. ????????????return;??
  86. ????????}??
  87. ??
  88. ????????vp.setCurrentItem(position);??
  89. ????}??
  90. ??
  91. ????/**?
  92. ?????*这只当前引导小点的选中??
  93. ?????*/??
  94. ????private?void?setCurDot(int?positon)??
  95. ????{??
  96. ????????if?(positon?<?0?||?positon?>?pics.length?-?1?||?currentIndex?==?positon)?{??
  97. ????????????return;??
  98. ????????}??
  99. ??
  100. ????????dots[positon].setEnabled(false);??
  101. ????????dots[currentIndex].setEnabled(true);??
  102. ??
  103. ????????currentIndex?=?positon;??
  104. ????}??
  105. ??
  106. ????//当滑动状态改变时调用??
  107. ????@Override??
  108. ????public?void?onPageScrollStateChanged(int?arg0)?{??
  109. ????????//?TODO?Auto-generated?method?stub??
  110. ??????????
  111. ????}??
  112. ??
  113. ????//当当前页面被滑动时调用??
  114. ????@Override??
  115. ????public?void?onPageScrolled(int?arg0,?float?arg1,?int?arg2)?{??
  116. ????????//?TODO?Auto-generated?method?stub??
  117. ??????????
  118. ????}??
  119. ??
  120. ????//当新的页面被选中时调用??
  121. ????@Override??
  122. ????public?void?onPageSelected(int?arg0)?{??
  123. ????????//设置底部小点选中状态??
  124. ????????setCurDot(arg0);??
  125. ????}??
  126. ??
  127. ????@Override??
  128. ????public?void?onClick(View?v)?{??
  129. ????????int?position?=?(Integer)v.getTag();??
  130. ????????setCurView(position);??
  131. ????????setCurDot(position);??
  132. ????}??
  133. }??

注意实现OnClickListener, OnPageChangeListener接口，监听小点的点击事件以及viewPager的滑动，在相应的回调方法中设置小点的enable状态，我相信这个部分代码比我讲的清楚，就是判断当前选中的位置对相应的小点进行设置～

?

可以看到ViewPager还是一个非常简单，也非常实用的一个控件。

  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.