TabHost自定义标签页(一)

这里是为对TabHost不熟悉开发人员做了一个快速上手的demo;

TabHostActivity.java

package com.example.a20200712;

import android.app.Activity;
import android.os.Bundle;
import android.widget.TabHost;


import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;

public class TabHostActivity extends AppCompatActivity {
    private TabHost tabHost = null;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.tab_host_layout);

        tabHost = (TabHost)this.findViewById(R.id.tab_host_layout);
        tabHost.setup();

        TabHost.TabSpec tabSpec1 = tabHost.newTabSpec("host_tab_layout_page1");
        tabSpec1.setIndicator("第一页",getResources().getDrawable(R.drawable.java));
        tabSpec1.setContent(R.id.host_tab_layout_page1);
        tabHost.addTab(tabSpec1);

        TabHost.TabSpec tabSpec2 = tabHost.newTabSpec("host_tab_layout_page2");
        tabSpec2.setIndicator("第二页",getResources().getDrawable(R.drawable.spring));
        tabSpec2.setContent(R.id.host_tab_layout_page2);
        tabHost.addTab(tabSpec2);

        TabHost.TabSpec tabSpec3 = tabHost.newTabSpec("host_tab_layout_page3");
        tabSpec3.setIndicator("第三页",getResources().getDrawable(R.drawable.android));
        tabSpec3.setContent(R.id.host_tab_layout_page3);
        tabHost.addTab(tabSpec3);

        //默认打开哪个标签页
        tabHost.setCurrentTab(1);
    }
}

tab_host_layout.xml  这里要注意使用方式,这里的id是对应系统的，不能随便改

<!-- 标签头 -->
<TabWidget
    android:id="@android:id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"></TabWidget>

<!-- 标签页 -->
<FrameLayout
    android:id="@android:id/tabcontent"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- 标签头 -->
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"></TabWidget>

        <!-- 标签页 -->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <LinearLayout
                android:id="@+id/host_tab_layout_page1"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="第一页"></TextView>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/host_tab_layout_page2"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="第二页"></TextView>
            </LinearLayout>

            <LinearLayout
                android:id="@+id/host_tab_layout_page3"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="第三页"></TextView>
            </LinearLayout>

        </FrameLayout>


    </LinearLayout>

</TabHost>

这里还是没有达到预期，因为我们在标签上加了有图标

解决办法是：在tab_host_layout.xml 的文件中加入以下标红的内容就OK了

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:theme="@android:style/Theme.Black"
    android:id="@+id/tab_host_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

UI方面大家有时间时可以按自已要求再调整一下，