1、目标是实现测试页上的五个标签,单击实现不同页面的跳转。
最终的实现效果:
2、实现过程
(1)修改activity_main.xml。一定要注意TabHost、FrameLayou、TabWidget的id。
<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="53dp"
android:layout_marginTop="55dp" />
</FrameLayout>
</LinearLayout>
</TabHost>
(2)拷贝5个背景图片到drawable目录下。
(3)layout 目录下单击右键New → Layout resource file 创建5个XML 布局文件,注意更改id!
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/framelout1"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/bg_page1">
</FrameLayout>
(4)在MainActivity 中,获取并初始化TabHost 组件,为TabHost 对象添加标签页,这里共添加了5个标签页.
package com.example.tabpagetest;
import androidx.appcompat.app.ActionBar;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.WindowManager;
import android.view.inputmethod.InputMethodManager;
import android.widget.TabHost;
public class MainActivity extends AppCompatActivity {
private TabHost tabHost;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
}
tabHost=(TabHost)findViewById(android.R.id.tabhost); //获取TabHost对象
tabHost.setup(); //初始化TabHost组件
//声明并实例化一个LayoutInflater对象
LayoutInflater inflater = LayoutInflater.from(this);
inflater.inflate(R.layout.tab1, tabHost.getTabContentView());
inflater.inflate(R.layout.tab2, tabHost.getTabContentView());
inflater.inflate(R.layout.tab3, tabHost.getTabContentView());
inflater.inflate(R.layout.tab4, tabHost.getTabContentView());
inflater.inflate(R.layout.tab5, tabHost.getTabContentView());
tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("11111111111111111").setContent(R.id.framelout1)); //添加第一个标签页
tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("22222222222222222").setContent(R.id.framelout2)); //添加第一个标签页
tabHost.addTab(tabHost.newTabSpec("tab3").setIndicator("33333333333333333").setContent(R.id.framelout3)); //添加第一个标签页
tabHost.addTab(tabHost.newTabSpec("tab4").setIndicator("44444444444444444").setContent(R.id.framelout4)); //添加第一个标签页
tabHost.addTab(tabHost.newTabSpec("tab5").setIndicator("55555555555555555").setContent(R.id.framelout5)); //添加第一个标签页
}
}
3、一点思考
如果将布局文件中FrameLayout与TabWidget写成如下情况,效果就大大不同了!!!
<TabWidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<FrameLayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
效果图如下,并没有实现隐藏。