Android實(shí)現(xiàn)Tab布局的4種方式(Fragment+TabPageIndicator+ViewPager)
Android現(xiàn)在實(shí)現(xiàn)Tab類(lèi)型的界面方式越來(lái)越多,今天就把常見(jiàn)的實(shí)現(xiàn)方式給大家來(lái)個(gè)總結(jié)。目前寫(xiě)了:
1、傳統(tǒng)的ViewPager實(shí)現(xiàn)
2、FragmentManager+Fragment實(shí)現(xiàn)
3、ViewPager+FragmentPagerAdapter實(shí)現(xiàn)
4、TabPageIndicator+ViewPager+FragmentPagerAdapter
1、傳統(tǒng)的ViewPager實(shí)現(xiàn)
主要就是ViewPager+ViewAdapter這個(gè)還是比較常見(jiàn)的,就不多說(shuō)了
效果圖:
代碼:
package com.example.mainframework02; import javautilArrayList; import javautilList; import androidappActivity; import androidosBundle; import androidsupportvviewPagerAdapter; import androidsupportvviewViewPager; import androidsupportvviewViewPagerOnPageChangeListener; import androidviewLayoutInflater; import androidviewView; import androidviewViewGroup; import androidwidgetImageButton; import androidwidgetImageView; import androidwidgetLinearLayout; public class TraditionalViewPagerAcvitity extends Activity { /** * ViewPager */ private ViewPager mViewPager; /** * ViewPager的適配器 */ private PagerAdapter mAdapter; private List<View> mViews; private LayoutInflater mInflater; private int currentIndex; /** * 底部四個(gè)按鈕 */ private LinearLayout mTabBtnWeixin; private LinearLayout mTabBtnFrd; private LinearLayout mTabBtnAddress; private LinearLayout mTabBtnSettings; @Override protected void onCreate(Bundle savedInstanceState) { superonCreate(savedInstanceState); setContentView(Rlayoutactivity_main); mInflater = LayoutInflaterfrom(this); mViewPager = (ViewPager) findViewById(Ridid_viewpager); /** * 初始化View */ initView(); mViewPagersetAdapter(mAdapter); mViewPagersetOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int position) { resetTabBtn(); switch (position) { case 0: ((ImageButton) mTabBtnWeixinfindViewById(Ridbtn_tab_bottom_weixin)) setImageResource(Rdrawabletab_weixin_pressed); break; case 1: ((ImageButton) mTabBtnFrdfindViewById(Ridbtn_tab_bottom_friend)) setImageResource(Rdrawabletab_find_frd_pressed); break; case 2: ((ImageButton) mTabBtnAddressfindViewById(Ridbtn_tab_bottom_contact)) setImageResource(Rdrawabletab_address_pressed); break; case 3: ((ImageButton) mTabBtnSettingsfindViewById(Ridbtn_tab_bottom_setting)) setImageResource(Rdrawabletab_settings_pressed); break; } currentIndex = position; } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }); } protected void resetTabBtn() { ((ImageButton) mTabBtnWeixinfindViewById(Ridbtn_tab_bottom_weixin)) setImageResource(Rdrawabletab_weixin_normal); ((ImageButton) mTabBtnFrdfindViewById(Ridbtn_tab_bottom_friend)) setImageResource(Rdrawabletab_find_frd_normal); ((ImageButton) mTabBtnAddressfindViewById(Ridbtn_tab_bottom_contact)) setImageResource(Rdrawabletab_address_normal); ((ImageButton) mTabBtnSettingsfindViewById(Ridbtn_tab_bottom_setting)) setImageResource(Rdrawabletab_settings_normal); } private void initView() { mTabBtnWeixin = (LinearLayout) findViewById(Ridid_tab_bottom_weixin); mTabBtnFrd = (LinearLayout) findViewById(Ridid_tab_bottom_friend); mTabBtnAddress = (LinearLayout) findViewById(Ridid_tab_bottom_contact); mTabBtnSettings = (LinearLayout) findViewById(Ridid_tab_bottom_setting); mViews = new ArrayList<View>(); View first = mInflaterinflate(Rlayoutmain_tab_01, null); View second = mInflaterinflate(Rlayoutmain_tab_02, null); View third = mInflaterinflate(Rlayoutmain_tab_03, null); View fourth = mInflaterinflate(Rlayoutmain_tab_04, null); mViewsadd(first); mViewsadd(second); mViewsadd(third); mViewsadd(fourth); mAdapter = new PagerAdapter() { @Override public void destroyItem(ViewGroup container, int position, Object object) { containerremoveView(mViewsget(position)); } @Override public Object instantiateItem(ViewGroup container, int position) { View view = mViewsget(position); containeraddView(view); return view; } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public int getCount() { return mViewssize(); } }; } }
評(píng)價(jià):所有的代碼都集中在一個(gè)Activity中,顯得代碼比較亂。
2、FragmentManager+Fragment實(shí)現(xiàn)
主要利用了Fragment在主內(nèi)容界面對(duì)Fragment的add,hide等事務(wù)操作。
效果圖:
代碼:
主Activity
package com.example.mainframework02.fragment; import androidannotationSuppressLint; import androidappActivity; import androidappFragmentManager; import androidappFragmentTransaction; import androidosBundle; import androidviewView; import androidviewViewOnClickListener; import androidwidgetImageButton; import androidwidgetLinearLayout; import comexamplemainframeworkR; public class FragmentMainActivity extends Activity implements OnClickListener { private MainTab02 mTab02; private MainTab01 mTab01; private MainTab03 mTab03; private MainTab04 mTab04; /** * 底部四個(gè)按鈕 */ private LinearLayout mTabBtnWeixin; private LinearLayout mTabBtnFrd; private LinearLayout mTabBtnAddress; private LinearLayout mTabBtnSettings; /** * 用于對(duì)Fragment進(jìn)行管理 */ private FragmentManager fragmentManager; @SuppressLint("NewApi") @Override protected void onCreate(Bundle savedInstanceState) { superonCreate(savedInstanceState); setContentView(Rlayoutfragment_main); initViews(); fragmentManager = getFragmentManager(); setTabSelection(0); } private void initViews() { mTabBtnWeixin = (LinearLayout) findViewById(Ridid_tab_bottom_weixin); mTabBtnFrd = (LinearLayout) findViewById(Ridid_tab_bottom_friend); mTabBtnAddress = (LinearLayout) findViewById(Ridid_tab_bottom_contact); mTabBtnSettings = (LinearLayout) findViewById(Ridid_tab_bottom_setting); mTabBtnWeixinsetOnClickListener(this); mTabBtnFrdsetOnClickListener(this); mTabBtnAddresssetOnClickListener(this); mTabBtnSettingssetOnClickListener(this); } @Override public void onClick(View v) { switch (vgetId()) { case Ridid_tab_bottom_weixin: setTabSelection(0); break; case Ridid_tab_bottom_friend: setTabSelection(1); break; case Ridid_tab_bottom_contact: setTabSelection(2); break; case Ridid_tab_bottom_setting: setTabSelection(3); break; default: break; } } /** * 根據(jù)傳入的index參數(shù)來(lái)設(shè)置選中的tab頁(yè)。 * */ @SuppressLint("NewApi") private void setTabSelection(int index) { // 重置按鈕 resetBtn(); // 開(kāi)啟一個(gè)Fragment事務(wù) FragmentTransaction transaction = fragmentManagerbeginTransaction(); // 先隱藏掉所有的Fragment,以防止有多個(gè)Fragment顯示在界面上的情況 hideFragments(transaction); switch (index) { case 0: // 當(dāng)點(diǎn)擊了消息tab時(shí),改變控件的圖片和文字顏色 ((ImageButton) mTabBtnWeixinfindViewById(Ridbtn_tab_bottom_weixin)) setImageResource(Rdrawabletab_weixin_pressed); if (mTab01 == null) { // 如果MessageFragment為空,則創(chuàng)建一個(gè)并添加到界面上 mTab01 = new MainTab01(); transactionadd(Ridid_content, mTab01); } else { // 如果MessageFragment不為空,則直接將它顯示出來(lái) transactionshow(mTab01); } break; case 1: // 當(dāng)點(diǎn)擊了消息tab時(shí),改變控件的圖片和文字顏色 ((ImageButton) mTabBtnFrdfindViewById(Ridbtn_tab_bottom_friend)) setImageResource(Rdrawabletab_find_frd_pressed); if (mTab02 == null) { // 如果MessageFragment為空,則創(chuàng)建一個(gè)并添加到界面上 mTab02 = new MainTab02(); transactionadd(Ridid_content, mTab02); } else { // 如果MessageFragment不為空,則直接將它顯示出來(lái) transactionshow(mTab02); } break; case 2: // 當(dāng)點(diǎn)擊了動(dòng)態(tài)tab時(shí),改變控件的圖片和文字顏色 ((ImageButton) mTabBtnAddressfindViewById(Ridbtn_tab_bottom_contact)) setImageResource(Rdrawabletab_address_pressed); if (mTab03 == null) { // 如果NewsFragment為空,則創(chuàng)建一個(gè)并添加到界面上 mTab03 = new MainTab03(); transactionadd(Ridid_content, mTab03); } else { // 如果NewsFragment不為空,則直接將它顯示出來(lái) transactionshow(mTab03); } break; case 3: // 當(dāng)點(diǎn)擊了設(shè)置tab時(shí),改變控件的圖片和文字顏色 ((ImageButton) mTabBtnSettingsfindViewById(Ridbtn_tab_bottom_setting)) setImageResource(Rdrawabletab_settings_pressed); if (mTab04 == null) { // 如果SettingFragment為空,則創(chuàng)建一個(gè)并添加到界面上 mTab04 = new MainTab04(); transactionadd(Ridid_content, mTab04); } else { // 如果SettingFragment不為空,則直接將它顯示出來(lái) transactionshow(mTab04); } break; } transactioncommit(); } /** * 清除掉所有的選中狀態(tài)。 */ private void resetBtn() { ((ImageButton) mTabBtnWeixinfindViewById(Ridbtn_tab_bottom_weixin)) setImageResource(Rdrawabletab_weixin_normal); ((ImageButton) mTabBtnFrdfindViewById(Ridbtn_tab_bottom_friend)) setImageResource(Rdrawabletab_find_frd_normal); ((ImageButton) mTabBtnAddressfindViewById(Ridbtn_tab_bottom_contact)) setImageResource(Rdrawabletab_address_normal); ((ImageButton) mTabBtnSettingsfindViewById(Ridbtn_tab_bottom_setting)) setImageResource(Rdrawabletab_settings_normal); } /** * 將所有的Fragment都置為隱藏狀態(tài)。 * * @param transaction * 用于對(duì)Fragment執(zhí)行操作的事務(wù) */ @SuppressLint("NewApi") private void hideFragments(FragmentTransaction transaction) { if (mTab01 != null) { transactionhide(mTab01); } if (mTab02 != null) { transactionhide(mTab02); } if (mTab03 != null) { transactionhide(mTab03); } if (mTab04 != null) { transactionhide(mTab04); } } }
各個(gè)TabFragment,一共四個(gè)TabFragment,下面貼出兩個(gè),基本都一樣。
package com.example.mainframework02.fragment; import androidannotationSuppressLint; import androidappFragment; import androidosBundle; import androidviewLayoutInflater; import androidviewView; import androidviewViewGroup; @SuppressLint("NewApi") public class MainTab01 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflaterinflate(comexamplemainframeworkRlayoutmain_tab_01, container, false); } } package com.example.mainframework02.fragment; import androidannotationSuppressLint; import androidappFragment; import androidosBundle; import androidviewLayoutInflater; import androidviewView; import androidviewViewGroup; import comexamplemainframeworkR; @SuppressLint("NewApi") public class MainTab02 extends Fragment { public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflaterinflate(Rlayoutmain_tab_02, container, false); } }
評(píng)價(jià):每個(gè)Fragment中的控件的處理,都是獨(dú)立到各自的類(lèi)中,相對(duì)來(lái)說(shuō)主Activity簡(jiǎn)化了不少,可惜沒(méi)有左右滑動(dòng)的效果了。
3、ViewPager+Fragment實(shí)現(xiàn)
主要通過(guò)ViewPager和FragmentPagerAdapter一起來(lái)實(shí)現(xiàn)。
效果圖:
代碼:
主Activity
package com.example.mainframework03; import javautilArrayList; import javautilList; import androidosBundle; import androidsupportvappFragment; import androidsupportvappFragmentActivity; import androidsupportvappFragmentPagerAdapter; import androidsupportvviewViewPager; import androidsupportvviewViewPagerOnPageChangeListener; import androidwidgetImageButton; import androidwidgetLinearLayout; public class MainActivity extends FragmentActivity { private ViewPager mViewPager; private FragmentPagerAdapter mAdapter; private List<Fragment> mFragments = new ArrayList<Fragment>(); /** * 底部四個(gè)按鈕 */ private LinearLayout mTabBtnWeixin; private LinearLayout mTabBtnFrd; private LinearLayout mTabBtnAddress; private LinearLayout mTabBtnSettings; @Override protected void onCreate(Bundle savedInstanceState) { superonCreate(savedInstanceState); setContentView(Rlayoutactivity_main); mViewPager = (ViewPager) findViewById(Ridid_viewpager); initView(); mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public int getCount() { return mFragmentssize(); } @Override public Fragment getItem(int arg0) { return mFragmentsget(arg0); } }; mViewPagersetAdapter(mAdapter); mViewPagersetOnPageChangeListener(new OnPageChangeListener() { private int currentIndex; @Override public void onPageSelected(int position) { resetTabBtn(); switch (position) { case 0: ((ImageButton) mTabBtnWeixinfindViewById(Ridbtn_tab_bottom_weixin)) setImageResource(Rdrawabletab_weixin_pressed); break; case 1: ((ImageButton) mTabBtnFrdfindViewById(Ridbtn_tab_bottom_friend)) setImageResource(Rdrawabletab_find_frd_pressed); break; case 2: ((ImageButton) mTabBtnAddressfindViewById(Ridbtn_tab_bottom_contact)) setImageResource(Rdrawabletab_address_pressed); break; case 3: ((ImageButton) mTabBtnSettingsfindViewById(Ridbtn_tab_bottom_setting)) setImageResource(Rdrawabletab_settings_pressed); break; } currentIndex = position; } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }); } protected void resetTabBtn() { ((ImageButton) mTabBtnWeixinfindViewById(Ridbtn_tab_bottom_weixin)) setImageResource(Rdrawabletab_weixin_normal); ((ImageButton) mTabBtnFrdfindViewById(Ridbtn_tab_bottom_friend)) setImageResource(Rdrawabletab_find_frd_normal); ((ImageButton) mTabBtnAddressfindViewById(Ridbtn_tab_bottom_contact)) setImageResource(Rdrawabletab_address_normal); ((ImageButton) mTabBtnSettingsfindViewById(Ridbtn_tab_bottom_setting)) setImageResource(Rdrawabletab_settings_normal); } private void initView() { mTabBtnWeixin = (LinearLayout) findViewById(Ridid_tab_bottom_weixin); mTabBtnFrd = (LinearLayout) findViewById(Ridid_tab_bottom_friend); mTabBtnAddress = (LinearLayout) findViewById(Ridid_tab_bottom_contact); mTabBtnSettings = (LinearLayout) findViewById(Ridid_tab_bottom_setting); MainTab01 tab01 = new MainTab01(); MainTab02 tab02 = new MainTab02(); MainTab03 tab03 = new MainTab03(); MainTab04 tab04 = new MainTab04(); mFragmentsadd(tab01); mFragmentsadd(tab02); mFragmentsadd(tab03); mFragmentsadd(tab04); } }
還有4個(gè)TabFragment,下面貼一個(gè),四個(gè)基本一樣
package com.example.mainframework03; import androidosBundle; import androidsupportvappFragment; import androidviewLayoutInflater; import androidviewView; import androidviewViewGroup; public class MainTab01 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { return inflaterinflate(Rlayoutmain_tab_01, container, false); } }
評(píng)價(jià):實(shí)現(xiàn)效果和第一種效果一模一樣,每個(gè)Fragment獨(dú)自處理自己內(nèi)部的邏輯,代碼整潔很多,并且支持左右滑動(dòng)。感覺(jué)是第一種和第二種的結(jié)合版本。
4、TabPageIndicator+ViewPager+FragmentPagerAdapter
實(shí)現(xiàn)方式和3是一致的,但是使用了TabPageIndicator作為tab的指示器,效果還是不錯(cuò)的,這個(gè)之前寫(xiě)過(guò),就不再貼代碼了。
效果圖:
好了,就總結(jié)了這么多,肯定還有很多別的實(shí)現(xiàn)方式,大家可以留言,有時(shí)間會(huì)繼續(xù)完善這篇總結(jié)的。
第一種和第二種的源碼:demo下載
第三種方式的源碼:demo下載
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android帶圓形數(shù)字進(jìn)度的自定義進(jìn)度條示例
本篇文章主要介紹了Android帶圓形數(shù)字進(jìn)度的自定義進(jìn)度條示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02Android仿今日頭條滑動(dòng)頁(yè)面導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了Android仿今日頭條滑動(dòng)頁(yè)面導(dǎo)航效果的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01Android中EditText屏蔽第三方輸入法表情的方法示例
最近在工作終于遇到一個(gè)問(wèn)題,因?yàn)榈谌捷斎敕ū砬榈膯?wèn)題導(dǎo)致Android中TextView的內(nèi)容顯示異常,只能想辦法解決了,下面這篇文章主要記錄了在處理Android中EditText屏蔽第三方輸入法表情的方法,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-01-01Android編程出現(xiàn)Button點(diǎn)擊事件無(wú)效的解決方法示例
這篇文章主要介紹了Android編程出現(xiàn)Button點(diǎn)擊事件無(wú)效的解決方法,結(jié)合實(shí)例形式分析了Android編程中出現(xiàn)Button點(diǎn)擊事件無(wú)效的原因及相關(guān)的解決方法,需要的朋友可以參考下2018-02-02Android使用RecyclerView實(shí)現(xiàn)水平滾動(dòng)控件
這篇文章給大家介紹了利用Android使用RecyclerView實(shí)現(xiàn)水平滾動(dòng)的效果,本文做了一個(gè)年齡滾動(dòng)控件的例子,對(duì)大家開(kāi)發(fā)Android具有一定參考借鑒價(jià)值,有需要的可以參考借鑒。2016-09-09