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

程序员文章站 2022-03-23 13:49:13

安卓使用tablayout+viewpager+fragment 实现页面切换，可实现左右滑动切换视图界面和点击切换可自定义菜单栏是在顶部还是在底部一、实现效果：...

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

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

一、实现效果：

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

二、实现过程：

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 仅字符菜单栏显示实现：

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

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

基本逻辑代码：

每个界面使用不同的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 字符和图片菜单栏实现

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

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

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

一个图片显示和一个文字显示，定义为垂直布局，其中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]);
      }
    }
  }

}

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

上一篇： kotlin项目加入Glide图片加载库并使用GlideApp的方法

下一篇： andriod如何搭建自己的轮询框架

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

用java实现杨辉三角的示例代码

Java实现滑动验证码的示例代码

iOS三级联动选择器的实现代码示例

iOS 中weak的实现代码示例

iOS实现爆炸的粒子效果示例代码

Android实现双击TitleBar回顶部的功能示例代码

Android强制下线功能实现的代码示例

iOS实现动态的开屏广告示例代码

android实现定位与目的地的导航示例代码

Java代码实现对properties文件有序的读写的示例