滑動標籤欄在App中很常見，以前自己試著實現了一個，使用HorizontalScrollView以及跟ViewPager的，現在有了TabLayout方便了很多，先上效果圖，UI略醜，別介意哈~ PS:最下方有原始碼連結

效果圖

**

一、新增依賴

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

二、佈局檔案activity_tablayout.xml

只有一個TabLayout和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="com.liang.tablayoutdemo.TabLayoutActivity"
 
>

    <android.support.design.widget.TabLayout
        android:id="@+id/tl"
        android:layout_width="match_parent"
        android:layout_height="48dp"></android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
 

        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

</LinearLayout>

三、Activity.java程式碼

註釋很詳細了，不多加解釋了：

package com.liang.tablayoutdemo;

import android.os.Bundle;
import android.support.design.widget.TabLayout;
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.widget.TextView;

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

public class TabLayoutActivity extends AppCompatActivity {

    private TabLayout tl;
    private ViewPager vp;

    //當標籤數目小於等於4個時，標籤欄不可滑動
    public static final int MOVABLE_COUNT = 4;

    private int tabCount = 6;
    private List<String> tabs;
    private List<Fragment> fragments;

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

        tl = findViewById(R.id.tl);
        vp = findViewById(R.id.vp);

        initDatas();
        initViewPager();
        initTabLayout();
    }

    private void initTabLayout() {
        //MODE_FIXED標籤欄不可滑動，各個標籤會平分螢幕的寬度
        tl.setTabMode(tabCount <= MOVABLE_COUNT ? TabLayout.MODE_FIXED : TabLayout.MODE_SCROLLABLE);
        //指示條的顏色
        tl.setSelectedTabIndicatorColor(getResources().getColor(android.R.color.holo_blue_dark));
        tl.setSelectedTabIndicatorHeight((int) getResources().getDimension(R.dimen.indicatorHeight));
        //關聯tabLayout和ViewPager,兩者的選擇和滑動狀態會相互影響
        tl.setupWithViewPager(vp);
        //自定義標籤佈局
        for (int i = 0; i < tabs.size(); i++) {
            TabLayout.Tab tab = tl.getTabAt(i);
            TextView tv = (TextView) LayoutInflater.from(this).inflate(R.layout.tabview_main, tl, false);
            tv.setText(tabs.get(i));
            tab.setCustomView(tv);
        }
    }

    private void initViewPager() {
        vp.setAdapter(new MyPagerAdapter(getSupportFragmentManager()));
    }

    private void initDatas() {
        tabs = new ArrayList<>();
        for (int i = 0; i < tabCount; i++) {
            tabs.add("標籤" + i);
        }

        fragments = new ArrayList<>();
        for (int i = 0; i < tabs.size(); i++) {
            fragments.add(TabFragment.newInstance(tabs.get(i)));
        }

    }

    private class MyPagerAdapter extends FragmentPagerAdapter {

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

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

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

        /**
         * 如果不是自定義標籤佈局，需要重寫該方法
         */
//        @Nullable
//        @Override
//        public CharSequence getPageTitle(int position) {
//            return tabs.get(position);
//        }
    }

}

TabFragment的程式碼就不列出來了，很簡單的，想看的就去下載原始碼吧。標籤的佈局檔案列一下好了，就一個TextView而已，tabview_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:drawableLeft="@drawable/icon_sel"
    android:gravity="center"
    android:paddingLeft="20dp"
    android:paddingRight="20dp"
    android:textSize="20sp"
    android:textColor="@drawable/text_sel">

</TextView>