TabLayout选中更改标签字体大小及颜色

由于最近要使用TabLayout加载顶部导航栏，但是产品需求是将我们选中的标签变大，上网找了一下，发现TabLayout中除了XML中可以设置字体大小之外，其他没有啥API能更改

字体大小，，

这个是在XML中设置字体大小，但是我们想要的是在代码中设置，所以，我在网上查找资料的时候，发现了可以自定义TabLayout上的标签，也就是说，可以设置图片加文字，或者仅文字，接下来就开始粘代码：

首先用TabLayout用的依赖：

compile 'com.android.support:design:27.0.1'

 

XML中的代码：

 

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_id"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:isScrollContainer="true"
            app:tabBackground="@android:color/white"
            app:tabContentStart="0dp"
            app:tabGravity="center"
            app:tabIndicatorHeight="0dp"
            app:tabMaxWidth="@dimen/dp_200"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@color/color_f9050d"
            app:tabTextColor="@color/color_FF000000">

        </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager
        android:layout_below="@id/view_horizontal"
        android:id="@+id/No_scroll"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

</RelativeLayout>

 

 

我们自定义标签的布局XML：这里面就写了一个TextView

 

 

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

    <TextView
        android:id="@+id/tv_tab"
        android:text="sss"
        android:textColor="@drawable/tab_textattr"
        android:layout_gravity="center"
        android:textSize="@dimen/sp_17"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

这是主方法中的代码：

public class ChoiceFragment extends Fragment {

    @BindView(R.id.tab_id)
    TabLayout tabId;
    @BindView(R.id.No_scroll)
    ViewPager noScroll;
    Unbinder unbinder;
    private View view;
    //添加数据
    private List<DataBean> mStrings;

    //添加Fragment
    private List<Fragment> mFragments;

    //设置title和Fragment的适配器
    private TabFragmentAdapter mTabFragmentAdapter;

    //自定义视图的全局变量
    private TextView tv_tab;

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        view = inflater.inflate(R.layout.fragment_choice, null);
        unbinder = ButterKnife.bind(this, view);
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        //定义保存的顶部数据和Fragment
        mStrings = new ArrayList<>();
        mFragments = new ArrayList<>();

        //设置初始化数据
        initSet();
        //设置Fragment
        initEvent();
        //设置点击
        initClick();
    }

    /**
     * 设置tableLayout的点击监听事件
     */
    private void initClick() {

        tabId.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //定义方法，判断是否选中
                updateTabView(tab, true);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                //定义方法，判断是否选中
                updateTabView(tab, false);
            }

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

    /**
     *  用来改变tabLayout选中后的字体大小及颜色
     * @param tab
     * @param isSelect
     */
    private void updateTabView(TabLayout.Tab tab, boolean isSelect) {
        //找到自定义视图的控件ID
        tv_tab = (TextView) tab.getCustomView().findViewById(R.id.tv_tab);
        if(isSelect) {
            //设置标签选中
            tv_tab.setSelected(true);
            //选中后字体变大
            tv_tab.setTextSize(TypedValue.COMPLEX_UNIT_PX,ResourcesUtils.getResource().getDimensionPixelSize(R.dimen.sp_28));

        }else{
            //设置标签取消选中
            tv_tab.setSelected(false);
            //恢复为默认字体大小
            tv_tab.setTextSize(TypedValue.COMPLEX_UNIT_PX,ResourcesUtils.getResource().getDimensionPixelSize(R.dimen.sp_17));

        }
    }

    /**
     * 设置顶部标签数据
     */
    private void initSet() {
        //判断当前集合是否为空
//        if(mStrings.size()!=0||!mStrings.isEmpty()){
//            mStrings.clear();
//        }
        //添加数据（数据你自己随便填几个就行~）
        mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_recommend), ResourcesUtils.getString(R.string.title_recommend_ztid), ResourcesUtils.getString(R.string.title_social_type)));
        mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_social), ResourcesUtils.getString(R.string.title_social_ztid), ResourcesUtils.getString(R.string.title_social_type)));
        mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_video), ResourcesUtils.getString(R.string.title_video_ztid), ResourcesUtils.getString(R.string.title_video_type)));
        mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_talking), ResourcesUtils.getString(R.string.title_talking_ztid), ResourcesUtils.getString(R.string.title_talking_type)));
        mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_life), ResourcesUtils.getString(R.string.title_life_ztid), ResourcesUtils.getString(R.string.title_life_type)));
        mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_story), ResourcesUtils.getString(R.string.title_story_ztid), ResourcesUtils.getString(R.string.title_story_type)));
        mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_phone), ResourcesUtils.getString(R.string.title_phone_ztid), ResourcesUtils.getString(R.string.title_phone_type)));
        mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_rumour), ResourcesUtils.getString(R.string.title_rumour_ztid), ResourcesUtils.getString(R.string.title_rumour_type)));
        //设置数据
        setTitlte(mStrings);
    }

    /**
     * 销毁页面
     */
    @Override
    public void onDestroyView() {
        super.onDestroyView();
        unbinder.unbind();
    }

    /**
     * 设置顶部数据
     * @param list
     */
    private void setTitlte(List<DataBean> list) {
        //循环结合数据，判断不同标签加载不同的布局
        for (int i = 0; i < list.size(); i++) {
            if (list.get(i).getType().equals("2")) {
                //加载不同的Fragment
                DifferentFragment differentFragment = new DifferentFragment();
                differentFragment.setDifferentFragment(list.get(i).getZtid());
                mFragments.add(differentFragment);
            } else {
                //加载相同的Fragment
                ChildFragment childFragment = new ChildFragment();
                childFragment.setChildFragment(list.get(i).getZtid());
                mFragments.add(childFragment);
            }
        }
        //实例化适配器
        mTabFragmentAdapter = new TabFragmentAdapter(getFragmentManager());
        //设置加载的Fragment集合
        mTabFragmentAdapter.setFragments(mFragments);
    }

    /**
     * 设置Viewpager的适配器
     */
    private void initEvent() {
        //设置Viewpager的适配器
        noScroll.setAdapter(mTabFragmentAdapter);
        tabId.setupWithViewPager(noScroll);//TabLayout绑定ViewPager
        tabId.setTabsFromPagerAdapter(mTabFragmentAdapter);//TabLayout的标签从Adapter中获取
        //用来循环适配器中的视图总数
        for (int i = 0; i < mTabFragmentAdapter.getCount(); i++) {
            //获取每一个tab对象
            TabLayout.Tab tabAt = tabId.getTabAt(i);
            //将每一个条目设置我们自定义的视图
            tabAt.setCustomView(R.layout.tablayout_item);
            //默认选中第一个
            if (i == 0) {
                // 设置第一个tab的TextView是被选择的样式
                tabAt.getCustomView().findViewById(R.id.tv_tab).setSelected(true);//第一个tab被选中
                //设置选中标签的文字大小
                ((TextView) tabAt.getCustomView().findViewById(R.id.tv_tab)).setTextSize(TypedValue.COMPLEX_UNIT_PX, ResourcesUtils.getResource().getDimensionPixelSize(R.dimen.sp_28));
            }
            //通过tab对象找到自定义视图的ID
            TextView textView = (TextView) tabAt.getCustomView().findViewById(R.id.tv_tab);
            textView.setText(mStrings.get(i).getTitle());//设置tab上的文字
        }
    }
}

这是适配器的代码：

public class TabFragmentAdapter extends FragmentStatePagerAdapter {

    private List<Fragment> mBaseFragments;

    public TabFragmentAdapter(FragmentManager fm) {
        super(fm);
        this.mBaseFragments=new ArrayList<>();
    }

    public void setFragments(List<Fragment> fragments) {
        if (fragments != null) {
            mBaseFragments.addAll(fragments);
            notifyDataSetChanged();
        }
    }

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

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

我自己的一个工具类，ResoursesUtils:记得写完再Application中初始化一下，ResoursesUtils.init();

public class ResourcesUtils {
    private static Context context;

    private ResourcesUtils() {
        throw new UnsupportedOperationException("u can't instantiate me...");
    }

    /**
     * 初始化工具类
     *
     * @param context 上下文
     */
    public static void init(Context context) {
        ResourcesUtils.context = context.getApplicationContext();
    }

    /**
     * 获取ApplicationContext
     *
     * @return ApplicationContext
     */
    public static Context getContext() {
        if (context != null) return context;
        throw new NullPointerException("u should init first");
    }

    /**
     * 得到resources对象
     *
     * @return
     */
    public static Resources getResource() {
        return getContext().getResources();
    }

    /**
     * 得到string.xml中的字符串
     *
     * @param resId
     * @return
     */
    public static String getString(int resId) {
        return getResource().getString(resId);
    }
}

效果就是这样~：