Android之ViewPager+TabLayout组合实现导航条切换效果（微信和QQ底部多标签切换）

前言

之前在另外一篇中用Fragment和button实现了点击切换Fragment的效果，比较简陋。这次改用ViewPager+TabLayout 实现联动的效果。

实现效果

• ViewPager 多个页面滑动
• TabLayout 和 ViewPager绑定，实现Fragment和标签绑定
• TabLayout的自定义标签以及选中颜色改变

效果图

效果图

思路分析

• ViewPager用来放Fragment，并且实现滑动的效果。（原谅我最近才知道这个控件，所以才会有上一篇用Fragment+Button来实现切换。PS：经常百度copy的后遗症┗( T﹏T )┛）
• TabLayout 用来放Fragment对应标题。标题只是文字话，需要重写FragmentPagerAdapter的getPageTitle()方法来获取标题，如果要用图标或者复杂的标题可以用TabLayout的setCustomView()将自定义控件放入Tab中。
• 通过TabLayout的setupWithViewPager()方法来实现TabLayout和ViewPager联动。

布局文件

---

activity_tab_layout_custom_title.xml
主界面布局文件包含一个ViewPager和一个TabLayout

---

cust_tab_title.xml
自定义Tab标题的布局文件包含一个ImageView和一个TextView（图标和文本）。

---

接下来是代码

TabLayoutCustomTitleActivity.java
主Activity文件

import android.graphics.Color;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

import csl.com.fa.adapter.TabLayoutCustomTitleAdapter;
import csl.com.fa.fragment.ContextFragment;

/**
 * TabLaytou和ViewPager联动，自定义标题(icon+文字)
 */
public class TabLayoutCustomTitleActivity extends AppCompatActivity {

    private String[] titleTexts = new String[]{"微信", "通信录", "发现", "我", "QQ", "好友", "黑名单", "特别关心", "朋友圈"};// 标签标题数组
    private int[] titleIcons = new int[]{R.drawable.weixin, R.drawable.tongxunlu, R.drawable.weixin,
            R.drawable.tongxunlu, R.drawable.weixin, R.drawable.tongxunlu, R.drawable.weixin,
            R.drawable.tongxunlu,R.drawable.weixin};// 标签图标数组
    private TabLayout tabLayout;// tabLayout
    private List fragmentList;// Fragment集合
    private ViewPager viewPager;// ViewPager
    private TabLayoutCustomTitleAdapter adapter;
    private final int TAB_SELECT_COLOR = Color.argb(255,72,193,30);// tab选中状态颜色
    private final int TAB_UN_SELECT_COLOR = Color.argb(255,175,175,175);// tab非选中状态颜色

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

        // 初始化控件
        init();
    }

    /**
     * 初始化控件
     */
    private void init() {

        fragmentList = new ArrayList<>();

        // 根据标题的数量，动态创建Fragment，并将其动态加入Fragment集合
        for (String title : titleTexts) {
            // 声明一个Fragment
            ContextFragment contextFragment = new ContextFragment();

            // 声明一个Bundle用来初始化Fragment中TextView控件的文本信息
            Bundle bundle = new Bundle();
            bundle.putString("textValue", title);

            // 将Bundle装入Fragment
            contextFragment.setArguments(bundle);

            // 将Fragment加入Fragment集合
            fragmentList.add(contextFragment);
        }

        // 将Fragment集合装入适配器
        adapter = new TabLayoutCustomTitleAdapter(getSupportFragmentManager(), fragmentList);

        // 初始化ViewPager
        viewPager = findViewById(R.id.contextViewPager);
        // 将适配器绑定到ViewPager
        viewPager.setAdapter(adapter);
        // 默认第一个页面
        viewPager.setCurrentItem(0);

        // 初始化TabLayout
        tabLayout = findViewById(R.id.tabLayout);
        // 将TabLayout与ViewPager绑定，实现TabLayout与ViewPager联动
        tabLayout.setupWithViewPager(viewPager);

        // 自定义tab标签（这里主要是自定义控件，图标+标题）
        // 如果不需要自定义标签，只需要显示文本，则可以直接通过FragmentPagerAdapter的getPageTitle()方法返回标签的值
        setTabCustomView();
    }

    /**
     * 自定义tab标签（这里主要是自定义控件，图标+标题）
     */
    private void setTabCustomView() {

        // 遍历tab标签页标题数组，自定义tab显示
        for (int i=0, len=titleTexts.length; i

---

TabLayoutCustomTitleAdapter.java

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import java.util.List;

public class TabLayoutCustomTitleAdapter extends FragmentPagerAdapter {

    private List mFragmentList;

    public TabLayoutCustomTitleAdapter(FragmentManager fragmentManager, List fragmentList) {
        super(fragmentManager);
        this.mFragmentList = fragmentList;
    }

    @Override
    public Fragment getItem(int position) {
        return mFragmentList.get(position);
    }

    @Override
    public int getCount() {
        return mFragmentList.size();
    }

    /**
     * TabLayout通过该方法，获取tab的标题title
     * @param position
     * @return
     */
    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentList.get(position).getArguments().getString("textValue");
    }
}

总结

嗯，比上次做的那个好看多了，但是感觉这次写的说明的比较不详细，但是又不知道怎么写。。下次想到了再做补充吧。有不清楚的可以留言或者发我邮箱([email protected])。
后续会把demo放到git上，以后会养成分享的好习惯，希望大家多多指教。