Tablayout 自定义Indicator的宽度

1.有关TabLayout的使用网上有很多，关于其只是其宽度的问题目前主流的有以下几种：

1.1利用反射，相关地址，在某些机型有问题，https://blog.csdn.net/u013134391/article/details/70833903；

1.2还有一种也是根据tabTitlte文字的宽度，进行变换指示器的宽度，其相关链接https://stackoverflow.com/questions/40480675/android-tab-layout-wrap-tab-indicator-width-with-respect-to-tab-title

2.这个都不符合我的需求，做类似的效果,如下，要解决的问题是将指示器宽度固定，并且位于灰色线上方，在这里需要注意，不能给tablayout设置样式，如果设置样式，会造成自定义指示器始终与灰色分割线有一定的距离。

这种做法的缺点是指示器没有动画

 

1.首先定义布局tablayout

<?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"
    android:background="#ffffff"
    tools:context=".MainActivity">

   <android.support.design.widget.TabLayout
       android:id="@+id/tab"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:tabIndicatorHeight="0dp"
       android:background="#fff"
       app:tabMode="fixed"
       app:tabGravity="center"/>
    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/line_color"/>
    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

2.自定义tablayout布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools">

    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TAB"
        android:layout_centerInParent="true"
        android:textColor="@color/colorPrimary"
        android:textSize="16sp"
        />
    <View
        android:id="@+id/tab_indicator"
        android:layout_width="20dp"
        android:layout_height="4dp"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        />

</RelativeLayout>

3.activity

package com.example.tablayout;

import android.graphics.Typeface;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

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

public class MainActivity extends AppCompatActivity implements TabLayout.BaseOnTabSelectedListener {

    private TabLayout mTab;
    private ViewPager mVp;
    private Fragment[] mFragment;
    private String[] titles =new String[] {"日历", "资讯"};
    private TabAdapter mAdapter;
    private int currentPos = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTab = findViewById(R.id.tab);
        mVp = findViewById(R.id.vp);
        initFragments();
        mAdapter = new TabAdapter(getSupportFragmentManager(), this, titles, mFragment);
        mVp.setAdapter(mAdapter);
        mTab.setupWithViewPager(mVp);
        for (int i = 0; i < mTab.getTabCount(); i++) {
            TabLayout.Tab tab = mTab.getTabAt(i);
            Objects.requireNonNull(tab).setCustomView(mAdapter.getTabView(i, currentPos));
        }
        mTab.addOnTabSelectedListener(this);
    }

    private void initFragments() {
        mFragment = new Fragment[]{FirstFragment.newInstance(), SecondFragment.newInstance()};
    }

    @Override
    public void onTabSelected(TabLayout.Tab tab) {
        mVp.setCurrentItem(tab.getPosition(), true);
        ((TextView) Objects.requireNonNull(tab.getCustomView()).findViewById(R.id.tab_title)).setTextColor(ContextCompat.getColor(this, R.color.colorPrimaryDark));
        tab.getCustomView().findViewById(R.id.tab_indicator).setVisibility(View.VISIBLE);
        ((TextView) Objects.requireNonNull(tab.getCustomView()).findViewById(R.id.tab_title)).setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
        tab.getCustomView().findViewById(R.id.tab_indicator).setBackgroundColor(ContextCompat.getColor(this, R.color.colorPrimary));
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        ((TextView) Objects.requireNonNull(tab.getCustomView()).findViewById(R.id.tab_title)).setTextColor(ContextCompat.getColor(this, R.color.untab_color));
        ((TextView) Objects.requireNonNull(tab.getCustomView()).findViewById(R.id.tab_title)).setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
        tab.getCustomView().findViewById(R.id.tab_indicator).setVisibility(View.INVISIBLE);
    }

    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }
}

4.pagerAdapter的代码如下：

package com.example.tablayout;

import android.content.Context;
import android.graphics.Typeface;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.content.ContextCompat;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TextView;

public class TabAdapter extends FragmentPagerAdapter {

    private Context mContext;

    private String[] titles;

    private Fragment[] fragments;

    public TabAdapter(FragmentManager fm,Context context,String[]titles,Fragment[]fragments) {
        super(fm);
        this.mContext=context;
        this.titles=titles;
        this.fragments=fragments;
    }


    @Override
    public Fragment getItem(int i) {
        return fragments[i];
    }

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

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

    public View getTabView(int position,int currentPosition){
        View tabView = LayoutInflater.from(mContext).inflate(R.layout.tabview, null);
        TextView tabTitle = tabView.findViewById(R.id.tab_title);
        tabTitle.setText(getPageTitle(position));
        View tabIndicator=tabView.findViewById(R.id.tab_indicator);
        if (position == currentPosition) {
            tabTitle.setTextColor(ContextCompat.getColor(mContext, R.color.colorPrimary));
            tabTitle.setTypeface(Typeface.defaultFromStyle(Typeface.BOLD));
            tabIndicator.setBackgroundColor(ContextCompat.getColor(mContext,R.color.colorPrimary));
            tabIndicator.setVisibility(View.VISIBLE);
        } else {
            tabTitle.setTypeface(Typeface.defaultFromStyle(Typeface.NORMAL));
            tabIndicator.setVisibility(View.INVISIBLE);
        }
        return tabView;
    }
}

5.对于Fragment创建创建空白面板即可，运行的效果图如下

如有错误不足的地方，还望各位大佬指出