切换卡

xml文件：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:stretchColumns="0,1,2"
    android:orientation="vertical" 
    tools:context=".MainActivity">

    <TableRow
        android:layout_width="fill_parent"
        android:layout_height="match_parent" 
        android:gravity="center">

        <TextView
            android:id="@+id/ttv1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="left"
            android:text="切换卡1" />

        <TextView
            android:id="@+id/ttv2"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="center"
            android:onClick="qiehuanka2"
            android:text="切换卡2" />

        <TextView
            android:id="@+id/ttv3"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="right"
            android:onClick="qiehuanka3"
            android:text="切换卡3" />
    </TableRow>
    
    <TextView 
        android:id="@+id/ttv4"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"/>
    
</TableLayout>

Java代码文件：

package com.example.qiehuanka;

import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.TextView;

public class MainActivity extends Activity {

	TextView tv1,tv2,tv3,tv4;
	
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        tv4 = (TextView) findViewById(R.id.ttv4);
        tv1 = (TextView) findViewById(R.id.ttv1);
        tv2 = (TextView) findViewById(R.id.ttv2);
        tv3 = (TextView) findViewById(R.id.ttv3);
        tv1.setOnClickListener(new OnClickListener() {
			
			public void onClick(View v) {
				// TODO Auto-generated method stub
				tv4.setText("切换卡1");
			}
		});
        
		tv2.setOnClickListener(new OnClickListener() {
					
			public void onClick(View v) {
				// TODO Auto-generated method stub
				tv4.setText("切换卡2");
			}
		});
		
		tv3.setOnClickListener(new OnClickListener() {
			
			public void onClick(View v) {
				// TODO Auto-generated method stub
				tv4.setText("切换卡3");
			}
		});
    }


    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }
    
}

实现效果图：


第二种方式：
xml文件：

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

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

        <!-- TabWidget组件id值不可变-->
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
        </TabWidget>

        <!-- FrameLayout布局，id值不可变-->
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_above="@android:id/tabs">

            <!-- 切换卡1 -->
            <LinearLayout
                android:id="@+id/tab1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center" >


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="切换卡1" />
            </LinearLayout>


            <!-- 切换卡2 -->
            <LinearLayout
                android:id="@+id/tab2"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center" >


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="切换卡2" />
            </LinearLayout>

            <!-- 切换卡3 -->
            <LinearLayout
                android:id="@+id/tab3"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center" >


                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="切换卡3" />
            </LinearLayout>

        </FrameLayout>
    </LinearLayout>
</TabHost>

MainActivity文件：

package com.xyy.tabhosttest;

import androidx.appcompat.app.AppCompatActivity;

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

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TabHost tab = (TabHost) findViewById(android.R.id.tabhost);


        //初始化TabHost容器
        tab.setup();
        //在TabHost创建标签，然后设置：标题／图标／标签页布局
        tab.addTab(tab.newTabSpec("tab1").setIndicator("切换卡1" , null).setContent(R.id.tab1));
        tab.addTab(tab.newTabSpec("tab2").setIndicator("切换卡2" , null).setContent(R.id.tab2));
        tab.addTab(tab.newTabSpec("tab3").setIndicator("切换卡3" , null).setContent(R.id.tab3));
    }
}

最终实现效果为：


这里贴出设舍友问到的两个问题：

TabLayout的几个属性：

app:tabIndicatorColor :

是更改切换卡下标颜色

app:tabMode ：

有两种属性：fixed和 scrollable；fixed：指的是固定tab；scrollable指的是tab可滑动。

app:tabSelectedTextColor :

改变选中字体的颜色

两个混淆点：
onClickListener 是监听控件是否被点击了
onkeyListener 是监听是否点击了某个按键