Android开发_ViewPager制作欢迎界面

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

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

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

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

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

[java]  view plain copy

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 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="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 plain copy

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 plain copy

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还是一个非常简单，也非常实用的一个控件。