當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時間：2025/6/15 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了利用ViewPager+Fragment+actionbar实现可左右滑动的Action Tab 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. ViewPager要點：

ViewPager 是一個布局管理類（layout manager），用于提供頁面的左右滑動功能，類似于ListView，也有為ViewPager提供 ? ? 數(shù)據(jù)（Fragment）的 adapter 控制類（FragmentPagerAdapter, FragmentStatePagerAdapter）。
ViewPager 經(jīng)常和 Fragment 一起使用，結(jié)合ActionBar 的 Tab，實現(xiàn) tab 頁面的左右滑動。
ViewPager 屬于 android sdk 擴展包，若要使用 ViewPager，需要外部導(dǎo)入擴展包：android-support-v4.jar

2. 實現(xiàn)功能：

本例實現(xiàn)的功能效果如下圖所示： ? ??實現(xiàn) tab 頁的左右滑動的好處是，由于我們經(jīng)常習(xí)慣單手操作手機，而單手切換 tab 頁是非常困難的，而 tab 頁面的左右滑動 ? ? 功能正好可以解決這個問題，提供更加方便的交互。

3. 原理說明：

整個應(yīng)用可以分為如圖所示的幾個模塊：

主界面Activity 主要由一個 ViewPager 組成，里面裝載了三個 Fragment 頁面，進行左右滑動；
主界面Activity 的ActionBar 中創(chuàng)建三個 Tab 按鍵（Tab Button）；
ActionBar 與 ViewPager 之間的交互關(guān)系如下：ViewPager 帶動其裝載的三個 Fragment 左右切換的同時，控制其相對應(yīng)的Action Tab Button 的左右切換；反過來，當(dāng)用戶手動切換三個 Tab Button 時，控制 ViewPager 中相對應(yīng)的 Fragment 的切換。

4. 具體步驟：

4.1 新建工程并導(dǎo)入android-support-v4.jar擴展包：

新建一個名為ActionTabWithSlippingFragment。
導(dǎo)入android-support-v4.jar擴展包：網(wǎng)上很多導(dǎo)入方法都表示要通過 “Project - Properties - Java Build Path - Add External JARs” 進行導(dǎo)入，這樣可以保證編譯通過，但是運行的時候會出錯！這里我用的導(dǎo)入方法如下：
首先在工程目錄下新建一個文件夾 libs，然后從 "android sdk目錄\extras\android\compatibility\v4" 下將?android-support-v4.jar 手動拷貝到新建的 libs 目錄下，最后右擊工程選擇 “Refresh” 刷新即可，這時可以看到 libs 目錄和 Android Dependencies 目錄下均有?android-support-v4.jar 出現(xiàn)，這就表示導(dǎo)入成功了！如下圖所示：

4.2 創(chuàng)建三個 Fragment 類作為可滑動的 Tab 頁（view），并由 ViewPager來管理（manager）：

創(chuàng)建三個 Fragement 類：Fragment1.java，Fragment2.java，Fragment3.java，同時為其各自創(chuàng)建布局視圖文件：fragment1.xml，fragment2.xml，fragment3.xml，分別設(shè)置紅（R）、綠（G）、藍（B）背景。
Fragment1.java創(chuàng)建如下，關(guān)鍵實現(xiàn)其 onCreateView 方法，設(shè)置其布局：
[java]?view plaincopy
public?class?Fragment1?extends?Fragment?{??
??
????@Override??
????public?View?onCreateView(LayoutInflater?inflater,?ViewGroup?container,?Bundle?savedInstanceState)?{??
????????return?inflateAndSetupView(inflater,?container,?savedInstanceState,?R.layout.fragment1);??????
????}??
??????
????private?View?inflateAndSetupView(LayoutInflater?inflater,?ViewGroup?container,???
????????????Bundle?savedInstanceState,?int?layoutResourceId)?{??
????????View?layout?=?inflater.inflate(layoutResourceId,?container,?false);??
??????????
????????return?layout;??
????}???
}??

fragment1.xml 主要定義一個帶有紅色背景的的LinearLayout：
[html]?view plaincopy
<?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"??
????android:background="#FF0000"?>??
??????
????<TextView??
????????android:layout_width="match_parent"??
????????android:layout_height="match_parent"??
????????android:layout_gravity="center"??
????????android:gravity="center"??
????????android:text="@string/frag_1"??
????????android:textSize="30dp"??
????????android:textStyle="bold"??
????????android:textColor="#FFFFFF"?/>??
??
</LinearLayout>??

4.3 創(chuàng)建主界面 Activity：ActionTabWithSlippingFragmentActivity，及其對應(yīng)的布局文件：main.xml：

設(shè)置 ActionBar 的樣式，如：無回退按鍵、無標(biāo)題等——setUpActionBar()
初始化并設(shè)置 ViewPager，兩個要點：首先要定義并設(shè)置 ViewPager 所需要的數(shù)據(jù)控制類?ViewPagerAdapter，ViewPagerAdapter 必須實現(xiàn)如何返回對應(yīng)位置的 Fragment、頁數(shù)、頁標(biāo)題；其次，要實現(xiàn) ViewPager 的翻頁監(jiān)聽接口（OnPageChangeListener），主要是實現(xiàn)當(dāng)前頁面被切換時需要導(dǎo)航到對應(yīng)位置的action tab button，必要的時候，還需要實現(xiàn)在頁面翻動的各個狀態(tài)下（正在翻動、翻動即將停止、翻動完全停止）的相應(yīng)處理——setUpViewPager()
然后需要創(chuàng)建三個 tab button，并實現(xiàn) tab 的監(jiān)聽接口：主要是當(dāng)選擇相應(yīng) tab 時，如何切換 ViewPager 的相應(yīng)頁面——setUpTabs()
ActionTabWithSlippingFragmentActivity.java 的實現(xiàn)部分?
[java]?view plaincopy
public?class?ActionTabWithSlippingFragmentActivity?extends?FragmentActivity???
????????????????implements?ActionBar.TabListener{??
??????
????private?Fragment1?mFragment1?=?new?Fragment1();??
????private?Fragment2?mFragment2?=?new?Fragment2();??
????private?Fragment3?mFragment3?=?new?Fragment3();??
??????
????private?static?final?int?TAB_INDEX_COUNT?=?3;??
??????
????private?static?final?int?TAB_INDEX_ONE?=?0;??
????private?static?final?int?TAB_INDEX_TWO?=?1;??
????private?static?final?int?TAB_INDEX_THREE?=?2;??
??????
????private?ViewPager?mViewPager;??
????private?ViewPagerAdapter?mViewPagerAdapter;??
??????
????/**?Called?when?the?activity?is?first?created.?*/??
????@Override??
????public?void?onCreate(Bundle?savedInstanceState)?{??
????????super.onCreate(savedInstanceState);??
????????setContentView(R.layout.main);??
??????????
????????setUpActionBar();??
????????setUpViewPager();??
????????setUpTabs();??
????}??
??????
????private?void?setUpActionBar()?{??
????????final?ActionBar?actionBar?=?getActionBar();??
????????actionBar.setHomeButtonEnabled(false);??
????????actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);??
????????actionBar.setDisplayShowTitleEnabled(false);??
????????actionBar.setDisplayShowHomeEnabled(false);??
????}??
??????
????private?void?setUpViewPager()?{??
????????mViewPagerAdapter?=?new?ViewPagerAdapter(getSupportFragmentManager());??
??????????
????????mViewPager?=?(ViewPager)findViewById(R.id.pager);??
????????mViewPager.setAdapter(mViewPagerAdapter);??
????????mViewPager.setOnPageChangeListener(new?ViewPager.SimpleOnPageChangeListener()?{??
????????????@Override??
????????????public?void?onPageSelected(int?position)?{??
????????????????final?ActionBar?actionBar?=?getActionBar();??
????????????????actionBar.setSelectedNavigationItem(position);??
????????????}??
??????????????
????????????@Override??
????????????public?void?onPageScrollStateChanged(int?state)?{??
????????????????switch(state)?{??
????????????????????case?ViewPager.SCROLL_STATE_IDLE:??
????????????????????????//TODO??
????????????????????????break;??
????????????????????case?ViewPager.SCROLL_STATE_DRAGGING:??
????????????????????????//TODO??
????????????????????????break;??
????????????????????case?ViewPager.SCROLL_STATE_SETTLING:??
????????????????????????//TODO??
????????????????????????break;??
????????????????????default:??
????????????????????????//TODO??
????????????????????????break;??
????????????????}??
????????????}??
????????});??
????}??
??????
????private?void?setUpTabs()?{??
????????final?ActionBar?actionBar?=?getActionBar();??
????????for?(int?i?=?0;?i?<?mViewPagerAdapter.getCount();?++i)?{??
????????????actionBar.addTab(actionBar.newTab()??
????????????????????.setText(mViewPagerAdapter.getPageTitle(i))??
????????????????????.setTabListener(this));??
????????}??
????}??
??????
????@Override??
????protected?void?onDestroy()?{??
????????super.onDestroy();??
????}??
??????
????public?class?ViewPagerAdapter?extends?FragmentPagerAdapter?{??
??
????????public?ViewPagerAdapter(FragmentManager?fm)?{??
????????????super(fm);??
????????????//?TODO?Auto-generated?constructor?stub??
????????}??
??
????????@Override??
????????public?Fragment?getItem(int?position)?{??
????????????//?TODO?Auto-generated?method?stub??
????????????switch?(position)?{??
????????????????case?TAB_INDEX_ONE:??
????????????????????return?mFragment1;??
????????????????case?TAB_INDEX_TWO:??
????????????????????return?mFragment2;??
????????????????case?TAB_INDEX_THREE:??
????????????????????return?mFragment3;??
????????????}??
????????????throw?new?IllegalStateException("No?fragment?at?position?"?+?position);??
????????}??
??
????????@Override??
????????public?int?getCount()?{??
????????????//?TODO?Auto-generated?method?stub??
????????????return?TAB_INDEX_COUNT;??
????????}??
??????????
????????@Override??
????????public?CharSequence?getPageTitle(int?position)?{??
????????????String?tabLabel?=?null;??
????????????switch?(position)?{??
????????????????case?TAB_INDEX_ONE:??
????????????????????tabLabel?=?getString(R.string.tab_1);??
????????????????????break;??
????????????????case?TAB_INDEX_TWO:??
????????????????????tabLabel?=?getString(R.string.tab_2);??
????????????????????break;??
????????????????case?TAB_INDEX_THREE:??
????????????????????tabLabel?=?getString(R.string.tab_3);??
????????????????????break;??
????????????}??
????????????return?tabLabel;??
????????}??
????}??
??
????@Override??
????public?void?onTabReselected(Tab?tab,?FragmentTransaction?ft)?{??
????????//?TODO?Auto-generated?method?stub??
??????????
????}??
??
????@Override??
????public?void?onTabSelected(Tab?tab,?FragmentTransaction?ft)?{??
????????//?TODO?Auto-generated?method?stub??
????????mViewPager.setCurrentItem(tab.getPosition());??
????}??
??
????@Override??
????public?void?onTabUnselected(Tab?tab,?FragmentTransaction?ft)?{??
????????//?TODO?Auto-generated?method?stub??
??????????
????}??
}??

main.xml 的實現(xiàn)部分：
[html]?view plaincopy
<?xml?version="1.0"?encoding="utf-8"?>??
<RelativeLayout?xmlns:android="http://schemas.android.com/apk/res/android"??
????android:layout_width="fill_parent"??
????android:layout_height="fill_parent"?>??
??????
????<android.support.v4.view.ViewPager??
????????android:id="@+id/pager"??
????????android:layout_width="match_parent"??
????????android:layout_height="match_parent"?>??
????</android.support.v4.view.ViewPager>??
</RelativeLayout>??

4.4 結(jié)束語：

關(guān)于 ViewPager 結(jié)合ActionBar 和 Fragment 實現(xiàn)頁面滑動式 tab 功能在 google 的官方開發(fā)文檔中也有說明，本例相關(guān)原理亦以此作為參考，詳情請查閱：http://developer.android.com/reference/android/support/v4/view/ViewPager.html
源代碼供開放，無需積分：http://download.csdn.net/detail/ixiaobu/4743378