安卓TabLayout+ViewPager实现切页

安卓使用TabLayout+ViewPager+Fragment 实现页面切换，可实现左右滑动切换视图界面和点击切换

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

一、实现效果：

 

二、实现过程：

2.1 一些重要的设置

 添加必须依赖：

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

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

使用Android Studio3时，此步可能出现问题，请参考下面的升级篇

主布局文件编写：

顶部或者底部显示，只要更改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]);
            }
        }
    }

}

 升级篇

Android Studio3版本：android-studio-ide-191.5900203-windows

依赖修改

implementation 'com.android.support:design:28.0.0'

XML修改：

    <!--
    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填满
    -->

    <com.google.android.material.tabs.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"
        />

       <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        />

导入修改

import com.google.android.material.tabs.TabLayout;
import androidx.viewpager.widget.ViewPager;