Android TabLayout 实现底部Tab的示例代码

概述前言底部Tab已经是一个应用的标配了，因为手机屏幕大小的限制，使得我们必须去最大化的利用可见的空间。当然底部Tab一般为3个左右，最多不会超过5个。

前言

底部Tab已经是一个应用的标配了，因为手机屏幕大小的限制，使得我们必须去最大化的利用可见的空间。当然底部Tab一般为3个左右，最多不会超过5个。

效果图

下面是我使用TabLayout来实现的底部Tab，

实现方式也很简单，因为这里没有“小滑块”。只需要去处理，Tab的滑动和点击即可。

代码：

public class CustomBottabItem {  private TabLayout mTabLayout;  private VIEwPager mVIEwPager;  private Context mContext;  //底部Tab标题  private final String[] mTitles = {"主页","理财","添加","消息","我的"};  //返回CustomBottabItem实例  public static CustomBottabItem create() {    return TabItemHolder.sCustomTabItem;  }  //创建CustomBottabItem实例  private static class TabItemHolder {    private static CustomBottabItem sCustomTabItem = new CustomBottabItem();  }  //引入布局需要的Context  public CustomBottabItem setContext(Context context) {    mContext = context;    return this;  }  //需要自定义的TabLayout  public CustomBottabItem setTabLayout(TabLayout tabLayout) {    mTabLayout = tabLayout;    return this;  }  //设置与TabLayout关联的VIEwPager  public CustomBottabItem setVIEwPager(VIEwPager vIEwPager) {    mVIEwPager = vIEwPager;    return this;  }  //创建Tab  public CustomBottabItem build() {    initTabLayout();    return this;  }  //初始化Tab  private voID initTabLayout() {    mTabLayout.setupWithVIEwPager(mVIEwPager);    //第二个参数为selector，下同    mTabLayout.getTabAt(0).setCustomVIEw(getTabVIEw(0,R.drawable.home_icon_selector));    mTabLayout.getTabAt(1).setCustomVIEw(getTabVIEw(1,R.drawable.manage_icon_selector));    mTabLayout.getTabAt(2).setCustomVIEw(getTabVIEw(2,R.drawable.add_icon_selector));    mTabLayout.getTabAt(3).setCustomVIEw(getTabVIEw(3,R.drawable.find_icon_selector));    mTabLayout.getTabAt(4).setCustomVIEw(getTabVIEw(4,R.drawable.money_icon_selector));    tabSelectListener();  }   //自定义Tab样式  private VIEw getTabVIEw(final int position,int resID) {    final VIEw vIEw = LayoutInflater.from(mContext).inflate(R.layout.bottom_tab_item,null);    TextVIEw tvTitle = (TextVIEw) vIEw.findVIEwByID(R.ID.ID_tv_Title);    final ImageVIEw ivTitle = (ImageVIEw) vIEw.findVIEwByID(R.ID.ID_iv_Title);    ivTitle.setimageResource(resID);    tvTitle.setText(mTitles[position]);    //默认第一个tab选中，设置字体为选中色    if (position == 0) {      tvTitle.setTextcolor(color.parsecolor("#4192e3"));    } else {      tvTitle.setTextcolor(color.parsecolor("#262a3b"));    }    //点击Tab切换    vIEw.setonClickListener(new VIEw.OnClickListener() {      @OverrIDe      public voID onClick(VIEw v) {        mVIEwPager.setCurrentItem(position);      }    });    return vIEw;  }  //Tab监听  private voID tabSelectListener() {    mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {      @OverrIDe      public voID onTabSelected(TabLayout.Tab tab) {        changeTabStatus(tab,true);      }      @OverrIDe      public voID onTabUnselected(TabLayout.Tab tab) {        changeTabStatus(tab,false);      }      @OverrIDe      public voID onTabReselected(TabLayout.Tab tab) {      }    });  }  //切换Tab文字是否选中的的颜色  private voID changeTabStatus(TabLayout.Tab tab,boolean selected) {    VIEw vIEw = tab.getCustomVIEw();    if (vIEw == null) {      return;    }    TextVIEw tvTitle = (TextVIEw) vIEw.findVIEwByID(R.ID.ID_tv_Title);    if (selected) {      tvTitle.setTextcolor(color.parsecolor("#4192e3"));    } else {      tvTitle.setTextcolor(color.parsecolor("#262a3b"));    }  }}

Activity 代码：

public class BottomTabLayoutActivity extends AppCompatActivity {  private TabLayout mTabLayout;  private VIEwPager mVIEwPager;  private List<Fragment> mFragmentList;  @OverrIDe  protected voID onCreate(@Nullable Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentVIEw(R.layout.activity_bot_tab_layout);    findVIEw();    initFragmentList();    setVpAdapter();    CustomBottabItem item = CustomBottabItem.create();    item.setContext(this)        .setVIEwPager(mVIEwPager)        .setTabLayout(mTabLayout)        .build();  }  //findVIEwByID  private voID findVIEw() {    mTabLayout = (TabLayout) findVIEwByID(R.ID.ID_tab_layout);    mVIEwPager = (VIEwPager) findVIEwByID(R.ID.ID_vp);  }  //初始化需要的Fragment  private voID initFragmentList() {    mFragmentList = new ArrayList<>();    mFragmentList.add(TabFragment.getInstance("主页"));    mFragmentList.add(TabFragment.getInstance("理财"));    mFragmentList.add(TabFragment.getInstance("添加"));    mFragmentList.add(TabFragment.getInstance("消息"));    mFragmentList.add(TabFragment.getInstance("我的"));  }  //设置VIEwPager的Adapter  private voID setVpAdapter() {    mVIEwPager.setAdapter(new FragmentAdapter(getSupportFragmentManager(),mFragmentList,this));  }}

Activity.xml

<?xml version="1.0" enCoding="utf-8"?><relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"        xmlns:app="http://schemas.androID.com/apk/res-auto"        androID:layout_wIDth="match_parent"        androID:layout_height="match_parent">  <androID.support.design.Widget.TabLayout    androID:ID="@+ID/ID_tab_layout"    androID:layout_wIDth="match_parent"    androID:layout_height="70dp"    androID:layout_alignParentBottom="true"    androID:background="#fff"    androID:fillVIEwport="false"    app:layout_scrollFlags="scroll"    app:tabIndicatorHeight="0dp"    app:tabMode="fixed"    >  </androID.support.design.Widget.TabLayout>  <androID.support.v4.vIEw.VIEwPager    androID:ID="@+ID/ID_vp"    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent"    androID:layout_above="@+ID/ID_tab_layout"    /></relativeLayout>

好了，具体思路、代码就这么多了，其它需要的文件都比较简单，自己添加一下吧。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

您可能感兴趣的文章:Android 仿微信底部渐变Tab效果Android 使用FragmentTabHost实现底部菜单功能Android中修改TabLayout底部导航条Indicator长短的方法Android TabWidget底部显示效果Android编程实现将tab选项卡放在屏幕底部的方法Android中TabLayout+ViewPager 简单实现app底部Tab导航栏Android design包自定义tablayout的底部导航栏的实现方法关注Ionic底部导航按钮tabs在android情况下浮在上面的处理Android仿微信底部实现Tab选项卡切换效果android 选项卡(TabHost)如何放置在屏幕的底部 总结

以上是内存溢出为你收集整理的Android TabLayout 实现底部Tab的示例代码全部内容，希望文章能够帮你解决Android TabLayout 实现底部Tab的示例代码所遇到的程序开发问题。

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