快速搭建tab

1. 布局文件代码:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.app.FragmentTabHost xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    android:fitsSystemWindows="false"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/index"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/black"
        android:orientation="vertical">

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
        <FrameLayout
            android:id="@+id/realtabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="@dimen/dp_47"
            android:layout_weight="0"
            android:background="@color/white"
            android:divider="@color/touming"
            android:gravity="bottom"
            android:orientation="horizontal"
            android:padding="@dimen/dp_4"
            android:showDividers="none" />

    </LinearLayout>
</android.support.v4.app.FragmentTabHost>

查看布局文件

2. Activity文件代码:

public class MainActivity extends AppCompatActivity {
    protected final String TAG = this.getClass().getName(); // 公用TAG
    private final Class[] cls = {FirstFragment.class, OtherFragment.class};
    private final String title[] = new String[]{ "首页" ,"其他" };
    private final int images[] = new int[]{ R.drawable.selector_tab_shouye, R.drawable.selector_tab_other};
    private FragmentTabHost mTabHost; // FragmentTabHost 对象
    private LayoutInflater mInflater; // 布局转换器

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

        init();
    }

    /**
     * 全局初始化
     */
    private void init() {
        initConfig();
        initUI();
    }

    /**
     * 初始化配置
     */
    private void initConfig(){
        mInflater = LayoutInflater.from(this);
    }

    /**
     * 初始化界面UI 控件
     */
    private void initUI() {
        initTabHost();
        addTab();
    }

    /**
     * 初始化 mTabHost
     */
    private void initTabHost() {
        mTabHost = (FragmentTabHost) findViewById(android.R.id.tabhost);
        mTabHost.setup(this, getSupportFragmentManager(), R.id.realtabcontent);
    }

    /**
     * 添加tab
     */
    private void addTab() {
        for (int index = 0; index < cls.length; index ++) {
            View indicatorView = mInflater.inflate(R.layout.item_shouye_indicator, null);
            ImageView imageView = indicatorView.findViewById(R.id.img_indicator);
            imageView.setImageResource(images[index]); // 设置指示图片, 采用selector, 实现切换
            TextView tv_title_indicator = indicatorView.findViewById(R.id.tv_title_indicator);
            tv_title_indicator.setText(title[index]); // 设置指示title, 采用selector, 实现切花切换
            mTabHost.addTab(mTabHost.newTabSpec(cls[index].getName()).setIndicator(indicatorView), cls[index], null);
        }
    }
}

查看实现代码

3. 指示图片selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/ic_launcher_round" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
    <item android:drawable="@mipmap/ic_launcher" android:state_selected="true"/>
    <item android:drawable="@mipmap/ic_launcher" android:state_focused="true"/>
    <item android:drawable="@mipmap/ic_launcher" android:state_pressed="true"/>
</selector>

selector_tab_index

4. 指示title selector:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/gray" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
    <item android:color="@color/theme" android:state_selected="true"/>
    <item android:color="@color/theme" android:state_focused="true"/>
    <item android:color="@color/theme" android:state_pressed="true"/>
</selector>

selector_tab_color