TabLayout自定义布局（标题实现三个颜色）

昨天和朋友遇到一个问题，说她想要TabLayout+viewpager想实现标题有三个颜色的目的（选中和不选中状态的颜色很简单，可是人家有一个标题栏下的功能未开放哈，必须要用一个不同的颜色来显示） 

朋友有难，就要“支援”这不扛着“义气”的大气就写下了这篇

还是老方法，直接上代码

1.布局

 tab_layout.xml

 

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <android.support.design.widget.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="match_parent"
        android:layout_height="80dp"
        >

    </android.support.design.widget.TabLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v4.view.ViewPager>

</LinearLayout>

 

 

 

 

tab_item_layout.xml

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/black_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="hhhh"
        android:textSize="20sp"
        android:padding="10dp"
        android:textColor="#000"
        />
    <TextView
        android:id="@+id/gray_tv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="www"
        android:textSize="20sp"
        android:padding="10dp"
        android:textColor="#DDD"
        />

</LinearLayout>

 

 

 

 

2.Activity

 

package com.ylz.TabLayout;


import android.graphics.Color;
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.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.TabHost;
import android.widget.TextView;

import com.ylz.floatview.R;

/**
 * Created by Administrator on 2016/10/27.
 */
public class TabLayoutActivity extends AppCompatActivity {
    TabLayout tabLayout;
    ViewPager viewpager;
    String[] titleName={"One","Tow","Three"};
    TabAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab_layout);
        init();
    }

    private void init() {
        tabLayout=(TabLayout)findViewById(R.id.tablayout);
        viewpager=(ViewPager)findViewById(R.id.viewpager);
        adapter = new TabAdapter(getSupportFragmentManager());
        viewpager.setAdapter(adapter);
        tabLayout.setupWithViewPager(viewpager);

        for(int i=0;i<tabLayout.getTabCount();i++){
            TabLayout.Tab tab=tabLayout.getTabAt(i);
            if(i==0) {
                tab.setCustomView(adapter.getTabView(i));
            }else{
                tab.setCustomView(adapter.getTabView(i));
            }
        }

        tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                ((TextView)tab.getCustomView().findViewById(R.id.black_tv)).setTextColor(Color.RED);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                ((TextView)tab.getCustomView().findViewById(R.id.black_tv)).setTextColor(Color.BLACK);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) { 
                ((TextView)tab.getCustomView().findViewById(R.id.black_tv)).setTextColor(Color.RED);
            }
        });

    }

    private  class TabAdapter extends FragmentPagerAdapter{
        public TabAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return new Fragment();
        }

        @Override
        public int getCount() {
            return 3;
        }
        TextView blackTv;
        TextView grayTv;
        public View getTabView(int position){
            View v= LayoutInflater.from(TabLayoutActivity.this).inflate(R.layout.tab_item_layout,null);
            blackTv=(TextView)v.findViewById(R.id.black_tv);
            grayTv=(TextView)v.findViewById(R.id.gray_tv);
            if(position==2){
                blackTv.setVisibility(View.GONE);
                grayTv.setVisibility(View.VISIBLE);
                grayTv.setText(titleName[position]);
            }else{
                blackTv.setVisibility(View.VISIBLE);
                grayTv.setVisibility(View.GONE);
                blackTv.setText(titleName[position]);
            }
            return v;
        }

    }
}

最终效果图：

 

 

 

 

PS:本文只是实现了那个需求，有些优化还需要在使用的时候考虑。