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

前言

在谷歌发布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布局的整个过程，希望对大家的学习有所帮助，也希望大家多多支持。