利用viewpager、Fragment、pagertabStrip 实现多页面滑动效果

本文主要介绍如何利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果。即google play首页、新浪微博消息(at、评论、私信、广播)页面的效果。ViewPager+Fragment组合为google推荐方式,比TabActivity+Activity的效率高的多,示例工程即代码见ViewPager Demo。示例APK地址可见TrineaAndroidDemo@GoogleCode。

1、添加android support包
因为上面的几个类都是在android support包中才提供,我们先添加包。
在Eclipse->Window->Android SDK Manager,选择列表中Extras->Android  Support  Library进行安装。下载完后在android-sdk\extras\android\support目录下,这里我们选择v4版本,进入v4目 录,拷贝其中的android-support-v4.jar文件到工程的libs目录(若没有新建)下即可,编译时ADT会自动将其导入项目中。

2、新建ViewPager的layout,内容如下

[html] view plain copy
  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.     <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.         <android.support.v4.view.PagerTabStrip      
  13.             android:layout_width="wrap_content"      
  14.             android:layout_height="wrap_content"      
  15.             android:layout_gravity="top" />  
  16.     android.support.v4.view.ViewPager>  
  17. LinearLayout>  

ViewPager用来管理layout并可以左右滑动显示各个页面数据,PagerTabStrip用来显示页面title,android:layout_gravity="top"表示title在顶部,可设置bottom等。

 

3、新建FragmentActivity页面
FragmentActivity页面含有ViewPager元素,可以用来显示Fragment,定义如下:

[java] view plain copy
  1. FragmentActivity页面   
  2.   
  3. public class ViewPagerDemo extends FragmentActivity {  
  4.   
  5.     /** 页面list **/  
  6.     List fragmentList = new ArrayList();  
  7.     /** 页面title list **/  
  8.     List   titleList    = new ArrayList();  
  9.   
  10.     @Override  
  11.     protected void onCreate(Bundle savedInstanceState) {  
  12.         super.onCreate(savedInstanceState);  
  13.         setContentView(R.layout.view_pager_demo);  
  14.   
  15.         ViewPager vp = (ViewPager)findViewById(R.id.viewPager);  
  16.         fragmentList.add(new ViewPagerFragment1("页面1"));  
  17.         fragmentList.add(new ViewPagerFragment1("页面2"));  
  18.         fragmentList.add(new ViewPagerFragment1("页面3"));  
  19.         titleList.add("title 1 ");  
  20.         titleList.add("title 2 ");  
  21.         titleList.add("title 3 ");  
  22.         vp.setAdapter(new myPagerAdapter(getSupportFragmentManager(), fragmentList, titleList));  
  23.     }  
  24.   
  25.     /** 
  26.      * 定义适配器 
  27.      *  
  28.      * @author [email protected] 2012-11-15 
  29.      */  
  30.     class myPagerAdapter extends FragmentPagerAdapter {  
  31.   
  32.         private List fragmentList;  
  33.         private List   titleList;  
  34.   
  35.         public myPagerAdapter(FragmentManager fm, List fragmentList, List titleList){  
  36.             super(fm);  
  37.             this.fragmentList = fragmentList;  
  38.             this.titleList = titleList;  
  39.         }  
  40.   
  41.         /** 
  42.          * 得到每个页面 
  43.          */  
  44.         @Override  
  45.         public Fragment getItem(int arg0) {  
  46.             return (fragmentList == null || fragmentList.size() == 0) ? null : fragmentList.get(arg0);  
  47.         }  
  48.   
  49.         /** 
  50.          * 每个页面的title 
  51.          */  
  52.         @Override  
  53.         public CharSequence getPageTitle(int position) {  
  54.             return (titleList.size() > position) ? titleList.get(position) : "";  
  55.         }  
  56.   
  57.         /** 
  58.          * 页面的总个数 
  59.          */  
  60.         @Override  
  61.         public int getCount() {  
  62.             return fragmentList == null ? 0 : fragmentList.size();  
  63.         }  
  64.     }  
  65. }  

其中的myPagerAdapter集成自ragmentPagerAdapter,为ViewPager提供数据源。

onCreate函数得到ViewPager实例并设置数据源,getSupportFragmentManager表示得到Fragment管理器。ViewPagerFragment1表示具体的页面,见下面介绍。

 

4、新建Fragment页面
Fragment页面即为左右滑动需要显示的页面,新建类集成Fragment,并重写onCreateView函数即可。onCreateView函数相当于Activity的onCreate函数。如下:


[java] view plain copy
  1. public class ViewPagerFragment1 extends Fragment {  
  2.   
  3.     private String   text;  
  4.     private TextView tv = null;  
  5.   
  6.     public ViewPagerFragment1(String text){  
  7.         super();  
  8.         this.text = text;  
  9.     }  
  10.   
  11.     /** 
  12.      * 覆盖此函数,先通过inflater inflate函数得到view最后返回 
  13.      */  
  14.     @Override  
  15.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  
  16.         View v = inflater.inflate(R.layout.view_pager_fragment_demo1, container, false);  
  17.         tv = (TextView)v.findViewById(R.id.viewPagerText);  
  18.         tv.setText(text);  
  19.         return v;  
  20.     }  
  21. }  

简单效果如下:

利用viewpager、Fragment、pagertabStrip 实现多页面滑动效果_第1张图片

你可能感兴趣的:(adroid-apk,开发)