Android 使用TabLayout打造滑动标签栏

滑动标签栏在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>

最后附上源码的CSDN和Github地址

CSDN传送门

Github传送门