Android ActionBar+ViewPager 实现左右滑动Tab

转载 2013年12月04日 17:12:31

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


工程目录结构如下:




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

[html] view plaincopy
  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 plaincopy
  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 plaincopy
  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 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.     <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 plaincopy
  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 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/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

Implementation of 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.

This version of the pager is best for use when there are a handful of typically more static fragments to be paged through, such as a set of tabs. The fragment of each page the user visits will be kept in memory, though its view hierarchy may be destroyed when not visible. This can result in using a significant amount of memory since fragment instances can hold on to an arbitrary amount of state. For larger sets of pages, consider FragmentStatePagerAdapter.

FragmentStatePagerAdapter

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

This version of the pager is more useful when there area large number of pages, working more like a list view. When pages are not visible to the user, their entire fragment may be destroyed, only keeping the saved state of that fragment. This allows the pager to hold on to much less memory associated with each visited page as compared to FragmentPagerAdapter at the cost of potentially more overhead when switching between pages.



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

相关文章推荐

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

转载:原博地址找不到了,不好意思~~ 1. ViewPager要点: ViewPager 是一个布局管理类(layout manager),用于提供页面的左右滑动功能,类似于L...

ActionBar + ViewPager实现左右滑动切换Tab页效果

废话不多说,先上一张效果图。

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

1. ViewPager要点: ViewPager 是一个布局管理类(layout manager),用于提供页面的左右滑动功能,类似于ListView,也有为ViewPager提供    ...
  • ixiaobu
  • ixiaobu
  • 2012年11月06日 18:42
  • 7520

利用ViewPageIndicator+ViewPager实现左右滑动带图标tab标签功能

使用ViewPager和Tab制作实现左右滑动导航

使用ViewPager来呈现一组页面,添加子View时,需要将Fragment与PagerAdapter联系起来,有两种可用的Adapter: FragmentPagerAdapter 在相邻页面内容...

【android】TabActivity实现手指左右滑动切换tab

在做项目的时候主界面有好几个tab, 有些用户习惯性的左右滑屏来切换tab,所以添加了左右滑屏切换他变得功能。 基本思想: dispatchTouchEvent在接收到用户触屏时间之后被触发,所在...
  • actual_
  • actual_
  • 2012年09月20日 15:32
  • 5500

Android实现ViewPager+Fragment左右滑动

  • 2017年03月09日 22:04
  • 27.06MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Android ActionBar+ViewPager 实现左右滑动Tab
举报原因:
原因补充:

(最多只允许输入30个字)