AndroID现在实现Tab类型的界面方式越来越多,今天就把常见的实现方式给大家来个总结。目前写了:
1、传统的VIEwPager实现
2、FragmentManager+Fragment实现
3、VIEwPager+FragmentPagerAdapter实现
4、TabPageIndicator+VIEwPager+FragmentPagerAdapter
1、传统的VIEwPager实现
主要就是VIEwPager+VIEwAdapter这个还是比较常见的,就不多说了
效果图:
代码:
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; /** * 底部四个按钮 */ 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(); } }; } }
评价:所有的代码都集中在一个Activity中,显得代码比较乱。
2、FragmentManager+Fragment实现
主要利用了Fragment在主内容界面对Fragment的add,hIDe等事务 *** 作。
效果图:
代码:
主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; /** * 底部四个按钮 */ private linearLayout mTabBtnWeixin; private linearLayout mTabBtnFrd; private linearLayout mTabBtnAddress; private linearLayout mTabBtnSettings; /** * 用于对Fragment进行管理 */ 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; } } /** * 根据传入的index参数来设置选中的tab页。 * */ @Suppresslint("NewAPI") private voID setTabSelection(int index) { // 重置按钮 resetBtn(); // 开启一个Fragment事务 FragmentTransaction transaction = fragmentManagerbeginTransaction(); // 先隐藏掉所有的Fragment,以防止有多个Fragment显示在界面上的情况 hIDeFragments(transaction); switch (index) { case 0: // 当点击了消息tab时,改变控件的图片和文字颜色 ((Imagebutton) mTabBtnWeixinfindVIEwByID(RIDbtn_tab_bottom_weixin)) setimageResource(Rdrawabletab_weixin_pressed); if (mTab01 == null) { // 如果MessageFragment为空,则创建一个并添加到界面上 mTab01 = new MainTab01(); transactionadd(RIDID_content,mTab01); } else { // 如果MessageFragment不为空,则直接将它显示出来 transactionshow(mTab01); } break; case 1: // 当点击了消息tab时,改变控件的图片和文字颜色 ((Imagebutton) mTabBtnFrdfindVIEwByID(RIDbtn_tab_bottom_frIEnd)) setimageResource(Rdrawabletab_find_frd_pressed); if (mTab02 == null) { // 如果MessageFragment为空,则创建一个并添加到界面上 mTab02 = new MainTab02(); transactionadd(RIDID_content,mTab02); } else { // 如果MessageFragment不为空,则直接将它显示出来 transactionshow(mTab02); } break; case 2: // 当点击了动态tab时,改变控件的图片和文字颜色 ((Imagebutton) mTabBtnAddressfindVIEwByID(RIDbtn_tab_bottom_contact)) setimageResource(Rdrawabletab_address_pressed); if (mTab03 == null) { // 如果NewsFragment为空,则创建一个并添加到界面上 mTab03 = new MainTab03(); transactionadd(RIDID_content,mTab03); } else { // 如果NewsFragment不为空,则直接将它显示出来 transactionshow(mTab03); } break; case 3: // 当点击了设置tab时,改变控件的图片和文字颜色 ((Imagebutton) mTabBtnSettingsfindVIEwByID(RIDbtn_tab_bottom_setting)) setimageResource(Rdrawabletab_settings_pressed); if (mTab04 == null) { // 如果SettingFragment为空,则创建一个并添加到界面上 mTab04 = new MainTab04(); transactionadd(RIDID_content,mTab04); } else { // 如果SettingFragment不为空,则直接将它显示出来 transactionshow(mTab04); } break; } transactioncommit(); } /** * 清除掉所有的选中状态。 */ 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都置为隐藏状态。 * * @param transaction * 用于对Fragment执行 *** 作的事务 */ @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); } } }
各个TabFragment,一共四个TabFragment,下面贴出两个,基本都一样。
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,Bundle savedInstanceState) { return inflaterinflate(Rlayoutmain_tab_02,false); } }
评价:每个Fragment中的控件的处理,都是独立到各自的类中,相对来说主Activity简化了不少,可惜没有左右滑动的效果了。
3、VIEwPager+Fragment实现
主要通过VIEwPager和FragmentPagerAdapter一起来实现。
效果图:
代码:
主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>(); /** * 底部四个按钮 */ 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,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个TabFragment,下面贴一个,四个基本一样
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,Bundle savedInstanceState) { return inflaterinflate(Rlayoutmain_tab_01,false); } }
评价:实现效果和第一种效果一模一样,每个Fragment独自处理自己内部的逻辑,代码整洁很多,并且支持左右滑动。感觉是第一种和第二种的结合版本。
4、TabPageIndicator+VIEwPager+FragmentPagerAdapter
实现方式和3是一致的,但是使用了TabPageIndicator作为tab的指示器,效果还是不错的,这个之前写过,就不再贴代码了。
效果图:
好了,就总结了这么多,肯定还有很多别的实现方式,大家可以留言,有时间会继续完善这篇总结的。
第一种和第二种的源码:demo下载
第三种方式的源码:demo下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程小技巧。
总结以上是内存溢出为你收集整理的Android实现Tab布局的4种方式(Fragment+TabPageIndicator+ViewPager)全部内容,希望文章能够帮你解决Android实现Tab布局的4种方式(Fragment+TabPageIndicator+ViewPager)所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)