Android中TabLayout+ViewPager 简单实现app底部Tab导航栏

概述前言在谷歌发布AndroidDesignSupportLibrary之前，app底部tab布局的实现方法就有很多种，其中有RadioGroup+FrameLayout、TabHost+Fragment、FragmentPagerAdapter+ViewPager等方法，虽然这些方法虽然能达到同样的效

前言

在谷歌发布AndroID Design Support library之前，app底部tab布局的实现方法就有很多种，其中有RadioGroup+FrameLayout、TabHost+Fragment、FragmentPagerAdapter+VIEwPager等方法，虽然这些方法虽然能达到同样的效果，但我个人总觉得有些繁琐。然而，Google在2015的IO大会上，给开发者们带来了全新的AndroID Design Support library，里面包含了许多新控件，这些新控件有许多是把以前的一些第三方开源库官方化，实现起来更为简便，简直是开发者的福音。其中的TabLayout控件让我想到了app底部的tab布局，而且TabLayout用法更加简单，为何不试试用TabLayout实现简单的实现呢？好了，话不多说，先看看效果：

是不是和以前的方法实现的效果一样呢？下面我们来看看怎么简单实现。

过程

因为TabLayout和VIEwPager分别是属于design和v4包下的，所以我们先在app的build.gradle中添加：

compile 'com.androID.support:design:23.1.1'compile 'com.androID.support:support-v4:23.1.1'

然后在主布局文件activity_main.xml中添加布局控件：

<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" xmlns:tools="http://schemas.androID.com/tools" xmlns:app="http://schemas.androID.com/apk/res-auto" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:orIEntation="vertical" tools:context=".MainActivity"> <androID.support.v4.vIEw.VIEwPager  androID:ID="@+ID/vIEwPager"  androID:layout_wIDth="match_parent"  androID:layout_height="0dp"  androID:layout_weight="1"  androID:scrollbars="none"> </androID.support.v4.vIEw.VIEwPager> <androID.support.design.Widget.TabLayout  androID:ID="@+ID/tabLayout"  androID:layout_wIDth="match_parent"  androID:layout_height="50dp"  app:tabGravity="fill"  app:tabIndicatorHeight="0dp"  app:tabMode="fixed"  app:tabSelectedTextcolor="#FF4081"  app:tabTextcolor="#000"> </androID.support.design.Widget.TabLayout></linearLayout>

就仅一个VIEwPager和TabLayout就可以实现，是不是比以前的方法繁琐的布局简便很多？上面TabLayout中app:tabIndicatorHeight="0dp"是为了不显示tab底部的横线，app:tabMode="fixed"是让底部tab布局不可滑动。

接下来就和往常一样在MainActivity.java中初始化布局，设置适配器：

 private voID initVIEws() {  mTablayout= (TabLayout) findVIEwByID(R.ID.tabLayout);  mVIEwPager= (VIEwPager) findVIEwByID(R.ID.vIEwPager);  mVIEwPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {   private String[] mTitles = new String[]{"唐僧","大师兄","二师兄","沙师弟"};   @OverrIDe   public Fragment getItem(int position) {    if (position == 1) {     return new TwoFragment();    } else if (position == 2) {     return new ThreeFragment();    }else if (position==3){     return new FourFragment();    }    return new OneFragment();   }   @OverrIDe   public int getCount() {    return mTitles.length;   }   @OverrIDe   public CharSequence getPageTitle(int position) {    return mTitles[position];   }  });  mTablayout.setupWithVIEwPager(mVIEwPager);  one = mTablayout.getTabAt(0);  two = mTablayout.getTabAt(1);  three = mTablayout.getTabAt(2);  four = mTablayout.getTabAt(3);  one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));  two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));  three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));  four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher)); }

上面要注意的地方是别忘了在FragmentPagerAdapter中手动添加：

   @OverrIDe   public CharSequence getPageTitle(int position) {    return mTitles[position];   }

不然不显示底部的文字。

mTablayout.setupWithVIEwPager(mVIEwPager);将TabLayout和VIEwPager关联起来。

one = mTablayout.getTabAt(0);获取底部单个tab，用来添加初始化图片，注意下标都是从0开始的。

初始化监听事件

 private voID initEvents() {  mTablayout.setonTabSelectedListener(new TabLayout.OnTabSelectedListener() {   @OverrIDe   public voID onTabSelected(TabLayout.Tab tab) {    if (tab == mTablayout.getTabAt(0)) {     one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mVIEwPager.setCurrentItem(0);    } else if (tab == mTablayout.getTabAt(1)) {     two.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mVIEwPager.setCurrentItem(1);    } else if (tab == mTablayout.getTabAt(2)) {     three.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mVIEwPager.setCurrentItem(2);    }else if (tab == mTablayout.getTabAt(3)){     four.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mVIEwPager.setCurrentItem(3);    }   }   @OverrIDe   public voID onTabUnselected(TabLayout.Tab tab) {    if (tab == mTablayout.getTabAt(0)) {     one.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    } else if (tab == mTablayout.getTabAt(1)) {     two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    } else if (tab == mTablayout.getTabAt(2)) {     three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    }else if (tab == mTablayout.getTabAt(3)){     four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    }   }   @OverrIDe   public voID onTabReselected(TabLayout.Tab tab) {   }  }); }

在onTabSelected中设置选中tab时切换的图片，onTabUnselected中设置没有被选中时的图片。别忘了mVIEwPager.setCurrentItem(0);这句，这是用来点击tab时切换VIEwPager，如果不加这一句的话滑动VIEwPager底部tab可以切换，但是点击tab而VIEwPager不会切换。

Fragment中的简单布局

fragment_one.xml

<?xml version="1.0" enCoding="utf-8"?><linearLayout xmlns:androID="http://schemas.androID.com/apk/res/androID" androID:layout_wIDth="match_parent" androID:layout_height="match_parent" androID:orIEntation="vertical"> <TextVIEw  androID:layout_wIDth="wrap_content"  androID:layout_height="wrap_content"  androID:text="唐僧"  androID:layout_margintop="100dp"  androID:layout_gravity="center"  androID:textSize="30sp"/></linearLayout>

OneFragment.java

public class OneFragment extends Fragment{ @Nullable @OverrIDe public VIEw onCreateVIEw(LayoutInflater inflater,VIEwGroup container,Bundle savedInstanceState) {  return inflater.inflate(R.layout.fragment_one,container,false); } @OverrIDe public voID onVIEwCreated(VIEw vIEw,@Nullable Bundle savedInstanceState) {  super.onVIEwCreated(vIEw,savedInstanceState); }}

MainActivity.java完整代码：

public class MainActivity extends AppCompatActivity { private TabLayout mTablayout; private VIEwPager mVIEwPager; private TabLayout.Tab one; private TabLayout.Tab two; private TabLayout.Tab three; private TabLayout.Tab four; @OverrIDe protected voID onCreate(Bundle savedInstanceState) {  super.onCreate(savedInstanceState);  setContentVIEw(R.layout.activity_main);  initVIEws();  initEvents(); } private voID initEvents() {  mTablayout.setonTabSelectedListener(new TabLayout.OnTabSelectedListener() {   @OverrIDe   public voID onTabSelected(TabLayout.Tab tab) {    if (tab == mTablayout.getTabAt(0)) {     one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mVIEwPager.setCurrentItem(0);    } else if (tab == mTablayout.getTabAt(1)) {     two.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mVIEwPager.setCurrentItem(1);    } else if (tab == mTablayout.getTabAt(2)) {     three.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mVIEwPager.setCurrentItem(2);    }else if (tab == mTablayout.getTabAt(3)){     four.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));     mVIEwPager.setCurrentItem(3);    }   }   @OverrIDe   public voID onTabUnselected(TabLayout.Tab tab) {    if (tab == mTablayout.getTabAt(0)) {     one.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    } else if (tab == mTablayout.getTabAt(1)) {     two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    } else if (tab == mTablayout.getTabAt(2)) {     three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    }else if (tab == mTablayout.getTabAt(3)){     four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));    }   }   @OverrIDe   public voID onTabReselected(TabLayout.Tab tab) {   }  }); } private voID initVIEws() {  mTablayout= (TabLayout) findVIEwByID(R.ID.tabLayout);  mVIEwPager= (VIEwPager) findVIEwByID(R.ID.vIEwPager);  mVIEwPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {   private String[] mTitles = new String[]{"唐僧","沙师弟"};   @OverrIDe   public Fragment getItem(int position) {    if (position == 1) {     return new TwoFragment();    } else if (position == 2) {     return new ThreeFragment();    }else if (position==3){     return new FourFragment();    }    return new OneFragment();   }   @OverrIDe   public int getCount() {    return mTitles.length;   }   @OverrIDe   public CharSequence getPageTitle(int position) {    return mTitles[position];   }  });  mTablayout.setupWithVIEwPager(mVIEwPager);  one = mTablayout.getTabAt(0);  two = mTablayout.getTabAt(1);  three = mTablayout.getTabAt(2);  four = mTablayout.getTabAt(3);  one.setIcon(getResources().getDrawable(R.drawable.ic_favorite_black_18dp));  two.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));  three.setIcon(getResources().getDrawable(R.mipmap.ic_launcher));  four.setIcon(getResources().getDrawable(R.mipmap.ic_launcher)); }}

结束语

以上就是简单用TabLayout+VIEwPager实现app底部Tab布局的整个过程，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android中TabLayout+ViewPager 简单实现app底部Tab导航栏全部内容，希望文章能够帮你解决Android中TabLayout+ViewPager 简单实现app底部Tab导航栏所遇到的程序开发问题。

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