Android ActionBar+ViewPager 实现左右滑动Tab

最近公司数据抓取工作接近尾声了，我也终于回归Android岗位了。在Google官方文档上看了 Creating Swipe Views with Tabs这篇文章，看完之后自己想实践一下，于是乎折腾了一番，终于实现了。

这里用到了Support Library 中的support-v4 包，具体请参看官方文档。


工程目录结构如下：




首先看主界面Activity的布局文件 activity_main.xml

[html] view plain copy
  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.     <android.support.v4.view.ViewPager  
  8.         android:id="@+id/pager"  
  9.         android:layout_width="match_parent"  
  10.         android:layout_height="match_parent" />  
  11.   
  12. </RelativeLayout>  


主界面 MainActivity.java

[java] view plain copy
  1. package com.example.tab;  
  2.   
  3. import android.app.ActionBar;  
  4. import android.app.ActionBar.Tab;  
  5. import android.app.ActionBar.TabListener;  
  6. import android.app.FragmentTransaction;  
  7. import android.os.Bundle;  
  8. import android.support.v4.app.Fragment;  
  9. import android.support.v4.app.FragmentActivity;  
  10. import android.support.v4.app.FragmentManager;  
  11. import android.support.v4.app.FragmentPagerAdapter;  
  12. import android.support.v4.view.ViewPager;  
  13. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  14. import android.view.Menu;  
  15. import com.example.android_tabtest.R;  
  16. import com.example.tab.fragment.CommonUIFragment;  
  17. import com.example.tab.fragment.LaunchUIFragment;  
  18.   
  19. public class MainActivity extends FragmentActivity implements TabListener {  
  20.   
  21.     private ViewPager mViewPager;  
  22.     public static final int MAX_TAB_SIZE = 4;  
  23.     public static final String ARGUMENTS_NAME = "args";  
  24.     private TabFragmentPagerAdapter mAdapter;  
  25.   
  26.     @Override  
  27.     protected void onCreate(Bundle savedInstanceState) {  
  28.         super.onCreate(savedInstanceState);  
  29.         setContentView(R.layout.activity_main);  
  30.           
  31.         findViewById();  
  32.         initView();  
  33.     }  
  34.   
  35.     private void findViewById() {  
  36.         mViewPager = (ViewPager) this.findViewById(R.id.pager);  
  37.     }  
  38.   
  39.     private void initView() {  
  40.           
  41.         final ActionBar mActionBar = getActionBar();  
  42.           
  43.         mActionBar.setDisplayHomeAsUpEnabled(false);  
  44.           
  45.         mActionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);  
  46.           
  47.         mAdapter = new TabFragmentPagerAdapter(getSupportFragmentManager());  
  48.         mViewPager.setAdapter(mAdapter);  
  49.         mViewPager.setOnPageChangeListener(new OnPageChangeListener() {  
  50.               
  51.             @Override  
  52.             public void onPageSelected(int arg0) {  
  53.                   
  54.                 mActionBar.setSelectedNavigationItem(arg0);  
  55.             }  
  56.               
  57.             @Override  
  58.             public void onPageScrolled(int arg0, float arg1, int arg2) {  
  59.                   
  60.             }  
  61.               
  62.             @Override  
  63.             public void onPageScrollStateChanged(int arg0) {  
  64.                   
  65.             }  
  66.         });  
  67.           
  68.         //初始化 ActionBar  
  69.         for(int i=0;i<MAX_TAB_SIZE;i++){  
  70.             Tab tab = mActionBar.newTab();  
  71.             tab.setText(mAdapter.getPageTitle(i)).setTabListener(this);  
  72.             mActionBar.addTab(tab);  
  73.         }  
  74.     }  
  75.   
  76.     public static class TabFragmentPagerAdapter extends FragmentPagerAdapter{  
  77.   
  78.         public TabFragmentPagerAdapter(FragmentManager fm) {  
  79.             super(fm);  
  80.         }  
  81.   
  82.         @Override  
  83.         public Fragment getItem(int arg0) {  
  84.             Fragment ft = null;  
  85.             switch (arg0) {  
  86.             case 0:  
  87.                 ft = new LaunchUIFragment();  
  88.                 break;  
  89.   
  90.             default:  
  91.                 ft = new CommonUIFragment();  
  92.                   
  93.                 Bundle args = new Bundle();  
  94.                 args.putString(ARGUMENTS_NAME, "TAB"+(arg0+1));  
  95.                 ft.setArguments(args);  
  96.                   
  97.                 break;  
  98.             }  
  99.             return ft;  
  100.         }  
  101.   
  102.         @Override  
  103.         public int getCount() {  
  104.               
  105.             return MAX_TAB_SIZE;  
  106.         }  
  107.          @Override  
  108.         public CharSequence getPageTitle(int position) {  
  109.             return "TAB " + (position + 1);  
  110.         }  
  111.     }  
  112.       
  113.     @Override  
  114.     public boolean onCreateOptionsMenu(Menu menu) {  
  115.         // Inflate the menu; this adds items to the action bar if it is present.  
  116.         getMenuInflater().inflate(R.menu.main, menu);  
  117.         return true;  
  118.     }  
  119.   
  120.     @Override  
  121.     public void onTabSelected(Tab tab, FragmentTransaction ft) {  
  122.         mViewPager.setCurrentItem(tab.getPosition());  
  123.     }  
  124.   
  125.     @Override  
  126.     public void onTabUnselected(Tab tab, FragmentTransaction ft) {  
  127.           
  128.     }  
  129.   
  130.     @Override  
  131.     public void onTabReselected(Tab tab, FragmentTransaction ft) {  
  132.           
  133.     }  
  134.   
  135. }  


LaunchUIFragment.java

[java] view plain copy
  1. package com.example.tab.fragment;  
  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. import com.example.android_tabtest.R;  
  10.   
  11. public class LaunchUIFragment extends Fragment {  
  12.   
  13.     @Override  
  14.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  15.             Bundle savedInstanceState) {  
  16.           
  17.         View rootView = inflater.inflate(R.layout.fragment_selection_launch, container, false);  
  18.           
  19.         return rootView;  
  20.     }  
  21.     @Override  
  22.     public void onActivityCreated(Bundle savedInstanceState) {  
  23.         // TODO Auto-generated method stub  
  24.         super.onActivityCreated(savedInstanceState);  
  25.     }  
  26.       
  27. }  


LaunchUIFragment 的布局文件 fragment_selection_launch.xml

[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.     <Button android:id="@+id/bt_external"  
  8.             android:layout_width="300dp"  
  9.             android:layout_height="wrap_content"  
  10.             android:layout_marginTop="20dp"  
  11.             android:layout_marginBottom="16dp"  
  12.             android:text="@string/main_qq"/>  
  13.       
  14.     <Button android:id="@+id/bt_internal"  
  15.             android:layout_width="300dp"  
  16.             android:layout_height="wrap_content"  
  17.             android:layout_marginBottom="16dp"  
  18.             android:text="@string/main_wx"/>  
  19.   
  20. </LinearLayout>  


CommonUIFragment.java

[java] view plain copy
  1. package com.example.tab.fragment;  
  2.   
  3. import com.example.android_tabtest.R;  
  4. import com.example.tab.MainActivity;  
  5.   
  6. import android.os.Bundle;  
  7. import android.support.v4.app.Fragment;  
  8. import android.view.LayoutInflater;  
  9. import android.view.View;  
  10. import android.view.ViewGroup;  
  11. import android.widget.TextView;  
  12.   
  13. public class CommonUIFragment extends Fragment {  
  14.       
  15.     @Override  
  16.     public View onCreateView(LayoutInflater inflater, ViewGroup container,  
  17.             Bundle savedInstanceState) {  
  18.           
  19.         View rootView = inflater.inflate(R.layout.fragment_selection_common, container, false);  
  20.           
  21.         TextView tv_tabName = (TextView) rootView.findViewById(R.id.tv_tabName);  
  22.           
  23.         Bundle bundle = getArguments();  
  24.           
  25.         tv_tabName.setText(bundle.getString(MainActivity.ARGUMENTS_NAME, ""));  
  26.           
  27.         return rootView;  
  28.     }  
  29.     @Override  
  30.     public void onActivityCreated(Bundle savedInstanceState) {  
  31.         // TODO Auto-generated method stub  
  32.         super.onActivityCreated(savedInstanceState);  
  33.     }  
  34.       
  35. }  


CommonUIFragment 的布局文件 fragment_selection_common.xml

[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.     <TextView   
  8.         android:id="@+id/tv_tabName"  
  9.         android:layout_width="wrap_content"  
  10.         android:layout_height="30dp"  
  11.         android:gravity="center"  
  12.         android:textSize="20sp"  
  13.         />  
  14.   
  15. </LinearLayout>  

 


模拟器环境下运行效果图如下：



二、FragmentPagerAdapter和FragmentStatePagerAdapter的区别

官方API文档上的说明

FragmentPagerAdapter

PagerAdapter that represents each page as a Fragment that is persistently kept in the fragment manager as long as the user can return to the page.

FragmentStatePagerAdapter.

FragmentStatePagerAdapter

PagerAdapter that uses a Fragment to manage each page. This class also handles saving and restoring of fragment's state.

FragmentPagerAdapter at the cost of potentially more overhead when switching between pages.

 


当我们的应用 有很多个页面(Fragment)的时候，推荐使用FragmentStatePagerAdapter

posted @ 2016-11-05 16:30  天涯海角路  阅读(99)  评论(0)    收藏  举报