TabHost实现的一个Tab面板切换效果

今天整理一下 TabHost 实现的一个Tab 面板切换效果，先看下一下效果图片

 

 

TabHost

在 TabHost 布局里面要注意一下几点。

TabHost必须设置android:id为@android:id/tabhost

TabWidget必须设置android:id为@android:id/tabs

FrameLayout必须设置android:id为@android:id/tabcontent

 

activity_tabhost.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">
    <TabHost
        android:id="@android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >
        <LinearLayout
            android:layout_height="match_parent"
            android:layout_width="match_parent"
            android:orientation="vertical"
            >

            <TabWidget
                android:id="@android:id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                />

            <FrameLayout
                android:id="@android:id/tabcontent"
                android:layout_height="match_parent"
                android:layout_width="match_parent"
                >
                <LinearLayout android:id="@+id/tab1"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
                    <TextView android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="第一个a"
                        />
                </LinearLayout>

                <LinearLayout android:id="@+id/tab2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
                    <TextView android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="第二个bb"
                        />
                </LinearLayout>

                <LinearLayout android:id="@+id/tab3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">
                    <TextView android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="第三个ccc"
                        />
                </LinearLayout>

            </FrameLayout>

        </LinearLayout>

    </TabHost>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <Button
            android:id="@+id/t1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="AA"
            />

        <Button
            android:id="@+id/t2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="BB"
            />

        <Button
            android:id="@+id/t3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="CC"
            />
    </LinearLayout>


</LinearLayout>

 

TabhostActivity.java 文件

package jz.app.myapplication;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.TabHost;

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

public class TabhostActivity extends AppCompatActivity implements View.OnClickListener{

    private Button t1;
    private Button t2;
    private Button t3;
    private TabHost tabHost;

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

        tabHost = findViewById(android.R.id.tabhost);
        tabHost.setup();

        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("TAB1",null).setContent(R.id.tab1));
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("TAB2",null).setContent(R.id.tab2));
        tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("TAB3",null).setContent(R.id.tab3));

        t1 = (Button) findViewById(R.id.t1);
        t2 = (Button) findViewById(R.id.t2);
        t3 = (Button) findViewById(R.id.t3);

        t1.setOnClickListener(this);
        t2.setOnClickListener(this);
        t3.setOnClickListener(this);

    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.t1:
                tabHost.setCurrentTabByTag("tab1");
                break;

            case R.id.t2:
                tabHost.setCurrentTabByTag("tab2");
                break;

            case R.id.t3:
                tabHost.setCurrentTabByTag("tab3");
                break;
        }
    }
}

 

在这里自定义了三个按钮 AA,BB,CC,也可以实现 tab 面板的切换。

这里用到 tabHost 的一个方法：setCurrentTabByTag , 该方法接收一个字符串标识。