利用ViewPager实现可左右滑动的Action Tab

标签: ViewPagerViewPager滑动
399人阅读 评论(0) 收藏 举报
分类:


1. ViewPager要点:

  • ViewPager 是一个布局管理类(layout manager),用于提供页面的左右滑动功能,类似于ListView,也有为ViewPager提供     数据(Fragment)的 adapter 控制类(FragmentPagerAdapter, FragmentStatePagerAdapter)。
  • ViewPager 经常和 Fragment 一起使用,结合ActionBar 的 Tab,实现 tab 页面的左右滑动。
  • ViewPager 属于 android sdk 扩展包,若要使用 ViewPager,需要外部导入扩展包:android-support-v4.jar

2. 实现功能:

本例实现的功能效果如下图所示:
    实现 tab 页的左右滑动的好处是,由于我们经常习惯单手操作手机,而单手切换 tab 页是非常困难的,而 tab 页面的左右滑动     功能正好可以解决这个问题,提供更加方便的交互。




3. 原理说明:

整个应用可以分为如图所示的几个模块:


  • 主界面Activity 主要由一个 ViewPager 组成,里面装载了三个 Fragment 页面,进行左右滑动;
  • 主界面Activity 的ActionBar 中创建三个 Tab 按键(Tab Button);
  • ActionBar 与 ViewPager 之间的交互关系如下:ViewPager 带动其装载的三个 Fragment 左右切换的同时,控制其相对应的Action Tab Button 的左右切换;反过来,当用户手动切换三个 Tab Button 时,控制 ViewPager 中相对应的 Fragment 的切换。

4. 具体步骤:

4.1 新建工程并导入android-support-v4.jar扩展包:

  • 新建一个名为ActionTabWithSlippingFragment。
  • 导入android-support-v4.jar扩展包:网上很多导入方法都表示要通过 “Project - Properties - Java Build Path - Add External JARs” 进行导入,这样可以保证编译通过,但是运行的时候会出错!这里我用的导入方法如下:
  • 首先在工程目录下新建一个文件夹 libs,然后从 "android sdk目录\extras\android\compatibility\v4" 下将 android-support-v4.jar 手动拷贝到新建的 libs 目录下,最后右击工程选择 “Refresh” 刷新即可,这时可以看到 libs 目录和 Android Dependencies 目录下均有 android-support-v4.jar 出现,这就表示导入成功了!如下图所示:




4.2 创建三个 Fragment 类作为可滑动的 Tab 页(view),并由 ViewPager来管理(manager):

  • 创建三个 Fragement 类:Fragment1.java,Fragment2.java,Fragment3.java,同时为其各自创建布局视图文件:fragment1.xml,fragment2.xml,fragment3.xml,分别设置红(R)、绿(G)、蓝(B)背景。
  • Fragment1.java创建如下,关键实现其 onCreateView 方法,设置其布局:
  • [java] view plaincopy
    1. public class Fragment1 extends Fragment {  
    2.   
    3.     @Override  
    4.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  
    5.         return inflateAndSetupView(inflater, container, savedInstanceState, R.layout.fragment1);      
    6.     }  
    7.       
    8.     private View inflateAndSetupView(LayoutInflater inflater, ViewGroup container,   
    9.             Bundle savedInstanceState, int layoutResourceId) {  
    10.         View layout = inflater.inflate(layoutResourceId, container, false);  
    11.           
    12.         return layout;  
    13.     }   
    14. }  


  • fragment1.xml 主要定义一个带有红色背景的的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.     android:background="#FF0000" >  
    7.       
    8.     <TextView  
    9.         android:layout_width="match_parent"  
    10.         android:layout_height="match_parent"  
    11.         android:layout_gravity="center"  
    12.         android:gravity="center"  
    13.         android:text="@string/frag_1"  
    14.         android:textSize="30dp"  
    15.         android:textStyle="bold"  
    16.         android:textColor="#FFFFFF" />  
    17.   
    18. </LinearLayout>  


4.3 创建主界面 Activity:ActionTabWithSlippingFragmentActivity,及其对应的布局文件:main.xml:

  • 设置 ActionBar 的样式,如:无回退按键、无标题等——setUpActionBar()
  • 初始化并设置 ViewPager,两个要点:首先要定义并设置 ViewPager 所需要的数据控制类 ViewPagerAdapter,ViewPagerAdapter 必须实现如何返回对应位置的 Fragment、页数、页标题;其次,要实现 ViewPager 的翻页监听接口(OnPageChangeListener),主要是实现当前页面被切换时需要导航到对应位置的action tab button,必要的时候,还需要实现在页面翻动的各个状态下(正在翻动、翻动即将停止、翻动完全停止)的相应处理——setUpViewPager()
  • 然后需要创建三个 tab button,并实现 tab 的监听接口:主要是当选择相应 tab 时,如何切换 ViewPager 的相应页面——setUpTabs()
  • ActionTabWithSlippingFragmentActivity.java 的实现部分 
  • [java] view plaincopy
    1. public class ActionTabWithSlippingFragmentActivity extends FragmentActivity   
    2.                 implements ActionBar.TabListener{  
    3.       
    4.     private Fragment1 mFragment1 = new Fragment1();  
    5.     private Fragment2 mFragment2 = new Fragment2();  
    6.     private Fragment3 mFragment3 = new Fragment3();  
    7.       
    8.     private static final int TAB_INDEX_COUNT = 3;  
    9.       
    10.     private static final int TAB_INDEX_ONE = 0;  
    11.     private static final int TAB_INDEX_TWO = 1;  
    12.     private static final int TAB_INDEX_THREE = 2;  
    13.       
    14.     private ViewPager mViewPager;  
    15.     private ViewPagerAdapter mViewPagerAdapter;  
    16.       
    17.     /** Called when the activity is first created. */  
    18.     @Override  
    19.     public void onCreate(Bundle savedInstanceState) {  
    20.         super.onCreate(savedInstanceState);  
    21.         setContentView(R.layout.main);  
    22.           
    23.         setUpActionBar();  
    24.         setUpViewPager();  
    25.         setUpTabs();  
    26.     }  
    27.       
    28.     private void setUpActionBar() {  
    29.         final ActionBar actionBar = getActionBar();  
    30.         actionBar.setHomeButtonEnabled(false);  
    31.         actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);  
    32.         actionBar.setDisplayShowTitleEnabled(false);  
    33.         actionBar.setDisplayShowHomeEnabled(false);  
    34.     }  
    35.       
    36.     private void setUpViewPager() {  
    37.         mViewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());  
    38.           
    39.         mViewPager = (ViewPager)findViewById(R.id.pager);  
    40.         mViewPager.setAdapter(mViewPagerAdapter);  
    41.         mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {  
    42.             @Override  
    43.             public void onPageSelected(int position) {  
    44.                 final ActionBar actionBar = getActionBar();  
    45.                 actionBar.setSelectedNavigationItem(position);  
    46.             }  
    47.               
    48.             @Override  
    49.             public void onPageScrollStateChanged(int state) {  
    50.                 switch(state) {  
    51.                     case ViewPager.SCROLL_STATE_IDLE:  
    52.                         //TODO  
    53.                         break;  
    54.                     case ViewPager.SCROLL_STATE_DRAGGING:  
    55.                         //TODO  
    56.                         break;  
    57.                     case ViewPager.SCROLL_STATE_SETTLING:  
    58.                         //TODO  
    59.                         break;  
    60.                     default:  
    61.                         //TODO  
    62.                         break;  
    63.                 }  
    64.             }  
    65.         });  
    66.     }  
    67.       
    68.     private void setUpTabs() {  
    69.         final ActionBar actionBar = getActionBar();  
    70.         for (int i = 0; i < mViewPagerAdapter.getCount(); ++i) {  
    71.             actionBar.addTab(actionBar.newTab()  
    72.                     .setText(mViewPagerAdapter.getPageTitle(i))  
    73.                     .setTabListener(this));  
    74.         }  
    75.     }  
    76.       
    77.     @Override  
    78.     protected void onDestroy() {  
    79.         super.onDestroy();  
    80.     }  
    81.       
    82.     public class ViewPagerAdapter extends FragmentPagerAdapter {  
    83.   
    84.         public ViewPagerAdapter(FragmentManager fm) {  
    85.             super(fm);  
    86.             // TODO Auto-generated constructor stub  
    87.         }  
    88.   
    89.         @Override  
    90.         public Fragment getItem(int position) {  
    91.             // TODO Auto-generated method stub  
    92.             switch (position) {  
    93.                 case TAB_INDEX_ONE:  
    94.                     return mFragment1;  
    95.                 case TAB_INDEX_TWO:  
    96.                     return mFragment2;  
    97.                 case TAB_INDEX_THREE:  
    98.                     return mFragment3;  
    99.             }  
    100.             throw new IllegalStateException("No fragment at position " + position);  
    101.         }  
    102.   
    103.         @Override  
    104.         public int getCount() {  
    105.             // TODO Auto-generated method stub  
    106.             return TAB_INDEX_COUNT;  
    107.         }  
    108.           
    109.         @Override  
    110.         public CharSequence getPageTitle(int position) {  
    111.             String tabLabel = null;  
    112.             switch (position) {  
    113.                 case TAB_INDEX_ONE:  
    114.                     tabLabel = getString(R.string.tab_1);  
    115.                     break;  
    116.                 case TAB_INDEX_TWO:  
    117.                     tabLabel = getString(R.string.tab_2);  
    118.                     break;  
    119.                 case TAB_INDEX_THREE:  
    120.                     tabLabel = getString(R.string.tab_3);  
    121.                     break;  
    122.             }  
    123.             return tabLabel;  
    124.         }  
    125.     }  
    126.   
    127.     @Override  
    128.     public void onTabReselected(Tab tab, FragmentTransaction ft) {  
    129.         // TODO Auto-generated method stub  
    130.           
    131.     }  
    132.   
    133.     @Override  
    134.     public void onTabSelected(Tab tab, FragmentTransaction ft) {  
    135.         // TODO Auto-generated method stub  
    136.         mViewPager.setCurrentItem(tab.getPosition());  
    137.     }  
    138.   
    139.     @Override  
    140.     public void onTabUnselected(Tab tab, FragmentTransaction ft) {  
    141.         // TODO Auto-generated method stub  
    142.           
    143.     }  
    144. }  

     
  • main.xml 的实现部分:
  • [html] view plaincopy
    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.       
    6.     <android.support.v4.view.ViewPager  
    7.         android:id="@+id/pager"  
    8.         android:layout_width="match_parent"  
    9.         android:layout_height="match_parent" >  
    10.     </android.support.v4.view.ViewPager>  
    11. </RelativeLayout>  



4.4 结束语:

1. ViewPager要点:

  • ViewPager 是一个布局管理类(layout manager),用于提供页面的左右滑动功能,类似于ListView,也有为ViewPager提供     数据(Fragment)的 adapter 控制类(FragmentPagerAdapter, FragmentStatePagerAdapter)。
  • ViewPager 经常和 Fragment 一起使用,结合ActionBar 的 Tab,实现 tab 页面的左右滑动。
  • ViewPager 属于 android sdk 扩展包,若要使用 ViewPager,需要外部导入扩展包:android-support-v4.jar

2. 实现功能:

本例实现的功能效果如下图所示:
    实现 tab 页的左右滑动的好处是,由于我们经常习惯单手操作手机,而单手切换 tab 页是非常困难的,而 tab 页面的左右滑动     功能正好可以解决这个问题,提供更加方便的交互。




3. 原理说明:

整个应用可以分为如图所示的几个模块:


  • 主界面Activity 主要由一个 ViewPager 组成,里面装载了三个 Fragment 页面,进行左右滑动;
  • 主界面Activity 的ActionBar 中创建三个 Tab 按键(Tab Button);
  • ActionBar 与 ViewPager 之间的交互关系如下:ViewPager 带动其装载的三个 Fragment 左右切换的同时,控制其相对应的Action Tab Button 的左右切换;反过来,当用户手动切换三个 Tab Button 时,控制 ViewPager 中相对应的 Fragment 的切换。

4. 具体步骤:

4.1 新建工程并导入android-support-v4.jar扩展包:

  • 新建一个名为ActionTabWithSlippingFragment。
  • 导入android-support-v4.jar扩展包:网上很多导入方法都表示要通过 “Project - Properties - Java Build Path - Add External JARs” 进行导入,这样可以保证编译通过,但是运行的时候会出错!这里我用的导入方法如下:
  • 首先在工程目录下新建一个文件夹 libs,然后从 "android sdk目录\extras\android\compatibility\v4" 下将 android-support-v4.jar 手动拷贝到新建的 libs 目录下,最后右击工程选择 “Refresh” 刷新即可,这时可以看到 libs 目录和 Android Dependencies 目录下均有 android-support-v4.jar 出现,这就表示导入成功了!如下图所示:




4.2 创建三个 Fragment 类作为可滑动的 Tab 页(view),并由 ViewPager来管理(manager):

  • 创建三个 Fragement 类:Fragment1.java,Fragment2.java,Fragment3.java,同时为其各自创建布局视图文件:fragment1.xml,fragment2.xml,fragment3.xml,分别设置红(R)、绿(G)、蓝(B)背景。
  • Fragment1.java创建如下,关键实现其 onCreateView 方法,设置其布局:
  • [java] view plaincopy
    1. public class Fragment1 extends Fragment {  
    2.   
    3.     @Override  
    4.     public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {  
    5.         return inflateAndSetupView(inflater, container, savedInstanceState, R.layout.fragment1);      
    6.     }  
    7.       
    8.     private View inflateAndSetupView(LayoutInflater inflater, ViewGroup container,   
    9.             Bundle savedInstanceState, int layoutResourceId) {  
    10.         View layout = inflater.inflate(layoutResourceId, container, false);  
    11.           
    12.         return layout;  
    13.     }   
    14. }  


  • fragment1.xml 主要定义一个带有红色背景的的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.     android:background="#FF0000" >  
    7.       
    8.     <TextView  
    9.         android:layout_width="match_parent"  
    10.         android:layout_height="match_parent"  
    11.         android:layout_gravity="center"  
    12.         android:gravity="center"  
    13.         android:text="@string/frag_1"  
    14.         android:textSize="30dp"  
    15.         android:textStyle="bold"  
    16.         android:textColor="#FFFFFF" />  
    17.   
    18. </LinearLayout>  


4.3 创建主界面 Activity:ActionTabWithSlippingFragmentActivity,及其对应的布局文件:main.xml:

  • 设置 ActionBar 的样式,如:无回退按键、无标题等——setUpActionBar()
  • 初始化并设置 ViewPager,两个要点:首先要定义并设置 ViewPager 所需要的数据控制类 ViewPagerAdapter,ViewPagerAdapter 必须实现如何返回对应位置的 Fragment、页数、页标题;其次,要实现 ViewPager 的翻页监听接口(OnPageChangeListener),主要是实现当前页面被切换时需要导航到对应位置的action tab button,必要的时候,还需要实现在页面翻动的各个状态下(正在翻动、翻动即将停止、翻动完全停止)的相应处理——setUpViewPager()
  • 然后需要创建三个 tab button,并实现 tab 的监听接口:主要是当选择相应 tab 时,如何切换 ViewPager 的相应页面——setUpTabs()
  • ActionTabWithSlippingFragmentActivity.java 的实现部分 
  • [java] view plaincopy
    1. public class ActionTabWithSlippingFragmentActivity extends FragmentActivity   
    2.                 implements ActionBar.TabListener{  
    3.       
    4.     private Fragment1 mFragment1 = new Fragment1();  
    5.     private Fragment2 mFragment2 = new Fragment2();  
    6.     private Fragment3 mFragment3 = new Fragment3();  
    7.       
    8.     private static final int TAB_INDEX_COUNT = 3;  
    9.       
    10.     private static final int TAB_INDEX_ONE = 0;  
    11.     private static final int TAB_INDEX_TWO = 1;  
    12.     private static final int TAB_INDEX_THREE = 2;  
    13.       
    14.     private ViewPager mViewPager;  
    15.     private ViewPagerAdapter mViewPagerAdapter;  
    16.       
    17.     /** Called when the activity is first created. */  
    18.     @Override  
    19.     public void onCreate(Bundle savedInstanceState) {  
    20.         super.onCreate(savedInstanceState);  
    21.         setContentView(R.layout.main);  
    22.           
    23.         setUpActionBar();  
    24.         setUpViewPager();  
    25.         setUpTabs();  
    26.     }  
    27.       
    28.     private void setUpActionBar() {  
    29.         final ActionBar actionBar = getActionBar();  
    30.         actionBar.setHomeButtonEnabled(false);  
    31.         actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);  
    32.         actionBar.setDisplayShowTitleEnabled(false);  
    33.         actionBar.setDisplayShowHomeEnabled(false);  
    34.     }  
    35.       
    36.     private void setUpViewPager() {  
    37.         mViewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());  
    38.           
    39.         mViewPager = (ViewPager)findViewById(R.id.pager);  
    40.         mViewPager.setAdapter(mViewPagerAdapter);  
    41.         mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {  
    42.             @Override  
    43.             public void onPageSelected(int position) {  
    44.                 final ActionBar actionBar = getActionBar();  
    45.                 actionBar.setSelectedNavigationItem(position);  
    46.             }  
    47.               
    48.             @Override  
    49.             public void onPageScrollStateChanged(int state) {  
    50.                 switch(state) {  
    51.                     case ViewPager.SCROLL_STATE_IDLE:  
    52.                         //TODO  
    53.                         break;  
    54.                     case ViewPager.SCROLL_STATE_DRAGGING:  
    55.                         //TODO  
    56.                         break;  
    57.                     case ViewPager.SCROLL_STATE_SETTLING:  
    58.                         //TODO  
    59.                         break;  
    60.                     default:  
    61.                         //TODO  
    62.                         break;  
    63.                 }  
    64.             }  
    65.         });  
    66.     }  
    67.       
    68.     private void setUpTabs() {  
    69.         final ActionBar actionBar = getActionBar();  
    70.         for (int i = 0; i < mViewPagerAdapter.getCount(); ++i) {  
    71.             actionBar.addTab(actionBar.newTab()  
    72.                     .setText(mViewPagerAdapter.getPageTitle(i))  
    73.                     .setTabListener(this));  
    74.         }  
    75.     }  
    76.       
    77.     @Override  
    78.     protected void onDestroy() {  
    79.         super.onDestroy();  
    80.     }  
    81.       
    82.     public class ViewPagerAdapter extends FragmentPagerAdapter {  
    83.   
    84.         public ViewPagerAdapter(FragmentManager fm) {  
    85.             super(fm);  
    86.             // TODO Auto-generated constructor stub  
    87.         }  
    88.   
    89.         @Override  
    90.         public Fragment getItem(int position) {  
    91.             // TODO Auto-generated method stub  
    92.             switch (position) {  
    93.                 case TAB_INDEX_ONE:  
    94.                     return mFragment1;  
    95.                 case TAB_INDEX_TWO:  
    96.                     return mFragment2;  
    97.                 case TAB_INDEX_THREE:  
    98.                     return mFragment3;  
    99.             }  
    100.             throw new IllegalStateException("No fragment at position " + position);  
    101.         }  
    102.   
    103.         @Override  
    104.         public int getCount() {  
    105.             // TODO Auto-generated method stub  
    106.             return TAB_INDEX_COUNT;  
    107.         }  
    108.           
    109.         @Override  
    110.         public CharSequence getPageTitle(int position) {  
    111.             String tabLabel = null;  
    112.             switch (position) {  
    113.                 case TAB_INDEX_ONE:  
    114.                     tabLabel = getString(R.string.tab_1);  
    115.                     break;  
    116.                 case TAB_INDEX_TWO:  
    117.                     tabLabel = getString(R.string.tab_2);  
    118.                     break;  
    119.                 case TAB_INDEX_THREE:  
    120.                     tabLabel = getString(R.string.tab_3);  
    121.                     break;  
    122.             }  
    123.             return tabLabel;  
    124.         }  
    125.     }  
    126.   
    127.     @Override  
    128.     public void onTabReselected(Tab tab, FragmentTransaction ft) {  
    129.         // TODO Auto-generated method stub  
    130.           
    131.     }  
    132.   
    133.     @Override  
    134.     public void onTabSelected(Tab tab, FragmentTransaction ft) {  
    135.         // TODO Auto-generated method stub  
    136.         mViewPager.setCurrentItem(tab.getPosition());  
    137.     }  
    138.   
    139.     @Override  
    140.     public void onTabUnselected(Tab tab, FragmentTransaction ft) {  
    141.         // TODO Auto-generated method stub  
    142.           
    143.     }  
    144. }  

     
  • main.xml 的实现部分:
  • [html] view plaincopy
    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.       
    6.     <android.support.v4.view.ViewPager  
    7.         android:id="@+id/pager"  
    8.         android:layout_width="match_parent"  
    9.         android:layout_height="match_parent" >  
    10.     </android.support.v4.view.ViewPager>  
    11. </RelativeLayout>  



4.4 结束语:

2
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:205898次
    • 积分:4290
    • 等级:
    • 排名:第7057名
    • 原创:165篇
    • 转载:122篇
    • 译文:0篇
    • 评论:50条
    博客专栏
    最新评论