TabLayout+ViewPager实现切页的示例代码

安卓使用tablayout+viewpager+fragment 实现页面切换，可实现左右滑动切换视图界面和点击切换

可自定义菜单栏是在顶部还是在底部

一、实现效果：

二、实现过程：

2.1 一些重要的设置

添加必须依赖：

因为需要使用：import android.support.design.widget.tablayout;，所以必须添加下列依赖

compile 'com.android.support:design:23.3.0'

主布局文件编写：

顶部或者底部显示，只要更改viewpager和tablayout排列顺序即可

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:paddingbottom="0dp"
  android:paddingleft="0dp"
  android:paddingright="0dp"
  android:orientation="vertical"
  android:paddingtop="0dp"
  tools:context="com.example.fafa.mainactivity">

  <android.support.v4.view.viewpager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    />
<!--
app:tabindicatorcolor=""  指示器颜色
app:tabindicatorheight="" 指示器高度，设置为0就是没有指示器
app:tabtextcolor=""  tab文本默认颜色
app:tabselectedtextcolor=""   tab文本被选中后的颜色
app:tabtextappearance=""   为tab文本设置样式，一般是需要为tab加图标时使用
app:tabmode="" 只有两个值：fixed、scrollable
其中 fixed用于标题栏少的情况，每个tab可以平分屏幕宽度
其中 scrollable用于标题栏多出屏幕的情况，如果标题栏少的时候用很难看，占不满屏幕
app:tabgravity="center" 整体居中，不可与上共用
app:tabbackground=""  tablayout背景，和android:background=""效果一样
app:tabgravity=""  对齐方式: 居中显示center、fill填满
-->

  <android.support.design.widget.tablayout
    android:id="@+id/tabs2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"

    app:tabmode="fixed"
    app:tabindicatorcolor="@color/colorlv"
    app:tabtextcolor="@android:color/black"
    app:tabselectedtextcolor="@color/colorred"

    />
</linearlayout>

2.2 仅字符菜单栏显示实现：

未加入图片显示，实现较为简单

基本逻辑代码：

每个界面使用不同的fragment，进行一 一对应

import android.support.design.widget.tablayout;
public class mainactivity extends appcompatactivity {
  private viewpager viewpager;
  private tablayout tablayout;
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);


    tablayout = (tablayout) findviewbyid(r.id.tabs2);
    viewpager = (viewpager) findviewbyid(r.id.viewpager);

    //设置界面文件和文字一一对应
    final fragment[] fragments = {new fragment0(), new fragment1(), new fragment2()};
    final string[] titles = {"界面1", "界面2", "界面3"};

 //添加tablayout中的竖线,每一项的中间分隔线
 //linearlayout linearlayout = (linearlayout) tablayout.getchildat(0);
// linearlayout.setshowdividers(linearlayout.show_divider_middle);
// linearlayout.setdividerdrawable(contextcompat.getdrawable(this, r.mipmap.fg));

 //每项只进入一次
 viewpager.setadapter(new fragmentpageradapter(getsupportfragmentmanager()) {
   @override
   public fragment getitem(int position) {
     return fragments[position];
   }
   @override
   public int getcount() {
     return fragments.length;
   }

   @override
   public charsequence getpagetitle(int position) {
     return titles[position];
   }
 });

 tablayout.setupwithviewpager(viewpager);
 tablayout.gettabat(1).select();//设置第一个为选中
  }
}

2.3 字符和图片菜单栏实现

图片加汉字菜单栏，菜单栏每项都是一个视图可以自定义设计

菜单栏每项的布局文件设计：

一个图片显示和一个文字显示，定义为垂直布局，其中android:layout_gravity="center"是把控件居中，这里不写，在菜单栏显示时可能会出现错位

<?xml version="1.0" encoding="utf-8"?>
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:orientation="vertical"
  android:id="@+id/item_view"

  android:layout_height="match_parent">
  <imageview
    android:layout_width="wrap_content"
    android:src="@mipmap/ic_launcher"
    android:id="@+id/item_img"
    android:layout_gravity="center"
    android:layout_height="wrap_content" />
  <textview
    android:layout_width="wrap_content"
    android:text="xxxx"
    android:layout_gravity="center"
    android:id="@+id/item_text"
    android:layout_height="wrap_content" />
</linearlayout>

主布局文件更改：

在主布局文件的<android.support.design.widget.tablayout>更改android:layout_height="70dp"，表示其菜单栏的高度改变。

定义必要的类变量：

private viewpager viewpager;
 private tablayout tablayout;
 //设置界面文件和文字一一对应
 private fragment[] lfragments = {new fragment0(), new fragment1(), new fragment2(),new fragment3()};
 private string[] ltitles = {"界面1", "界面2", "界面3","界面4"};
 //未选中图片
 private int[] limg = {r.mipmap.an1,r.mipmap.an2,r.mipmap.an3,r.mipmap.an4};
 //选中图片
 private int[] limgn = {r.mipmap.ann1,r.mipmap.ann2,r.mipmap.ann3,r.mipmap.ann4};
//配置默认选中第几项
 private int itemwhat=1;

数据初始化及基本界面加载：

//只进入一次，初始化
viewpager.setadapter(new fragmentpageradapter(getsupportfragmentmanager()) {
  @override
  public fragment getitem(int position) {
    return lfragments[position];
  }
  @override
  public int getcount() {
    return lfragments.length;
  }

  @override
  public charsequence getpagetitle(int position) {
    return ltitles[position];
  }
});

//绑定
tablayout.setupwithviewpager(viewpager);

//设置默认选中页，宏定义
tablayout.gettabat(itemwhat).select();
viewpager.setoffscreenpagelimit(3); //设置向左和向右都缓存的页面个数
//初始化菜单栏显示
for (int i = 0; i < tablayout.gettabcount(); i++) {
  //寻找到控件
  view view = layoutinflater.from(mainactivity.this).inflate(r.layout.items, null);
   linearlayout mtabview = (linearlayout) view.findviewbyid(r.id.item_view);
  textview mtabtext = (textview) view.findviewbyid(r.id.item_text);
  imageview mtabicon = (imageview) view.findviewbyid(r.id.item_img);

  mtabtext.settext(ltitles[i]);
  mtabicon.setimageresource(limg[i]);
  //设置不可点击
  // mtabview.setclickable(true);

  //更改选中项样式
  if(i==itemwhat){
    mtabicon.setimageresource(limgn[i]);
    mtabtext.settextcolor(contextcompat.getcolor(this, r.color.colorred));
  }

  //设置样式
  tablayout.gettabat(i).setcustomview(view);
}

监听选择事件：

//是否选中监听
tablayout.setontabselectedlistener(new tablayout.ontabselectedlistener() {
  @override
  public void ontabselected(tablayout.tab tab) {
   //选中时进入，改变样式
    itemselect(tab);
    //ontabselected方法里面调用了viewpager的setcurrentitem 所以要想自定义ontabselectedlistener，也加上mviewpager.setcurrentitem(tab.getposition())就可以了
    viewpager.setcurrentitem(tab.getposition());
  }

  @override
  public void ontabunselected(tablayout.tab tab) {
   //未选中进入，改变样式
    itemnoselect(tab);

  }

  @override
  public void ontabreselected(tablayout.tab tab) {
   //重新选中

  }
});

选中和非选中，更改其中显示样式：

//某个项选中，改变其样式
 private void itemselect(tablayout.tab tab) {
   view customview = tab.getcustomview();
   textview tabtext = (textview) customview.findviewbyid(r.id.item_text);
   imageview tabicon = (imageview) customview.findviewbyid(r.id.item_img);
   tabtext.settextcolor(contextcompat.getcolor(this, r.color.colorred));
   string stitle = tabtext.gettext().tostring();
   for(int i=0;i<ltitles.length;i++){
     if(ltitles[i].equals(stitle)){
       //toast.maketext(mainactivity.this,"xxx+"+i,toast.length_short).show();
       tabicon.setimageresource(limgn[i]);
     }
   }
 }
//某个项非选中，改变其样式
 private void itemnoselect(tablayout.tab tab) {
   view customview = tab.getcustomview();
   textview tabtext = (textview) customview.findviewbyid(r.id.item_text);
   imageview tabicon = (imageview) customview.findviewbyid(r.id.item_img);
   tabtext.settextcolor(contextcompat.getcolor(this, r.color.colorblack));
   string stitle = tabtext.gettext().tostring();
   for(int i=0;i<ltitles.length;i++){
     if(ltitles[i].equals(stitle)){
       tabicon.setimageresource(limg[i]);
     }
   }
 }

整体代码：

import android.support.design.widget.tablayout;
public class mainactivity extends appcompatactivity {
  private viewpager viewpager;
  private tablayout tablayout;
  //设置界面文件和文字一一对应
  private fragment[] lfragments = {new fragment0(), new fragment1(), new fragment2(),new fragment3()};
  private string[] ltitles = {"界面1", "界面2", "界面3","界面4"};
  //未选中图片
  private int[] limg = {r.mipmap.an1,r.mipmap.an2,r.mipmap.an3,r.mipmap.an4};
  //选中图片
  private int[] limgn = {r.mipmap.ann1,r.mipmap.ann2,r.mipmap.ann3,r.mipmap.ann4};
  //配置默认选中第几项
  private int itemwhat=1;
  @override
  protected void oncreate(bundle savedinstancestate) {
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.activity_main);

    //找控件
    tablayout = (tablayout) findviewbyid(r.id.tabs2);
    viewpager = (viewpager) findviewbyid(r.id.viewpager);

    //添加tablayout中的竖线,每一项的中间分隔线
    //linearlayout linearlayout = (linearlayout) tablayout.getchildat(0);
    // linearlayout.setshowdividers(linearlayout.show_divider_middle);
    // linearlayout.setdividerdrawable(contextcompat.getdrawable(this, r.mipmap.fg));

    //只进入一次，初始化
    viewpager.setadapter(new fragmentpageradapter(getsupportfragmentmanager()) {
      @override
      public fragment getitem(int position) {
        return lfragments[position];
      }
      @override
      public int getcount() {
        return lfragments.length;
      }

      @override
      public charsequence getpagetitle(int position) {
        return ltitles[position];
      }
    });

    //绑定
    tablayout.setupwithviewpager(viewpager);

    //设置默认选中页，宏定义
    tablayout.gettabat(itemwhat).select();
    viewpager.setoffscreenpagelimit(3); //设置向左和向右都缓存的页面个数
    //初始化菜单栏显示
    for (int i = 0; i < tablayout.gettabcount(); i++) {
      //寻找到控件
      view view = layoutinflater.from(mainactivity.this).inflate(r.layout.items, null);
       linearlayout mtabview = (linearlayout) view.findviewbyid(r.id.item_view);
      textview mtabtext = (textview) view.findviewbyid(r.id.item_text);
      imageview mtabicon = (imageview) view.findviewbyid(r.id.item_img);

      mtabtext.settext(ltitles[i]);
      mtabicon.setimageresource(limg[i]);
      //设置不可点击
      // mtabview.setclickable(true);

      //更改选中项样式
      if(i==itemwhat){
        mtabicon.setimageresource(limgn[i]);
        mtabtext.settextcolor(contextcompat.getcolor(this, r.color.colorred));
      }

      //设置样式
      tablayout.gettabat(i).setcustomview(view);
    }
    //是否选中监听
    tablayout.setontabselectedlistener(new tablayout.ontabselectedlistener() {
      @override
      public void ontabselected(tablayout.tab tab) {
       //选中时进入，改变样式
        itemselect(tab);
        //ontabselected方法里面调用了viewpager的setcurrentitem 所以要想自定义ontabselectedlistener，也加上mviewpager.setcurrentitem(tab.getposition())就可以了
        viewpager.setcurrentitem(tab.getposition());
      }
      @override
      public void ontabunselected(tablayout.tab tab) {
       //未选中进入，改变样式
        itemnoselect(tab);
      }
      @override
      public void ontabreselected(tablayout.tab tab) {
       //重新选中

      }
    });}
  //某个项选中，改变其样式
  private void itemselect(tablayout.tab tab) {
    view customview = tab.getcustomview();
    textview tabtext = (textview) customview.findviewbyid(r.id.item_text);
    imageview tabicon = (imageview) customview.findviewbyid(r.id.item_img);
    tabtext.settextcolor(contextcompat.getcolor(this, r.color.colorred));
    string stitle = tabtext.gettext().tostring();
    for(int i=0;i<ltitles.length;i++){
      if(ltitles[i].equals(stitle)){
        //toast.maketext(mainactivity.this,"xxx+"+i,toast.length_short).show();
        tabicon.setimageresource(limgn[i]);
      }
    }
  }
  //某个项非选中，改变其样式
  private void itemnoselect(tablayout.tab tab) {
    view customview = tab.getcustomview();
    textview tabtext = (textview) customview.findviewbyid(r.id.item_text);
    imageview tabicon = (imageview) customview.findviewbyid(r.id.item_img);
    tabtext.settextcolor(contextcompat.getcolor(this, r.color.colorblack));
    string stitle = tabtext.gettext().tostring();
    for(int i=0;i<ltitles.length;i++){
      if(ltitles[i].equals(stitle)){
        tabicon.setimageresource(limg[i]);
      }
    }
  }

}

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