Android实现Tab布局的4种方式(Fragment+TabPageIndicator+ViewPager)

Android实现Tab布局的4种方式(Fragment+TabPageIndicator+ViewPager),第1张

概述Android现在实现Tab类型的界面方式越来越多,今天就把常见的实现方式给大家来个总结。目前写了:

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)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1147555.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-31
下一篇 2022-05-31

发表评论

登录后才能评论

评论列表(0条)

保存