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

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

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

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

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

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

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

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

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

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

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. <android.support.v4.view.ViewPager
7. android:id="@+id/viewpager"
8. android:layout_width="fill_parent"
9. android:layout_height="fill_parent"
10. />
11. <LinearLayout
12. android:id="@+id/ll"
13. android:orientation="horizontal"
14. android:layout_width="wrap_content"
15. android:layout_height="wrap_content"
16. android:layout_marginBottom="24.0dip"
17. android:layout_alignParentBottom="true"
18. android:layout_centerHorizontal="true">
19. <ImageView
20. android:layout_width="wrap_content"
21. android:layout_height="wrap_content"
22. android:layout_gravity="center_vertical"
23. android:clickable="true"
24. android:padding="15.0dip"
25. android:src="@drawable/dot" />
26. <ImageView
27. android:layout_width="wrap_content"
28. android:layout_height="wrap_content"
29. android:layout_gravity="center_vertical"
30. android:clickable="true"
31. android:padding="15.0dip"
32. android:src="@drawable/dot" />
33. <ImageView
34. android:layout_width="wrap_content"
35. android:layout_height="wrap_content"
36. android:layout_gravity="center_vertical"
37. android:clickable="true"
38. android:padding="15.0dip"
39. android:src="@drawable/dot" />
40. <ImageView
41. android:layout_width="wrap_content"
42. android:layout_height="wrap_content"
43. android:layout_gravity="center_vertical"
44. android:clickable="true"
45. android:padding="15.0dip"
46. android:src="@drawable/dot" />
47. </LinearLayout>
48. </RelativeLayout>

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

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>

下面就是写Activity了。

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

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

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

有问题欢迎留言交流。

http://blog.csdn.net/notice520/article/details/7454568/