android 滑动页面入门

之前给大家分享了QQ设置界面的实现：

精仿QQ设置界面（自定义PreferenceActivity）有图有真相
http://www.eoeandroid.com/forum. ... &fromuid=485185

今天再给大家分享一下QQ新功能引导模块的实现（左右滑屏的实现）
不废话，直接上效果图

  

   

2011-11-24 15:23:43 上传

下载附件(76.72 KB)

上网搜了下ANDROID左右滑屏的实现
主流有两种方式：
一种是自定义ViewGroup
其实就是提取了workspace里的代码，去掉其他复杂的操作而保留滑屏的部分
另一种是ViewPager
是Google将Android3.0中部分API抽取出来，打成一个Jar包，android-support-v4.jar，
只要你在开发应用时引入这个包，那你就也能使用ViewPager、Fragment、Loader等这些API了

这就难怪网上关于ViewPager的资料这么少

本例结合QQ的实际应用以以上两种方式实现，个人感觉第一种方式实现出来的效果更为平滑，由于ViewPager不太了解，不知道如何设置相关参数，感觉在固定页切换时较为深硬，不过ViewPager确是是个强大的实现，类似于实现QQ主界面TAB+标签页间滑屏切换（ 非Gesture判断手势然后使用动画，而是拖的过程中就能拉出视图 ）可以说是易如反掌，很可惜我没能试成功
相关SDK资料如下：
http://developer.android.com/resources/samples/Support4Demos/src/com/example/android/supportv4/app/FragmentTabsPager.html
比如我设定第一页的ACTIVITY使用activity1，总是发生ClassCastException，不知道哪里出了问题，哪位高手有该例的DEMO麻烦发个链接上来让大家学习学习

好了，其他的不多说了，工程默认使用的是第一种方式：

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
   
3.       package="com.genius.demo"
   
4.       android:versionCode="1"
   
5.       android:versionName="1.0">
   
6. 
   
7. 
   
8.     <application android:icon="@drawable/icon" android:label="@string/app_name">
   
9.     
   
10.     
    
11.         <activity android:name=".SwitchViewDemoActivity"
    
12.                   android:label="@string/app_name"
    
13.                          android:theme="@android:style/Theme.NoTitleBar"
    
14.                          android:configChanges="orientation|keyboardHidden">
    
15.             <intent-filter>
    
16.                 <action android:name="android.intent.action.MAIN" />
    
17.                 <category android:name="android.intent.category.LAUNCHER" />
    
18.             </intent-filter>
    
19.         </activity>
    
20.         
    
21.         <activity android:name=".ViewPageActivity"
    
22.                   android:label="@string/app_name"
    
23.                   android:theme="@android:style/Theme.NoTitleBar"
    
24.                   android:configChanges="orientation|keyboardHidden">
    
25. <!--            <intent-filter>-->
    
26. <!--                <action android:name="android.intent.action.MAIN" />-->
    
27. <!--                <category android:name="android.intent.category.LAUNCHER" />-->
    
28. <!--            </intent-filter>-->
    
29.         </activity>
    
30. 
    
31.     </application>
    
32. </manifest>

 

 

ViewPager需要android-support-v4.jar这个包的支持，来自google提供的一个附加包。大家搜下即可。
ViewPager主要用来组织一组数据，并且通过左右滑动的方式来展示。
现在的大多数应用都会有一个欢迎引导页面，如图所示，通过左右滑动来告知用户一些功能特性。

2012-10-25 13:41 上传

下载附件 (315.92 KB)

这个引导图效果用ViewPager可以很轻松的实现。
正如前面所说，ViewPager是用来展示一组数据的，所以肯定需要Adapter来绑定数据和view。先写一个Adapter：

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

复制代码

这里我们要绑定的每一个item就是一个引导界面，我们用一个list来保存。
通过继承PagerAdapter，并实现几个我写注释的方法即可。
布局界面比较简单，加入ViewPager组件，以及底部的引导小点：

1. 
   
2. <?xml version="1.0" encoding="utf-8"?>
   
3. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
4.     android:layout_width="fill_parent"
   
5.     android:layout_height="fill_parent"
   
6.     android:orientation="vertical" >
   
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.         <ImageView
    
31.             android:layout_width="wrap_content"
    
32.             android:layout_height="wrap_content"
    
33.             android:layout_gravity="center_vertical"
    
34.             android:clickable="true"
    
35.             android:padding="15.0dip"
    
36.             android:src="@drawable/dot" />
    
37.         <ImageView
    
38.             android:layout_width="wrap_content"
    
39.             android:layout_height="wrap_content"
    
40.             android:layout_gravity="center_vertical"
    
41.             android:clickable="true"
    
42.             android:padding="15.0dip"
    
43.             android:src="@drawable/dot" />
    
44.         <ImageView
    
45.             android:layout_width="wrap_content"
    
46.             android:layout_height="wrap_content"
    
47.             android:layout_gravity="center_vertical"
    
48.             android:clickable="true"
    
49.             android:padding="15.0dip"
    
50.             android:src="@drawable/dot" />
    
51.     </LinearLayout>
    
52. </RelativeLayout>
    

复制代码

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

dot.xml:

1. 
   
2. <?xml version="1.0" encoding="UTF-8"?>
   
3. <selector
   
4.   xmlns:android="http://schemas.android.com/apk/res/android">
   
5.     <item android:state_enabled="true" android:drawable="@drawable/dark_dot" />
   
6.     <item android:state_enabled="false" android:drawable="@drawable/white_dot" />
   
7. </selector>
   

复制代码

下面就是写Activity了。

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

复制代码

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

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