Android实战简易教程<十八>(ViewPager组件详解)

来源:互联网 发布:mac如何转换音频格式 编辑:程序博客网 时间:2024/06/03 14:59

对于ViewPager组件我们知道:

  1)ViewPager类直接继承了ViewGroup类,所有它是一个容器类,可以在其中添加其他的view类。

  2)ViewPager类需要一个PagerAdapter适配器类给它提供数据。

  3)ViewPager经常和Fragment一起使用,并且提供了专门的FragmentPagerAdapter和FragmentStatePagerAdapter类供Fragment中的ViewPager使用。

下面我们通过实例看一下ViewPager的使用。

一 实现ViewPager(数据源为List<View>)

1.先在main.xml文件中添加一个ViewPager:

[html] view plaincopy
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="match_parent"  
  3.     android:layout_height="match_parent" >  
  4.   
  5.     <android.support.v4.view.ViewPager  
  6.         android:id="@+id/pager"  
  7.        android:layout_width="wrap_content"  
  8.        android:layout_height="wrap_content">  
  9.     </android.support.v4.view.ViewPager>  
  10.   
  11. </LinearLayout>  
2.创建三个View:

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <TextView  
  8.         android:id="@+id/txt1"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:layout_gravity="center"  
  12.         android:textSize="25dp"  
  13.         android:text="第一页" >  
  14.     </TextView>  
  15.   
  16. </LinearLayout>  
[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.   
  7.     <TextView  
  8.         android:id="@+id/txt2"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="wrap_content"  
  11.         android:text="第二页" >  
  12.     </TextView>  
  13.       
  14. </LinearLayout>  

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <TextView
        android:id="@+id/txt3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第三页" >
    </TextView>
    
</LinearLayout>
3.创建一个ViewPager适配器类:

[java] view plaincopy
  1. package com.yayun.viewpagerdemo;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.support.v4.view.PagerAdapter;  
  7. import android.view.View;  
  8. import android.view.ViewGroup;  
  9.   
  10. public class ViewPagerAdapter extends PagerAdapter {  
  11.     private List<View> lViews=new ArrayList<View>();  
  12.       
  13.     public ViewPagerAdapter(List<View> lViews){  
  14.         this.lViews=lViews;  
  15.     }  
  16.   
  17.     @Override  
  18.     public int getCount() {  
  19.         return lViews.size();  
  20.     }  
  21.   
  22.     @Override  
  23.     public boolean isViewFromObject(View arg0, Object arg1) {  
  24.         return arg0==arg1;  
  25.     }  
  26.     @Override  
  27.     public Object instantiateItem(ViewGroup container, int position) {  
  28.         container.addView(lViews.get(position));  
  29.         return lViews.get(position);  
  30.     }  
  31.     @Override  
  32.     public void destroyItem(ViewGroup container, int position, Object object) {  
  33.         container.removeView(lViews.get(position));  
  34.     }  
  35.   
  36. }  
4.MainActivity.java:

[java] view plaincopy
  1. package com.yayun.viewpagerdemo;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.support.v7.app.ActionBarActivity;  
  7. import android.support.v7.app.ActionBar;  
  8. import android.support.v4.app.Fragment;  
  9. import android.support.v4.view.PagerAdapter;  
  10. import android.support.v4.view.ViewPager;  
  11. import android.os.Bundle;  
  12. import android.view.LayoutInflater;  
  13. import android.view.Menu;  
  14. import android.view.MenuItem;  
  15. import android.view.View;  
  16. import android.view.ViewGroup;  
  17. import android.view.Window;  
  18. import android.os.Build;  
  19.   
  20. public class MainActivity extends ActionBarActivity {  
  21.     private ViewPager viewPager;  
  22.     private List<View> listViews=null;  
  23.     ViewPagerAdapter pagerAdapter;  
  24.   
  25.     @Override  
  26.     protected void onCreate(Bundle savedInstanceState) {  
  27.         super.onCreate(savedInstanceState);  
  28.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  29.         setContentView(R.layout.activity_main);  
  30.           
  31.         viewPager=(ViewPager) findViewById(R.id.pager);  
  32.         listViews=new ArrayList<View>();  
  33.         /** 
  34.          * 为Adapter创建数据源 
  35.          */  
  36.         View view1=View.inflate(this, R.layout.view1, null);  
  37.         View view2=View.inflate(this, R.layout.view2, null);  
  38.         View view3=View.inflate(this, R.layout.view3, null);  
  39.         listViews.add(view1);  
  40.         listViews.add(view2);  
  41.         listViews.add(view3);  
  42.         pagerAdapter=new ViewPagerAdapter(listViews) ;  
  43.         viewPager.setAdapter(pagerAdapter);  
  44.   
  45.     }  
  46.   
  47. }  

5.运行实例:



可以实现翻页效果。

二 添加标题

1.我们需要更改main.xml文件:
[html] view plaincopy
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     android:layout_width="match_parent"  
  3.     android:layout_height="match_parent" >  
  4.   
  5.     <android.support.v4.view.ViewPager  
  6.         android:id="@+id/pager"  
  7.         android:layout_width="wrap_content"  
  8.         android:layout_height="wrap_content"  
  9.         android:layout_gravity="center" >  
  10.   
  11.         <android.support.v4.view.PagerTabStrip  
  12.             android:id="@+id/strip"  
  13.             android:layout_width="wrap_content"  
  14.             android:layout_height="wrap_content"  
  15.             android:layout_gravity="top" >  
  16.         </android.support.v4.view.PagerTabStrip>  
  17.     </android.support.v4.view.ViewPager>  
  18.   
  19. </LinearLayout>  

2.需要更改适配器文件:
[java] view plaincopy
  1. package com.yayun.viewpagerdemo;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.support.v4.view.PagerAdapter;  
  7. import android.view.View;  
  8. import android.view.ViewGroup;  
  9.   
  10. public class ViewPagerAdapter extends PagerAdapter {  
  11.     private List<View> lViews=new ArrayList<View>();  
  12.     private List<String> titleList=new ArrayList<String>();  
  13.       
  14.     public ViewPagerAdapter(List<View> lViews,List<String> titleList){  
  15.         this.lViews=lViews;  
  16.         this.titleList=titleList;  
  17.     }  
  18.   
  19.     @Override  
  20.     public int getCount() {  
  21.         return lViews.size();  
  22.     }  
  23.   
  24.     @Override  
  25.     public boolean isViewFromObject(View arg0, Object arg1) {  
  26.         return arg0==arg1;  
  27.     }  
  28.     @Override  
  29.     public Object instantiateItem(ViewGroup container, int position) {  
  30.         container.addView(lViews.get(position));  
  31.         return lViews.get(position);  
  32.     }  
  33.     @Override  
  34.     public void destroyItem(ViewGroup container, int position, Object object) {  
  35.         container.removeView(lViews.get(position));  
  36.     }  
  37.     /** 
  38.      * 标题 
  39.      */  
  40.     @Override  
  41.     public CharSequence getPageTitle(int position) {  
  42.         // TODO Auto-generated method stub  
  43.         return titleList.get(position);  
  44.     }  
  45.   
  46. }  
3.需要更改MainActivity.java文件:
[java] view plaincopy
  1. package com.yayun.viewpagerdemo;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.support.v7.app.ActionBarActivity;  
  7. import android.support.v7.app.ActionBar;  
  8. import android.support.v4.app.Fragment;  
  9. import android.support.v4.view.PagerAdapter;  
  10. import android.support.v4.view.PagerTabStrip;  
  11. import android.support.v4.view.ViewPager;  
  12. import android.os.Bundle;  
  13. import android.view.LayoutInflater;  
  14. import android.view.Menu;  
  15. import android.view.MenuItem;  
  16. import android.view.View;  
  17. import android.view.ViewGroup;  
  18. import android.view.Window;  
  19. import android.os.Build;  
  20.   
  21. public class MainActivity extends ActionBarActivity {  
  22.     private ViewPager viewPager;  
  23.     private List<View> listViews=null;  
  24.     ViewPagerAdapter pagerAdapter;  
  25.     PagerTabStrip pagerTabStrip;  
  26.     private List<String> titleList;  
  27.   
  28.     @Override  
  29.     protected void onCreate(Bundle savedInstanceState) {  
  30.         super.onCreate(savedInstanceState);  
  31.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  32.         setContentView(R.layout.activity_main);  
  33.           
  34.         viewPager=(ViewPager) findViewById(R.id.pager);  
  35.         pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);  
  36.         listViews=new ArrayList<View>();  
  37.         titleList=new ArrayList<String>();  
  38.         titleList.add("第一页");  
  39.         titleList.add("第二页");  
  40.         titleList.add("第三页");  
  41.         /** 
  42.          * 为Adapter创建数据源 
  43.          */  
  44.         View view1=View.inflate(this, R.layout.view1, null);  
  45.         View view2=View.inflate(this, R.layout.view2, null);  
  46.         View view3=View.inflate(this, R.layout.view3, null);  
  47.         listViews.add(view1);  
  48.         listViews.add(view2);  
  49.         listViews.add(view3);  
  50.         pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;  
  51.         viewPager.setAdapter(pagerAdapter);  
  52.   
  53.     }  
  54.   
  55. }  

4.运行实例如下:

三 实现ViewPager(数据源为List<Fragment>)

1.首先我们要创建三个Fragment:
[html] view plaincopy
  1. package com.yayun.viewpagerdemo;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8.   
  9. public class Fragment1 extends Fragment {  
  10.     @Override  
  11.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  12.             Bundle savedInstanceState) {  
  13.         return inflater.inflate(R.layout.view1, container, false);  
  14.     }  
  15.   
  16. }  
[java] view plaincopy
  1. package com.yayun.viewpagerdemo;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8.   
  9. public class Fragment2 extends Fragment {  
  10.     @Override  
  11.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  12.             Bundle savedInstanceState) {  
  13.         return inflater.inflate(R.layout.view2, container, false);  
  14.     }  
  15.   
  16. }  

[java] view plaincopy
  1. package com.yayun.viewpagerdemo;  
  2.   
  3. import android.os.Bundle;  
  4. import android.support.v4.app.Fragment;  
  5. import android.view.LayoutInflater;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8.   
  9. public class Fragment3 extends Fragment {  
  10.     @Override  
  11.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  12.             Bundle savedInstanceState) {  
  13.         return inflater.inflate(R.layout.view3, container, false);  
  14.     }  
  15.   
  16. }  

2.设置Adapter:
[java] view plaincopy
  1. package com.yayun.viewpagerdemo;  
  2.   
  3. import java.util.List;  
  4.   
  5. import android.support.v4.app.Fragment;  
  6. import android.support.v4.app.FragmentManager;  
  7. import android.support.v4.app.FragmentPagerAdapter;  
  8.   
  9. public class MyFragmentPagerAdapter extends FragmentPagerAdapter {  
  10.     List<Fragment> fragmentsList;  
  11.     List<String> titleList;  
  12.   
  13.     public MyFragmentPagerAdapter(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) {  
  14.         super(fm);  
  15.         this.fragmentsList=fragmentsList;  
  16.         this.titleList=titleList;  
  17.     }  
  18.   
  19.     @Override  
  20.     public Fragment getItem(int arg0) {  
  21.         // TODO Auto-generated method stub  
  22.         return fragmentsList.get(arg0);  
  23.     }  
  24.   
  25.     @Override  
  26.     public int getCount() {  
  27.         // TODO Auto-generated method stub  
  28.         return fragmentsList.size();  
  29.     }  
  30. @Override  
  31. /** 
  32.  * 添加标题 
  33.  */  
  34. public CharSequence getPageTitle(int position) {  
  35.     // TODO Auto-generated method stub  
  36.     return titleList.get(position);  
  37. }  
  38.   
  39. }  

3.MainActivity.java:
[java] view plaincopy
  1. package com.yayun.viewpagerdemo;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.graphics.Color;  
  7. import android.os.Bundle;  
  8. import android.support.v4.app.Fragment;  
  9. import android.support.v4.view.PagerTabStrip;  
  10. import android.support.v4.view.ViewPager;  
  11. import android.support.v4.view.ViewPager.PageTransformer;  
  12. import android.support.v7.app.ActionBarActivity;  
  13. import android.view.View;  
  14. import android.view.Window;  
  15.   
  16. public class MainActivity extends ActionBarActivity {  
  17.     private ViewPager viewPager;  
  18.     private List<View> listViews=null;  
  19.     ViewPagerAdapter pagerAdapter;  
  20.     PagerTabStrip pagerTabStrip;  
  21.     private List<String> titleList;  
  22.     private List<Fragment> fragmentsList;  
  23.     MyFragmentPagerAdapter myFragmentPagerAdapter;  
  24.   
  25.     @Override  
  26.     protected void onCreate(Bundle savedInstanceState) {  
  27.         super.onCreate(savedInstanceState);  
  28.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  29.         setContentView(R.layout.activity_main);  
  30.           
  31.         viewPager=(ViewPager) findViewById(R.id.pager);  
  32.         pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);  
  33.           
  34.         /** 
  35.          * 设置PagerTabStrip属性 
  36.          */  
  37.         pagerTabStrip.setBackgroundColor(Color.GREEN);  
  38.         pagerTabStrip.setDrawFullUnderline(false);  
  39.         pagerTabStrip.setTextColor(Color.WHITE);  
  40.         listViews=new ArrayList<View>();  
  41.         titleList=new ArrayList<String>();  
  42.         fragmentsList=new ArrayList<Fragment>();  
  43.         fragmentsList.add(new Fragment1());  
  44.         fragmentsList.add(new Fragment2());  
  45.         fragmentsList.add(new Fragment3());  
  46.         titleList.add("第一页");  
  47.         titleList.add("第二页");  
  48.         titleList.add("第三页");  
  49.         /** 
  50.          * 为Adapter创建数据源 
  51.          */  
  52.         View view1=View.inflate(this, R.layout.view1, null);  
  53.         View view2=View.inflate(this, R.layout.view2, null);  
  54.         View view3=View.inflate(this, R.layout.view3, null);  
  55.         listViews.add(view1);  
  56.         listViews.add(view2);  
  57.         listViews.add(view3);  
  58.         pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;  
  59.         myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList);  
  60.         //viewPager.setAdapter(pagerAdapter);  
  61.         viewPager.setAdapter(myFragmentPagerAdapter);  
  62.   
  63.     }  
  64.   
  65. }  


4.运行实例:


这种方法不会销毁不在当前页面的页面,不能实现页卡的创建和销毁。

四 实现ViewPager(数据源为List<Fragment>实现FargmentStatePagerAdapter)常用

改变Adapter:
[java] view plaincopy
  1. package com.yayun.viewpagerdemo;  
  2.   
  3. import java.util.List;  
  4.   
  5. import android.support.v4.app.Fragment;  
  6. import android.support.v4.app.FragmentManager;  
  7. import android.support.v4.app.FragmentPagerAdapter;  
  8. import android.support.v4.app.FragmentStatePagerAdapter;  
  9. import android.view.View;  
  10.   
  11. public class MyFragmentPagerAdapter2 extends FragmentStatePagerAdapter {  
  12.     List<Fragment> fragmentsList;  
  13.     List<String> titleList;  
  14.   
  15.     public MyFragmentPagerAdapter2(FragmentManager fm,List<Fragment> fragmentsList,List<String> titleList) {  
  16.         super(fm);  
  17.         this.fragmentsList=fragmentsList;  
  18.         this.titleList=titleList;  
  19.     }  
  20.   
  21.     @Override  
  22.     public Fragment getItem(int arg0) {  
  23.         // TODO Auto-generated method stub  
  24.         return fragmentsList.get(arg0);  
  25.     }  
  26.   
  27.     @Override  
  28.     public int getCount() {  
  29.         // TODO Auto-generated method stub  
  30.         return fragmentsList.size();  
  31.     }  
  32. @Override  
  33. /** 
  34.  * 添加标题 
  35.  */  
  36. public CharSequence getPageTitle(int position) {  
  37.     // TODO Auto-generated method stub  
  38.     return titleList.get(position);  
  39. }  
  40. @Override  
  41. public Object instantiateItem(View container, int position) {  
  42.     // TODO Auto-generated method stub  
  43.     return super.instantiateItem(container, position);  
  44. }  
  45. @Override  
  46. public void destroyItem(View container, int position, Object object) {  
  47.     // TODO Auto-generated method stub  
  48.     super.destroyItem(container, position, object);  
  49. }  
  50.   
  51. }  
将MainActivity.java中的Adapter换一下即可,它可以实现页卡的创建和销毁。

五  onPagerChangeListener 监听使用

只需要修改MainActivity.java:
[java] view plaincopy
  1. package com.yayun.viewpagerdemo;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import android.graphics.Color;  
  7. import android.os.Bundle;  
  8. import android.support.v4.app.Fragment;  
  9. import android.support.v4.view.PagerTabStrip;  
  10. import android.support.v4.view.ViewPager;  
  11. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  12. import android.support.v4.view.ViewPager.PageTransformer;  
  13. import android.support.v7.app.ActionBarActivity;  
  14. import android.view.View;  
  15. import android.view.Window;  
  16. import android.widget.Toast;  
  17.   
  18. public class MainActivity extends ActionBarActivity implements OnPageChangeListener {  
  19.     private ViewPager viewPager;  
  20.     private List<View> listViews=null;  
  21.     ViewPagerAdapter pagerAdapter;  
  22.     PagerTabStrip pagerTabStrip;  
  23.     private List<String> titleList;  
  24.     private List<Fragment> fragmentsList;  
  25.     MyFragmentPagerAdapter myFragmentPagerAdapter;  
  26.   
  27.     @Override  
  28.     protected void onCreate(Bundle savedInstanceState) {  
  29.         super.onCreate(savedInstanceState);  
  30.         requestWindowFeature(Window.FEATURE_NO_TITLE);  
  31.         setContentView(R.layout.activity_main);  
  32.           
  33.         viewPager=(ViewPager) findViewById(R.id.pager);  
  34.         pagerTabStrip=(PagerTabStrip) findViewById(R.id.strip);  
  35.           
  36.         /** 
  37.          * 设置PagerTabStrip属性 
  38.          */  
  39.         pagerTabStrip.setBackgroundColor(Color.GREEN);  
  40.         pagerTabStrip.setDrawFullUnderline(false);  
  41.         pagerTabStrip.setTextColor(Color.WHITE);  
  42.         listViews=new ArrayList<View>();  
  43.         titleList=new ArrayList<String>();  
  44.         fragmentsList=new ArrayList<Fragment>();  
  45.         fragmentsList.add(new Fragment1());  
  46.         fragmentsList.add(new Fragment2());  
  47.         fragmentsList.add(new Fragment3());  
  48.         titleList.add("第一页");  
  49.         titleList.add("第二页");  
  50.         titleList.add("第三页");  
  51.         /** 
  52.          * 为Adapter创建数据源 
  53.          */  
  54.         View view1=View.inflate(this, R.layout.view1, null);  
  55.         View view2=View.inflate(this, R.layout.view2, null);  
  56.         View view3=View.inflate(this, R.layout.view3, null);  
  57.         listViews.add(view1);  
  58.         listViews.add(view2);  
  59.         listViews.add(view3);  
  60.         pagerAdapter=new ViewPagerAdapter(listViews,titleList) ;  
  61.         myFragmentPagerAdapter=new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList, titleList);  
  62.         //viewPager.setAdapter(pagerAdapter);  
  63.         viewPager.setAdapter(myFragmentPagerAdapter);  
  64.         viewPager.setOnPageChangeListener(this);//加载监听器  
  65.   
  66.     }  
  67.   
  68.     @Override  
  69.     public void onPageScrollStateChanged(int arg0) {  
  70.         // TODO Auto-generated method stub  
  71.           
  72.     }  
  73.   
  74.     @Override  
  75.     public void onPageScrolled(int arg0, float arg1, int arg2) {  
  76.         // TODO Auto-generated method stub  
  77.           
  78.     }  
  79.   
  80.     @Override  
  81.     public void onPageSelected(int arg0) {  
  82.         Toast.makeText(this"当前页面为"+(arg0+1), Toast.LENGTH_SHORT).show();  
  83.           
  84.     }  
  85.   
  86. }  

运行实例即可以显示当前页面标签。

总结

1.android.support.v4.view.ViewPager全名;
2.android.support.v4.view.PagerTabStrip作为标题名称

0 0
原创粉丝点击