XTabLayout

XTabLayout是在TabLayout的基础上，进一步优化，实现了TayLayout不能实现的，切换导航，变换字体的颜色和大小。

先给大家看一下效果图再说：

通过这几张图片可以看到，切换导航的时候，Tab的字体颜色和大小随着操作的变换而变化。

首先：：在Build.gradle中添加依赖：

compile 'com.androidkun:XTabLayout:1.0.6'

注意：如果要导入依赖，我们Android studio的最小API必须是16以上，否则报错。

android {
    compileSdkVersion 26
    buildToolsVersion "26.0.0"
    defaultConfig {
        applicationId "com.xtablayout"
        minSdkVersion 16
        targetSdkVersion 26
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

然后：

我们开始布局：如下：

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:background="@color/hlcz_yudu_zhiku_white"
        android:gravity="center"
        >
        <com.androidkun.xtablayout.XTabLayout
            android:id="@+id/xtablayout"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:background="@color/hlcz_yudu_zhiku_white"
            app:xTabTextColor="@color/hlcz_yudu_zhiku_daohang_nomarl"
            app:xTabSelectedTextColor="@color/hlcz_yudu_zhiku_daohang_down"
            app:xTabTextSize="16sp"
            app:xTabSelectedTextSize="20sp"
            />
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/viewpager"></android.support.v4.view.ViewPager>
</LinearLayout>

我们的MainActivity中的代码如下：：

package com.xtablayout;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;

import com.androidkun.xtablayout.XTabLayout;
import com.xtablayout.fragment.Fragment_1;
import com.xtablayout.fragment.Fragment_2;
import com.xtablayout.fragment.Fragment_3;
import com.xtablayout.fragment.Fragment_4;
import com.xtablayout.fragment.Fragment_5;

import java.util.ArrayList;

public class MainActivity extends FragmentActivity {

    private XTabLayout xtablayout;
    private ViewPager viewpager;

    ArrayList<String> tabtitle=new ArrayList<String>();
    ArrayList<Fragment> frag_list=new ArrayList<Fragment>();

    private ViewPager_Adapter adapter;

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

        xtablayout = findViewById(R.id.xtablayout);
        viewpager = findViewById(R.id.viewpager);

        //设置tablayout为滑动模式
        xtablayout.setTabMode(TabLayout.MODE_SCROLLABLE);
        //设置滑动条的颜色
        xtablayout.setSelectedTabIndicatorColor(getResources().getColor(R.color.hlcz_yudu_zhiku_white));

        //设置头部导航的颜色
        addtitle();
        //添加图片
        addImages();

        //设置适配器
        adapter = new ViewPager_Adapter(getSupportFragmentManager(),frag_list,tabtitle);
        viewpager.setAdapter(adapter);
        //给tablayout设置viewpager
        xtablayout.setupWithViewPager(viewpager);

        //ViewPager页面变换监听
        viewpager.addOnPageChangeListener(new XTabLayout.TabLayoutOnPageChangeListener(xtablayout));
        xtablayout.setOnTabSelectedListener(new XTabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(XTabLayout.Tab tab) {
                viewpager.setCurrentItem(tab.getPosition());
            }
            @Override
            public void onTabUnselected(XTabLayout.Tab tab) {
            }
            @Override
            public void onTabReselected(XTabLayout.Tab tab) {
            }
        });
    }

    /**
     * 添加切换的图片地址
     */
    private void addImages() {
        frag_list.clear();
        Fragment_1 fragment1=new Fragment_1();
        Fragment_2 fragment2=new Fragment_2();
        Fragment_3 fragment3=new Fragment_3();
        Fragment_4 fragment4=new Fragment_4();
        Fragment_5 fragment5=new Fragment_5();
        frag_list.add(fragment1);
        frag_list.add(fragment2);
        frag_list.add(fragment3);
        frag_list.add(fragment4);
        frag_list.add(fragment5);
    }

    /**
     * 添加导航
     */
    private void addtitle() {
        tabtitle.clear();
        xtablayout.addTab(xtablayout.newTab().setText("TAB1"));
        xtablayout.addTab(xtablayout.newTab().setText("TAB2"));
        xtablayout.addTab(xtablayout.newTab().setText("TAB3"));
        xtablayout.addTab(xtablayout.newTab().setText("TAB4"));
        xtablayout.addTab(xtablayout.newTab().setText("TAB5"));

        tabtitle.add("TAB1");
        tabtitle.add("TAB2");
        tabtitle.add("TAB3");
        tabtitle.add("TAB4");
        tabtitle.add("TAB5");
    }
}

ViewPager的适配器也很重要

package com.xtablayout;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.view.ViewGroup;

import java.util.ArrayList;

/**
 * Created by idea on 2017/7/11.
 */

public class ViewPager_Adapter extends FragmentStatePagerAdapter {
    ArrayList<Fragment> frag_list;
    ArrayList<String> tabtitle;
    public ViewPager_Adapter(FragmentManager fm,ArrayList<Fragment> frag_list,ArrayList<String> tabtitle){
        super(fm);
        this.frag_list=frag_list;
        this.tabtitle=tabtitle;

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        return tabtitle.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {

    }
}

在这里，Fragment的代码我就不帖了，这是主要代码，就OK了

简单的Demo点击这里