当前位置： 移动技术网 > 移动技术>移动开发>Android > Android实现Tab布局的4种方式（Fragment+TabPageIndicator+ViewPager）

Android实现Tab布局的4种方式（Fragment+TabPageIndicator+ViewPager）

2019年07月24日  | 移动技术网移动技术  | 我要评论

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, viewgroup container, bundle savedinstancestate) 
  { 
    return inflaterinflate(rlayoutmain_tab_02, container, 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, 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个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, viewgroup container, bundle savedinstancestate) 
  { 
    return inflaterinflate(rlayoutmain_tab_01, container, false); 
   
  } 
 
}

评价：实现效果和第一种效果一模一样，每个fragment独自处理自己内部的逻辑，代码整洁很多，并且支持左右滑动。感觉是第一种和第二种的结合版本。

4、tabpageindicator+viewpager+fragmentpageradapter

实现方式和3是一致的，但是使用了tabpageindicator作为tab的指示器，效果还是不错的，这个之前写过，就不再贴代码了。

效果图：

好了，就总结了这么多，肯定还有很多别的实现方式，大家可以留言，有时间会继续完善这篇总结的。

第一种和第二种的源码：

第三种方式的源码：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网