TabLayout+Fragment实现底部导航栏（二）与ViewPager相结合

XC_main

于 2019-03-22 11:56:11 发布

阅读量282

点赞数

分类专栏： Android 文章标签： TabLayout ViewPager 底部导航栏

本文链接：https://blog.csdn.net/XC_main/article/details/88734997

版权

Android 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

上篇文章记录了TabLayout不与ViewPager结合的使用方法，该篇文章将介绍如何与ViewPager相结合使用！

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".TabLayoutActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </android.support.v4.view.ViewPager>

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabBackground="@android:color/transparent"
        app:tabIndicatorHeight="0dp"
        app:tabMode="fixed">

    </android.support.design.widget.TabLayout>

</LinearLayout>

activity代码

package com.matrix.navigation;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.design.widget.TabLayout.OnTabSelectedListener;
import android.support.design.widget.TabLayout.Tab;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.matrix.navigation.fragment.CaseFragment;
import com.matrix.navigation.fragment.ClassificationFragment;
import com.matrix.navigation.fragment.HomeFragment;
import com.matrix.navigation.fragment.SettingFragment;

/**
 * <p> 描述：TabLayout与ViewPager相结合</p>
 * <p> 作者：xc </p>
 * <p> 时间：3/15 2019 </p>
 */
public class TabLayoutActivity extends AppCompatActivity {

    private Fragment mHomeFragment = new HomeFragment();
    private Fragment mClassificationFragment = new ClassificationFragment();
    private Fragment mCaseFragment = new CaseFragment();
    private Fragment mSettingFragment = new SettingFragment();
    private Fragment[] mFragments = new Fragment[]{mHomeFragment, mClassificationFragment,
            mCaseFragment, mSettingFragment};
    private String[] tabs = new String[]{"首页", "分类", "案例", "设置"};
    private int[] tabImgSelector = new int[]{R.drawable.tab_home_selector, R.drawable.tab_classification_selector,
            R.drawable.tab_case_selector, R.drawable.tab_setting_selector};
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private Adapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        initView();
    }

    /**
     * 初始化TabLayout
     */
    private void initView() {
        mViewPager = findViewById(R.id.view_pager);
        mTabLayout = findViewById(R.id.tab_layout);

        mAdapter = new Adapter(getSupportFragmentManager());
        mViewPager.setAdapter(mAdapter);
        mTabLayout.setupWithViewPager(mViewPager);

        // 添加tab到容器中
        for (int i = 0; i < 4; i++) {
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            //添加自定义的布局
            tab.setCustomView(mAdapter.getCustomView(i));
            //这里是初始化时，默认item0被选中，setSelected（true）是为了给图片和文字设置选中效果
            if (i == 0) {
                (tab.getCustomView().findViewById(R.id.tab_image)).setSelected(true);
                (tab.getCustomView().findViewById(R.id.tab_title)).setSelected(true);
            }
        }

        mTabLayout.addOnTabSelectedListener(new OnTabSelectedListener() {
            @Override
            public void onTabSelected(Tab tab) {
                int position = tab.getPosition();
                mViewPager.setCurrentItem(position);
            }

            @Override
            public void onTabUnselected(Tab tab) {

            }

            @Override
            public void onTabReselected(Tab tab) {

            }
        });
    }

    class Adapter extends FragmentPagerAdapter {

        public Adapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragments[position];
        }

        @Override
        public int getCount() {
            return mFragments.length;
        }

        //自定义的布局item_tab
        public View getCustomView(int position) {
            View view = LayoutInflater.from(TabLayoutThreeActivity.this).inflate(R.layout.item_tab, null);
            ImageView iv = view.findViewById(R.id.tab_image);
            TextView tv = view.findViewById(R.id.tab_title);
            iv.setImageResource(tabImgSelector[position]);
            tv.setText(tabs[position]);
            return view;
        }
    }
}

其中setupWithViewPager方法是将TabLayout与ViewPager进行绑定。效果图：

注意：这里是通过自定义view来实现tab的，包含了图片和文字。其颜色的控制和上篇一样，均通过selector来控制。如果你的tab中只有文字的话，还可以使用下面这种方式。

package com.matrix.navigation;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.TabLayout;
import android.support.design.widget.TabLayout.OnTabSelectedListener;
import android.support.design.widget.TabLayout.Tab;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

import com.matrix.navigation.fragment.CaseFragment;
import com.matrix.navigation.fragment.ClassificationFragment;
import com.matrix.navigation.fragment.HomeFragment;
import com.matrix.navigation.fragment.SettingFragment;

/**
 * <p> 描述：TabLayout与ViewPager相结合</p>
 * <p> 作者：xc </p>
 * <p> 时间：3/15 2019 </p>
 */
public class TabLayoutActivity extends AppCompatActivity {

    private Fragment mHomeFragment = new HomeFragment();
    private Fragment mClassificationFragment = new ClassificationFragment();
    private Fragment mCaseFragment = new CaseFragment();
    private Fragment mSettingFragment = new SettingFragment();
    private Fragment[] mFragments = new Fragment[]{mHomeFragment, mClassificationFragment,
            mCaseFragment, mSettingFragment};
    private String[] tabs = new String[]{"首页", "分类", "案例", "设置"};
    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private Adapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);
        initView();
    }

    /**
     * 初始化TabLayout
     */
    private void initView() {
        mViewPager = findViewById(R.id.view_pager);
        mTabLayout = findViewById(R.id.tab_layout);

        mAdapter = new Adapter(getSupportFragmentManager());
        mViewPager.setAdapter(mAdapter);
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.addOnTabSelectedListener(new OnTabSelectedListener() {
            @Override
            public void onTabSelected(Tab tab) {
                int position = tab.getPosition();
                mViewPager.setCurrentItem(position);
            }

            @Override
            public void onTabUnselected(Tab tab) {

            }

            @Override
            public void onTabReselected(Tab tab) {

            }
        });

        // 设置默认选中的tab
        mTabLayout.getTabAt(0).select();
    }

    class Adapter extends FragmentPagerAdapter {

        public Adapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return mFragments[position];
        }

        @Override
        public int getCount() {
            return mFragments.length;
        }

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return tabs[position];
        }
    }
}

重点是通过重写FragmentPagerAdapter中的getPageTitle方法，来设置tab。在这种情况下，文字的大小和颜色改变就得通过tabTextAppearance、tabSelectedTextColor、tabTextColor属性来控制了。效果图：