【转】viewpager的用法总结

baopbird2005

这是谷歌官方给我们提供的一个兼容低版本安卓设备的软件包，里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一利用它，我们可以做很多事情，从最简单的导航，到页面菜单等等。那如何使用它呢，与LisstView类似，我们也需要一个适配器，他就是PagerAdapter。看一下api的图片，


ViewPager的功能就是可以使视图滑动，就像Lanucher左右滑动那样。分三个步骤来使用它：
  1.在住布局文件里加入

1. <android.support.v4.view.ViewPager    这个组件，注意这个组件是用来显示左右滑动的界面的，如果不加载xml布局文件，他是不会显示内容的。  
   
2.         android:id="@+id/viewpager"  
   
3.         android:layout_width="wrap_content"  
   
4.         android:layout_height="wrap_content"  
   
5.         android:layout_gravity="center" >

复制代码

1. <android.support.v4.view.ViewPager    这个组件，注意这个组件是用来显示左右滑动的界面的，如果不加载xml布局文件，他是不会显示内容的。  
   
2.         android:id="@+id/viewpager"  
   
3.         android:layout_width="wrap_content"  
   
4.         android:layout_height="wrap_content"  
   
5.         android:layout_gravity="center" >  

复制代码

2.加载要显示的页卡，

1. LayoutInflater lf = getLayoutInflater().from(this);  
   
2.         view1 = lf.inflate(R.layout.layout1, null);  
   
3.         view2 = lf.inflate(R.layout.layout2, null);  
   
4.         view3 = lf.inflate(R.layout.layout3, null);  
   
5.   
   
6.         viewList = new ArrayList<View>();// 将要分页显示的View装入数组中   
   
7.         viewList.add(view1);  
   
8.         viewList.add(view2);  
   
9.         viewList.add(view3);  

复制代码

1. LayoutInflater lf = getLayoutInflater().from(this);  
   
2.         view1 = lf.inflate(R.layout.layout1, null);  
   
3.         view2 = lf.inflate(R.layout.layout2, null);  
   
4.         view3 = lf.inflate(R.layout.layout3, null);  
   
5.   
   
6.         viewList = new ArrayList<View>();// 将要分页显示的View装入数组中  
   
7.         viewList.add(view1);  
   
8.         viewList.add(view2);  
   
9.         viewList.add(view3);

复制代码

3.在Activity里实例化ViewPager组件，并设置它的Adapter（就是PagerAdapter，方法与ListView一样的），在这里一般需要重写PagerAdapter。

1. PagerAdapter pagerAdapter = new PagerAdapter() {  
   
2.   
   
3.             @Override  
   
4.             public boolean isViewFromObject(View arg0, Object arg1) {  
   
5.   
   
6.                 return arg0 == arg1;  
   
7.             }  
   
8.   
   
9.             @Override  
   
10.             public int getCount() {  
    
11.   
    
12.                 return viewList.size();  
    
13.             }  
    
14.   
    
15.             @Override  
    
16.             public void destroyItem(ViewGroup container, int position,  
    
17.                     Object object) {  
    
18.                 container.removeView(viewList.get(position));  
    
19.   
    
20.             }  
    
21.   
    
22.             @Override  
    
23.             public int getItemPosition(Object object) {  
    
24.   
    
25.                 return super.getItemPosition(object);  
    
26.             }  
    
27.   
    
28.             @Override  
    
29.             public CharSequence getPageTitle(int position) {  
    
30.   
    
31.                 return titleList.get(position);  
    
32.             }  
    
33.   
    
34.             @Override  
    
35.             public Object instantiateItem(ViewGroup container, int position) {  
    
36.                 container.addView(viewList.get(position));  
    
37.                 weibo_button=(Button) findViewById(R.id.button1);  
    
38.                 weibo_button.setOnClickListener(new OnClickListener() {  
    
39.                      
    
40.                     public void onClick(View v) {  
    
41.                         intent=new Intent(ViewPagerDemo.this,WeiBoActivity.class);  
    
42.                         startActivity(intent);  
    
43.                     }  
    
44.                 });  
    
45.                 return viewList.get(position);  
    
46.             }  
    
47.   
    
48.         };  
    
49.         viewPager.setAdapter(pagerAdapter);

复制代码

1. PagerAdapter pagerAdapter = new PagerAdapter() {  
   
2.   
   
3.             @Override  
   
4.             public boolean isViewFromObject(View arg0, Object arg1) {  
   
5.   
   
6.                 return arg0 == arg1;  
   
7.             }  
   
8.   
   
9.             @Override  
   
10.             public int getCount() {  
    
11.   
    
12.                 return viewList.size();  
    
13.             }  
    
14.   
    
15.             @Override  
    
16.             public void destroyItem(ViewGroup container, int position,  
    
17.                     Object object) {  
    
18.                 container.removeView(viewList.get(position));  
    
19.   
    
20.             }  
    
21.   
    
22.             @Override  
    
23.             public int getItemPosition(Object object) {  
    
24.   
    
25.                 return super.getItemPosition(object);  
    
26.             }  
    
27.   
    
28.             @Override  
    
29.             public CharSequence getPageTitle(int position) {  
    
30.   
    
31.                 return titleList.get(position);  
    
32.             }  
    
33.   
    
34.             @Override  
    
35.             public Object instantiateItem(ViewGroup container, int position) {  
    
36.                 container.addView(viewList.get(position));  
    
37.                 weibo_button=(Button) findViewById(R.id.button1);  
    
38.                 weibo_button.setOnClickListener(new OnClickListener() {  
    
39.                      
    
40.                     public void onClick(View v) {  
    
41.                         intent=new Intent(ViewPagerDemo.this,WeiBoActivity.class);  
    
42.                         startActivity(intent);  
    
43.                     }  
    
44.                 });  
    
45.                 return viewList.get(position);  
    
46.             }  
    
47.   
    
48.         };  
    
49.         viewPager.setAdapter(pagerAdapter);  

复制代码

这是重写PagerAdapter的一个方法，我们还可以这样做：

1. public class MyViewPagerAdapter extends PagerAdapter{  
   
2.         private List<View> mListViews;  
   
3.          
   
4.         public MyViewPagerAdapter(List<View> mListViews) {  
   
5.             this.mListViews = mListViews;//构造方法，参数是我们的页卡，这样比较方便。   
   
6.         }  
   
7.   
   
8.         @Override  
   
9.         public void destroyItem(ViewGroup container, int position, Object object)   {     
   
10.             container.removeView(mListViews.get(position));//删除页卡   
    
11.         }  
    
12.   
    
13.   
    
14.         @Override  
    
15.         public Object instantiateItem(ViewGroup container, int position) {  //这个方法用来实例化页卡         
    
16.              container.addView(mListViews.get(position), 0);//添加页卡   
    
17.              return mListViews.get(position);  
    
18.         }  
    
19.   
    
20.         @Override  
    
21.         public int getCount() {           
    
22.             return  mListViews.size();//返回页卡的数量   
    
23.         }  
    
24.          
    
25.         @Override  
    
26.         public boolean isViewFromObject(View arg0, Object arg1) {            
    
27.             return arg0==arg1;//官方提示这样写   
    
28.         }  
    
29.     }

复制代码

1. public class MyViewPagerAdapter extends PagerAdapter{  
   
2.         private List<View> mListViews;  
   
3.          
   
4.         public MyViewPagerAdapter(List<View> mListViews) {  
   
5.             this.mListViews = mListViews;//构造方法，参数是我们的页卡，这样比较方便。  
   
6.         }  
   
7.   
   
8.         @Override  
   
9.         public void destroyItem(ViewGroup container, int position, Object object)   {     
   
10.             container.removeView(mListViews.get(position));//删除页卡  
    
11.         }  
    
12.   
    
13.   
    
14.         @Override  
    
15.         public Object instantiateItem(ViewGroup container, int position) {  //这个方法用来实例化页卡         
    
16.              container.addView(mListViews.get(position), 0);//添加页卡  
    
17.              return mListViews.get(position);  
    
18.         }  
    
19.   
    
20.         @Override  
    
21.         public int getCount() {           
    
22.             return  mListViews.size();//返回页卡的数量  
    
23.         }  
    
24.          
    
25.         @Override  
    
26.         public boolean isViewFromObject(View arg0, Object arg1) {            
    
27.             return arg0==arg1;//官方提示这样写  
    
28.         }  
    
29.     }

复制代码

大同小异，有一定很重要，就是我们需要重写哪些方法。从上面的图片可以看到，ViewPager的适配器是PagerAdapter，它是基类提供适配器来填充页面ViewPager内部，你很可能想要使用一个更具体的实现,如FragmentPagerAdapter或FragmentStatePagerAdapter。在这里需要说明一下，其实ViewPager应该和Fragment一起使用，至少谷歌官方是这么想的，但是在3.0之下，我们没有必要这么做。下面要注意，当你实现一个PagerAdapter,你必须至少覆盖以下方法:
instantiateItem(ViewGroup, int)
destroyItem(ViewGroup, int, Object)
getCount()
isViewFromObject(View, Object)

baopbird2005

从上面的例子中可以看到，我们最少也是实现了上面四个方法，当然如果你想让程序更健壮或是功能更全面，你可以重写其他的方法。下面看一下第一个完整的示例代码：
  主页面Activity：

1. package com.example.viewpagerdemo;  
   
2.   
   
3. import java.util.ArrayList;  
   
4. import java.util.List;  
   
5. import android.os.Bundle;  
   
6. import android.app.Activity;  
   
7. import android.content.Context;  
   
8. import android.content.Intent;  
   
9. import android.support.v4.view.PagerAdapter;  
   
10. import android.support.v4.view.PagerTabStrip;  
    
11. import android.support.v4.view.PagerTitleStrip;  
    
12. import android.support.v4.view.ViewPager;  
    
13. import android.util.AttributeSet;  
    
14. import android.view.LayoutInflater;  
    
15. import android.view.Menu;  
    
16. import android.view.View;  
    
17. import android.view.View.OnClickListener;  
    
18. import android.view.ViewGroup;  
    
19. import android.widget.Button;  
    
20.   
    
21. public class ViewPagerDemo extends Activity {  
    
22.   
    
23.     private View view1, view2, view3;//需要滑动的页卡   
    
24.     private ViewPager viewPager;//viewpager   
    
25.     private PagerTitleStrip pagerTitleStrip;//viewpager的标题   
    
26.     private PagerTabStrip pagerTabStrip;//一个viewpager的指示器，效果就是一个横的粗的下划线   
    
27.     private List<View> viewList;//把需要滑动的页卡添加到这个list中   
    
28.     private List<String> titleList;//viewpager的标题   
    
29.     private Button weibo_button;//button对象，一会用来进入第二个Viewpager的示例   
    
30.    private Intent intent;  
    
31.     @Override  
    
32.     public void onCreate(Bundle savedInstanceState) {  
    
33.         super.onCreate(savedInstanceState);  
    
34.         setContentView(R.layout.activity_view_pager_demo);  
    
35.         initView();  
    
36.     }  
    
37.       /*在这里需要说明一下，在上面的图片中我们看到了，PagerTabStrip，PagerTitleStrip，他们其实是viewpager的一个指示器，前者效果就是一个横的粗的下划线，后者用来显示各个页卡的标题，当然而这也可以共存。在使用他们的时候需要注意，看下面的布局文件，要在android.support.v4.view.ViewPager里面添加
    
38. android.support.v4.view.PagerTabStrip以及android.support.v4.view.PagerTitleStrip。
    
39. 
    
40.     private void initView() {
    
41.         viewPager = (ViewPager) findViewById(R.id.viewpager);
    
42.         //pagerTitleStrip = (PagerTitleStrip) findViewById(R.id.pagertitle);
    
43.         pagerTabStrip=(PagerTabStrip) findViewById(R.id.pagertab);
    
44.         pagerTabStrip.setTabIndicatorColor(getResources().getColor(R.color.gold));  
    
45.         pagerTabStrip.setDrawFullUnderline(false);
    
46.         pagerTabStrip.setBackgroundColor(getResources().getColor(R.color.azure));
    
47.         pagerTabStrip.setTextSpacing(50);
    
48.         /*
    
49.         weibo_button=(Button) findViewById(R.id.button1);
    
50.         weibo_button.setOnClickListener(new OnClickListener() {
    
51.             
    
52.             public void onClick(View v) {
    
53.                 intent=new Intent(ViewPagerDemo.this,WeiBoActivity.class);
    
54.                 startActivity(intent);
    
55.             }
    
56.         });
    
57.         */  
    
58.          
    
59.         view1 = findViewById(R.layout.layout1);  
    
60.         view2 = findViewById(R.layout.layout2);  
    
61.         view3 = findViewById(R.layout.layout3);  
    
62.   
    
63.         LayoutInflater lf = getLayoutInflater().from(this);  
    
64.         view1 = lf.inflate(R.layout.layout1, null);  
    
65.         view2 = lf.inflate(R.layout.layout2, null);  
    
66.         view3 = lf.inflate(R.layout.layout3, null);  
    
67.   
    
68.         viewList = new ArrayList<View>();// 将要分页显示的View装入数组中   
    
69.         viewList.add(view1);  
    
70.         viewList.add(view2);  
    
71.         viewList.add(view3);  
    
72.   
    
73.         titleList = new ArrayList<String>();// 每个页面的Title数据   
    
74.         titleList.add("wp");  
    
75.         titleList.add("jy");  
    
76.         titleList.add("jh");  
    
77.   
    
78.         PagerAdapter pagerAdapter = new PagerAdapter() {  
    
79.   
    
80.             @Override  
    
81.             public boolean isViewFromObject(View arg0, Object arg1) {  
    
82.   
    
83.                 return arg0 == arg1;  
    
84.             }  
    
85.   
    
86.             @Override  
    
87.             public int getCount() {  
    
88.   
    
89.                 return viewList.size();  
    
90.             }  
    
91.   
    
92.             @Override  
    
93.             public void destroyItem(ViewGroup container, int position,  
    
94.                     Object object) {  
    
95.                 container.removeView(viewList.get(position));  
    
96.   
    
97.             }  
    
98.   
    
99.             @Override  
    
100.             public int getItemPosition(Object object) {  
     
101.   
     
102.                 return super.getItemPosition(object);  
     
103.             }  
     
104.   
     
105.             @Override  
     
106.             public CharSequence getPageTitle(int position) {  
     
107.   
     
108.                 return titleList.get(position);//直接用适配器来完成标题的显示，所以从上面可以看到，我们没有使用PagerTitleStrip。当然你可以使用。   
     
109.   
     
110.             }  
     
111.   
     
112.             @Override  
     
113.             public Object instantiateItem(ViewGroup container, int position) {  
     
114.                 container.addView(viewList.get(position));  
     
115.                 weibo_button=(Button) findViewById(R.id.button1);//这个需要注意，我们是在重写adapter里面实例化button组件的，如果你在onCreate()方法里这样做会报错的。   
     
116.                 weibo_button.setOnClickListener(new OnClickListener() {  
     
117.                      
     
118.                     public void onClick(View v) {  
     
119.                         intent=new Intent(ViewPagerDemo.this,WeiBoActivity.class);  
     
120.                         startActivity(intent);  
     
121.                     }  
     
122.                 });  
     
123.                 return viewList.get(position);  
     
124.             }  
     
125.   
     
126.         };  
     
127.         viewPager.setAdapter(pagerAdapter);  
     
128.     }  
     
129.   
     
130.     @Override  
     
131.     public boolean onCreateOptionsMenu(Menu menu) {  
     
132.         getMenuInflater().inflate(R.menu.activity_view_pager_demo, menu);  
     
133.         return true;  
     
134.     }  
     
135.   
     
136. }

复制代码

1. <?xml version="1.0" encoding="utf-8"?>  
   
2. <LinearLayout 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="wrap_content"  
   
10.         android:layout_height="wrap_content"  
    
11.         android:layout_gravity="center" >  
    
12.                
    
13.         <android.support.v4.view.PagerTabStrip   
    
14.             android:id="@+id/pagertab"   
    
15.             android:layout_width="wrap_content"   
    
16.             android:layout_height="wrap_content"   
    
17.             android:layout_gravity="top"/>   
    
18.            
    
19.     </android.support.v4.view.ViewPager>  
    
20.   
    
21. </LinearLayout>  
    
22. <!--注意事项:     
    
23.     1.这里ViewPager和 PagerTabStrip都要把包名写全了，不然会ClassNotFount   
    
24.     2.API中说：在布局xml把PagerTabStrip当做ViewPager的一个子标签来用，不能拿出来，不然还是会报错   
    
25.     3.在PagerTabStrip标签中可以用属性android:layout_gravity=TOP|BOTTOM来指定title的位置   
    
26.     4.如果要显示出PagerTabStrip某一页的title,需要在ViewPager的adapter中实现getPageTitle(int)-->  

复制代码

这样就完成了一个简单的ViewPager的使用示例，看一下效果图：

baopbird2005

仿微博的效果，

这个标题就固定了，而且可以左右滑动，也有下面的横线，来指示页卡。方法和上面的差不多，区别在于这个横线需要我们自己来做，其实就是一个图片。这个例子是网上的一篇文章，看代码：
主Activity：

1. package com.example.viewpagerdemo;  
   
2.   
   
3. import java.util.ArrayList;  
   
4. import java.util.List;  
   
5. import android.app.Activity;  
   
6. import android.graphics.BitmapFactory;  
   
7. import android.graphics.Matrix;  
   
8. import android.os.Bundle;  
   
9. import android.support.v4.view.PagerAdapter;  
   
10. import android.support.v4.view.ViewPager;  
    
11. import android.support.v4.view.ViewPager.OnPageChangeListener;  
    
12. import android.util.DisplayMetrics;  
    
13. import android.view.LayoutInflater;  
    
14. import android.view.View;  
    
15. import android.view.View.OnClickListener;  
    
16. import android.view.animation.Animation;  
    
17. import android.view.animation.TranslateAnimation;  
    
18. import android.view.ViewGroup;  
    
19. import android.widget.ImageView;  
    
20. import android.widget.TextView;  
    
21. import android.widget.Toast;  
    
22.   
    
23. public class WeiBoActivity extends Activity {  
    
24.   
    
25.     private ViewPager viewPager;//页卡内容   
    
26.     private ImageView imageView;// 动画图片   
    
27.     private TextView textView1,textView2,textView3;  
    
28.     private List<View> views;// Tab页面列表   
    
29.     private int offset = 0;// 动画图片偏移量   
    
30.     private int currIndex = 0;// 当前页卡编号   
    
31.     private int bmpW;// 动画图片宽度   
    
32.     private View view1,view2,view3;//各个页卡   
    
33.     @Override  
    
34.     protected void onCreate(Bundle savedInstanceState) {  
    
35.         super.onCreate(savedInstanceState);  
    
36.         setContentView(R.layout.weibo);  
    
37.         InitImageView();  
    
38.         InitTextView();  
    
39.         InitViewPager();  
    
40.     }  
    
41.   
    
42.     private void InitViewPager() {  
    
43.         viewPager=(ViewPager) findViewById(R.id.vPager);  
    
44.         views=new ArrayList<View>();  
    
45.         LayoutInflater inflater=getLayoutInflater();  
    
46.         view1=inflater.inflate(R.layout.lay1, null);  
    
47.         view2=inflater.inflate(R.layout.lay2, null);  
    
48.         view3=inflater.inflate(R.layout.lay3, null);  
    
49.         views.add(view1);  
    
50.         views.add(view2);  
    
51.         views.add(view3);  
    
52.         viewPager.setAdapter(new MyViewPagerAdapter(views));  
    
53.         viewPager.setCurrentItem(0);  
    
54.         viewPager.setOnPageChangeListener(new MyOnPageChangeListener());  
    
55.     }  
    
56.      /**
    
57.       *  初始化头标
    
58.       */  
    
59.   
    
60.     private void InitTextView() {  
    
61.         textView1 = (TextView) findViewById(R.id.text1);  
    
62.         textView2 = (TextView) findViewById(R.id.text2);  
    
63.         textView3 = (TextView) findViewById(R.id.text3);  
    
64.   
    
65.         textView1.setOnClickListener(new MyOnClickListener(0));  
    
66.         textView2.setOnClickListener(new MyOnClickListener(1));  
    
67.         textView3.setOnClickListener(new MyOnClickListener(2));  
    
68.     }  
    
69.   
    
70.     /**
    
71.      2      * 初始化动画，这个就是页卡滑动时，下面的横线也滑动的效果，在这里需要计算一些数据
    
72.      3 */  
    
73.   
    
74.     private void InitImageView() {  
    
75.         imageView= (ImageView) findViewById(R.id.cursor);  
    
76.         bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a).getWidth();// 获取图片宽度   
    
77.         DisplayMetrics dm = new DisplayMetrics();  
    
78.         getWindowManager().getDefaultDisplay().getMetrics(dm);  
    
79.         int screenW = dm.widthPixels;// 获取分辨率宽度   
    
80.         offset = (screenW / 3 - bmpW) / 2;// 计算偏移量   
    
81.         Matrix matrix = new Matrix();  
    
82.         matrix.postTranslate(offset, 0);  
    
83.         imageView.setImageMatrix(matrix);// 设置动画初始位置   
    
84.     }  
    
85. <IMG alt="" src="http://img.my.csdn.net/uploads/201211/10/1352554452_1685.jpg">  
    
86.     /**  
    
87.      *      
    
88.      * 头标点击监听 3 */  
    
89.     private class MyOnClickListener implements OnClickListener{  
    
90.         private int index=0;  
    
91.         public MyOnClickListener(int i){  
    
92.             index=i;  
    
93.         }  
    
94.         public void onClick(View v) {  
    
95.             viewPager.setCurrentItem(index);              
    
96.         }  
    
97.          
    
98.     }  
    
99.       
    
100.     public class MyViewPagerAdapter extends PagerAdapter{  
     
101.         private List<View> mListViews;  
     
102.          
     
103.         public MyViewPagerAdapter(List<View> mListViews) {  
     
104.             this.mListViews = mListViews;  
     
105.         }  
     
106.   
     
107.         @Override  
     
108.         public void destroyItem(ViewGroup container, int position, Object object)   {     
     
109.             container.removeView(mListViews.get(position));  
     
110.         }  
     
111.   
     
112.   
     
113.         @Override  
     
114.         public Object instantiateItem(ViewGroup container, int position) {            
     
115.              container.addView(mListViews.get(position), 0);  
     
116.              return mListViews.get(position);  
     
117.         }  
     
118.   
     
119.         @Override  
     
120.         public int getCount() {           
     
121.             return  mListViews.size();  
     
122.         }  
     
123.          
     
124.         @Override  
     
125.         public boolean isViewFromObject(View arg0, Object arg1) {            
     
126.             return arg0==arg1;  
     
127.         }  
     
128.     }  
     
129.   
     
130.     public class MyOnPageChangeListener implements OnPageChangeListener{  
     
131.   
     
132.         int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量   
     
133.         int two = one * 2;// 页卡1 -> 页卡3 偏移量   
     
134.         public void onPageScrollStateChanged(int arg0) {  
     
135.               
     
136.               
     
137.         }  
     
138.   
     
139.         public void onPageScrolled(int arg0, float arg1, int arg2) {  
     
140.               
     
141.               
     
142.         }  
     
143.   
     
144.         public void onPageSelected(int arg0) {  
     
145.             /*两种方法，这个是一种，下面还有一种，显然这个比较麻烦
     
146.             Animation animation = null;
     
147.             switch (arg0) {
     
148.             case 0:
     
149.                 if (currIndex == 1) {
     
150.                     animation = new TranslateAnimation(one, 0, 0, 0);
     
151.                 } else if (currIndex == 2) {
     
152.                     animation = new TranslateAnimation(two, 0, 0, 0);
     
153.                 }
     
154.                 break;
     
155.             case 1:
     
156.                 if (currIndex == 0) {
     
157.                     animation = new TranslateAnimation(offset, one, 0, 0);
     
158.                 } else if (currIndex == 2) {
     
159.                     animation = new TranslateAnimation(two, one, 0, 0);
     
160.                 }
     
161.                 break;
     
162.             case 2:
     
163.                 if (currIndex == 0) {
     
164.                     animation = new TranslateAnimation(offset, two, 0, 0);
     
165.                 } else if (currIndex == 1) {
     
166.                     animation = new TranslateAnimation(one, two, 0, 0);
     
167.                 }
     
168.                 break;
     
169.                  
     
170.             }
     
171.             */  
     
172.             Animation animation = new TranslateAnimation(one*currIndex, one*arg0, 0, 0);//显然这个比较简洁，只有一行代码。   
     
173.             currIndex = arg0;  
     
174.             animation.setFillAfter(true);// True:图片停在动画结束位置   
     
175.             animation.setDuration(300);  
     
176.             imageView.startAnimation(animation);  
     
177.             Toast.makeText(WeiBoActivity.this, "您选择了"+ viewPager.getCurrentItem()+"页卡", Toast.LENGTH_SHORT).show();  
     
178.         }  
     
179.          
     
180.     }  
     
181. }  

复制代码

布局文件

1. <?xml version="1.0" encoding="utf-8"?>  
   
2. lt;LinearLayout 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.    <LinearLayout  
   
8.        android:id="@+id/linearLayout1"  
   
9.        android:layout_width="fill_parent"  
   
10.        android:layout_height="40.0dip"  
    
11.        android:background="#FFFFFF" >  
    
12.   
    
13.        <TextView  
    
14.            android:id="@+id/text1"  
    
15.            android:layout_width="fill_parent"  
    
16.            android:layout_height="fill_parent"  
    
17.            android:layout_weight="1.0"  
    
18.            android:gravity="center"  
    
19.            android:text=" @我"  
    
20.            android:textColor="#000000"  
    
21.            android:textSize="20.0dip" />  
    
22.   
    
23.        <TextView  
    
24.            android:id="@+id/text2"  
    
25.            android:layout_width="fill_parent"  
    
26.            android:layout_height="fill_parent"  
    
27.            android:layout_weight="1.0"  
    
28.            android:gravity="center"  
    
29.            android:text="评论"  
    
30.            android:textColor="#000000"  
    
31.            android:textSize="20.0dip" />  
    
32.   
    
33.        <TextView  
    
34.            android:id="@+id/text3"  
    
35.            android:layout_width="fill_parent"  
    
36.            android:layout_height="fill_parent"  
    
37.            android:layout_weight="1.0"  
    
38.            android:gravity="center"  
    
39.            android:text="私信"  
    
40.            android:textColor="#000000"  
    
41.            android:textSize="20.0dip" />  
    
42.    </LinearLayout>  
    
43.   
    
44.    <ImageView  
    
45.        android:id="@+id/cursor"  
    
46.        android:layout_width="fill_parent"  
    
47.        android:layout_height="wrap_content"  
    
48.        android:scaleType="matrix"  
    
49.        android:src="@drawable/a" />  
    
50.   
    
51.    <android.support.v4.view.ViewPager  
    
52.        android:id="@+id/vPager"  
    
53.        android:layout_width="wrap_content"  
    
54.        android:layout_height="0dp"  
    
55.        android:layout_gravity="center"  
    
56.        android:layout_weight="1.0"  
    
57.        android:background="#000000"  
    
58.        android:flipInterval="30"  
    
59.        android:persistentDrawingCache="animation" />  
    
60. lt;/LinearLayout>

复制代码

baopbird2005

ViewPager和Fragment的组合使用 实例

支持手指滑动切换页面，也支持点击导航按钮切换页面。
页面布局文件：

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   
2.     xmlns:tools="http://schemas.android.com/tools"  
   
3.     android:layout_width="match_parent"  
   
4.     android:layout_height="match_parent"  
   
5.     tools:context=".MainActivity" >  
   
6.       
   
7.     <!-- 底部四个导航按钮 -->  
   
8.     <LinearLayout   
   
9.         android:id="@+id/ll_tabs"  
   
10.         android:layout_width="match_parent"  
    
11.         android:layout_height="50dp"  
    
12.         android:layout_alignParentBottom="true"  
    
13.         android:orientation="horizontal"  
    
14.         >  
    
15.          
    
16.         <Button   
    
17.             android:id="@+id/btn_one"  
    
18.             android:layout_width="0dp"  
    
19.             android:layout_height="match_parent"  
    
20.             android:layout_weight="1"  
    
21.             android:text="One"  
    
22.             android:background="#009eff"  
    
23.             android:textColor="#fff"  
    
24.             />  
    
25.         <Button   
    
26.             android:id="@+id/btn_two"  
    
27.             android:layout_width="0dp"  
    
28.             android:layout_height="match_parent"  
    
29.             android:layout_weight="1"  
    
30.             android:text="Two"  
    
31.             android:background="#009e00"  
    
32.             android:textColor="#fff"  
    
33.             />  
    
34.         <Button   
    
35.             android:id="@+id/btn_three"  
    
36.             android:layout_width="0dp"  
    
37.             android:layout_height="match_parent"  
    
38.             android:layout_weight="1"  
    
39.             android:text="Three"  
    
40.             android:background="#009eff"  
    
41.             android:textColor="#fff"  
    
42.             />  
    
43.         <Button   
    
44.             android:id="@+id/btn_four"  
    
45.             android:layout_width="0dp"  
    
46.             android:layout_height="match_parent"  
    
47.             android:layout_weight="1"  
    
48.             android:text="Four"  
    
49.             android:background="#009e00"  
    
50.             android:textColor="#fff"  
    
51.             />  
    
52.          
    
53.     </LinearLayout>  
    
54.       
    
55.     <!-- 覆盖在导航按钮上的覆盖层，表示选中项 -->  
    
56.     <ImageView   
    
57.         android:id="@+id/imgv_overtab"  
    
58.         android:layout_width="60dp"  
    
59.         android:layout_height="50dp"  
    
60.         android:background="@drawable/red"  
    
61.         android:layout_alignParentBottom="true"  
    
62.         />  
    
63.       
    
64.     <!-- 导航和视图的分割线 -->  
    
65.     <View   
    
66.         android:layout_width="match_parent"  
    
67.         android:layout_height="2dp"  
    
68.         android:background="#f00"  
    
69.         android:layout_above="@id/ll_tabs"  
    
70.         />  
    
71.       
    
72.     <!--   
    
73.     <RelativeLayout  
    
74.         android:id="@+id/fragment_content_view"  
    
75.         android:layout_width="match_parent"  
    
76.         android:layout_height="match_parent"  
    
77.         android:layout_above="@id/ll_tabs"  
    
78.         android:layout_marginBottom="2dp"  
    
79.         android:background="#fff"  
    
80.         />  
    
81.      -->  
    
82.       
    
83.      <!-- VIewPager 主要是加载内容的 -->  
    
84.      <android.support.v4.view.ViewPager  
    
85.         android:id="@+id/viewpager"  
    
86.         android:layout_above="@id/ll_tabs"  
    
87.         android:layout_marginBottom="2dp"  
    
88.         android:layout_width="match_parent"  
    
89.         android:layout_height="match_parent"/>  
    
90.      
    
91.   
    
92. </RelativeLayout>

复制代码

下面是具体的代码，由于代码比较少，很容易看明白，就不做多的讲述了：

1. package com.example.switchfragment;  
   
2.   
   
3. import java.util.ArrayList;  
   
4. import java.util.List;  
   
5. import android.os.Bundle;  
   
6. import android.support.v4.app.Fragment;  
   
7. import android.support.v4.app.FragmentActivity;  
   
8. import android.support.v4.app.FragmentManager;  
   
9. import android.support.v4.app.FragmentStatePagerAdapter;  
   
10. import android.support.v4.view.ViewPager;  
    
11. import android.view.View;  
    
12. import android.view.ViewGroup;  
    
13. import android.view.View.OnClickListener;  
    
14. import android.view.animation.TranslateAnimation;  
    
15. import android.widget.Button;  
    
16. import android.widget.ImageView;  
    
17. import android.widget.RelativeLayout;  
    
18.   
    
19. public class MainActivity extends FragmentActivity implements OnClickListener{  
    
20.   
    
21.     /**
    
22.      * 四个导航按钮
    
23.      */  
    
24.     Button buttonOne;  
    
25.     Button buttonTwo;  
    
26.     Button buttonThree;  
    
27.     Button buttonFour;  
    
28.       
    
29.     /**
    
30.      * 作为页面容器的ViewPager
    
31.      */  
    
32.     ViewPager mViewPager;  
    
33.     /**
    
34.      * 页面集合
    
35.      */  
    
36.     List<Fragment> fragmentList;  
    
37.       
    
38.     /**
    
39.      * 四个Fragment（页面）
    
40.      */  
    
41.     OneFragment oneFragment;  
    
42.     TwoFragment twoFragment;  
    
43.     ThreeFragment threeFragment;  
    
44.     FourFragment fourFragment;  
    
45.       
    
46.     //覆盖层  
    
47.     ImageView imageviewOvertab;  
    
48.       
    
49.     //屏幕宽度  
    
50.     int screenWidth;  
    
51.     //当前选中的项  
    
52.     int currenttab=-1;  
    
53.       
    
54.     @Override  
    
55.     protected void onCreate(Bundle savedInstanceState) {  
    
56.         super.onCreate(savedInstanceState);  
    
57.         setContentView(R.layout.activity_main);  
    
58.         buttonOne=(Button)findViewById(R.id.btn_one);  
    
59.         buttonTwo=(Button)findViewById(R.id.btn_two);  
    
60.         buttonThree=(Button)findViewById(R.id.btn_three);  
    
61.         buttonFour=(Button)findViewById(R.id.btn_four);  
    
62.          
    
63.         buttonOne.setOnClickListener(this);  
    
64.         buttonTwo.setOnClickListener(this);  
    
65.         buttonThree.setOnClickListener(this);  
    
66.         buttonFour.setOnClickListener(this);  
    
67.          
    
68.         mViewPager=(ViewPager) findViewById(R.id.viewpager);  
    
69.          
    
70.         fragmentList=new ArrayList<Fragment>();  
    
71.         oneFragment=new OneFragment();  
    
72.         twoFragment=new TwoFragment();  
    
73.         threeFragment=new ThreeFragment();  
    
74.         fourFragment=new FourFragment();  
    
75.          
    
76.         fragmentList.add(oneFragment);  
    
77.         fragmentList.add(twoFragment);  
    
78.         fragmentList.add(threeFragment);  
    
79.         fragmentList.add(fourFragment);  
    
80.          
    
81.         screenWidth=getResources().getDisplayMetrics().widthPixels;  
    
82.          
    
83.         buttonTwo.measure(0, 0);  
    
84.         imageviewOvertab=(ImageView) findViewById(R.id.imgv_overtab);  
    
85.         RelativeLayout.LayoutParams imageParams=new RelativeLayout.LayoutParams(screenWidth/4, buttonTwo.getMeasuredHeight());  
    
86.         imageParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);  
    
87.         imageviewOvertab.setLayoutParams(imageParams);  
    
88.          
    
89.         mViewPager.setAdapter(new MyFrageStatePagerAdapter(getSupportFragmentManager()));  
    
90.     }  
    
91.   
    
92.     /**
    
93.      * 定义自己的ViewPager适配器。
    
94.      * 也可以使用FragmentPagerAdapter。关于这两者之间的区别，可以自己去搜一下。
    
95.      */  
    
96.     class MyFrageStatePagerAdapter extends FragmentStatePagerAdapter  
    
97.     {  
    
98.   
    
99.         public MyFrageStatePagerAdapter(FragmentManager fm)   
    
100.         {  
     
101.             super(fm);  
     
102.         }  
     
103.   
     
104.         @Override  
     
105.         public Fragment getItem(int position) {  
     
106.             return fragmentList.get(position);  
     
107.         }  
     
108.   
     
109.         @Override  
     
110.         public int getCount() {  
     
111.             return fragmentList.size();  
     
112.         }  
     
113.          
     
114.         /**
     
115.          * 每次更新完成ViewPager的内容后，调用该接口，此处复写主要是为了让导航按钮上层的覆盖层能够动态的移动
     
116.          */  
     
117.         @Override  
     
118.         public void finishUpdate(ViewGroup container)   
     
119.         {  
     
120.             super.finishUpdate(container);//这句话要放在最前面，否则会报错  
     
121.             //获取当前的视图是位于ViewGroup的第几个位置，用来更新对应的覆盖层所在的位置  
     
122.             int currentItem=mViewPager.getCurrentItem();  
     
123.             if (currentItem==currenttab)  
     
124.             {  
     
125.                 return ;  
     
126.             }  
     
127.             imageMove(mViewPager.getCurrentItem());  
     
128.             currenttab=mViewPager.getCurrentItem();  
     
129.         }  
     
130.          
     
131.     }  
     
132.       
     
133.     /**
     
134.      * 移动覆盖层
     
135.      * @param moveToTab 目标Tab，也就是要移动到的导航选项按钮的位置
     
136.      * 第一个导航按钮对应0，第二个对应1，以此类推
     
137.      */  
     
138.     private void imageMove(int moveToTab)  
     
139.     {  
     
140.         int startPosition=0;  
     
141.         int movetoPosition=0;  
     
142.          
     
143.         startPosition=currenttab*(screenWidth/4);  
     
144.         movetoPosition=moveToTab*(screenWidth/4);  
     
145.         //平移动画  
     
146.         TranslateAnimation translateAnimation=new TranslateAnimation(startPosition,movetoPosition, 0, 0);  
     
147.         translateAnimation.setFillAfter(true);  
     
148.         translateAnimation.setDuration(200);  
     
149.         imageviewOvertab.startAnimation(translateAnimation);  
     
150.     }  
     
151.       
     
152.       
     
153.     @Override  
     
154.     public void onClick(View v)  
     
155.     {  
     
156.         switch (v.getId())  
     
157.         {  
     
158.         case R.id.btn_one:  
     
159.             changeView(0);  
     
160.             break;  
     
161.         case R.id.btn_two:  
     
162.             changeView(1);  
     
163.             break;  
     
164.         case R.id.btn_three:  
     
165.             changeView(2);  
     
166.             break;  
     
167.         case R.id.btn_four:  
     
168.             changeView(3);  
     
169.             break;  
     
170.         default:  
     
171.             break;  
     
172.         }  
     
173.     }  
     
174.     //手动设置ViewPager要显示的视图  
     
175.     private void changeView(int desTab)  
     
176.     {  
     
177.         mViewPager.setCurrentItem(desTab, true);  
     
178.     }  
     
179.   
     
180. }

复制代码

寇婵蕾

来支持了呢