Androd之标签页面切换（18）

最新推荐文章于 2024-06-24 02:16:25 发布

最新推荐文章于 2024-06-24 02:16:25 发布 · 140 阅读

文章标签：

#安卓 #标签 #Tabhost #Tabspec #Tabwidget

Android初步专栏收录该内容

29 篇文章

订阅专栏

本文介绍两种在Android应用中实现标签页的方法。一种是通过继承TabActivity并自定义TabHost及Tabspec来创建标签页；另一种是在Activity中直接使用TabHost组件进行布局配置。通过实例展示了如何设置标签文字、绑定布局及切换效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标签，在使用手机中经常会用到标签，首先我们用继承TabActivity来实现一个简单标签。

首先认识TabHost相当于放标签的容器，Tabspec就是意义上的标签了，这里我们定义了三个标签分别用不同组件加以区别，首先定义布局管理器tab.xml

<LinearLayout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/tab1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <AnalogClock
            android:id="@+id/analogClock1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <DigitalClock
            android:id="@+id/digitalClock1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="DigitalClock" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab2"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <RatingBar
            android:id="@+id/ratingBar1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
       
    </LinearLayout>

    <LinearLayout
        android:id="@+id/tab3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <DialerFilter
            android:id="@+id/dialerFilter1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" >

            <EditText
                android:id="@android:id/hint"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Hint" />

            <EditText
                android:id="@android:id/primary"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@android:id/hint"
                android:text="Primary" />
        </DialerFilter>

        <RadioGroup
            android:id="@+id/radioGroup1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" >

            <RadioButton
                android:id="@+id/radio0"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true"
                android:text="男" />

            <RadioButton
                android:id="@+id/radio1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="女" />

            <RadioButton
                android:id="@+id/radio2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="其他" />
        </RadioGroup>

    </LinearLayout>

</LinearLayout>

内嵌三个布局管理器用来显示

接下来看activity代码：

public class MainActivity extends TabActivity {

	private TabHost mytabhost=null;
	private int tab[]={R.id.tab1,R.id.tab2,R.id.tab3};//将要显示的三个标签布局管理器id
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		//自定义组件
		this.mytabhost=super.getTabHost();//取得Tabhost
		LayoutInflater.from(this).inflate(R.layout.tab,//定义转换的布局管理器
				this.mytabhost.getTabContentView(),//指定标签增加的容器
				true);//实例化布局管理中的组件
		for(int i=0;i<tab.length;i++){
			TabSpec mytab=mytabhost.newTabSpec("tab"+i);//定义tabspec
			mytab.setIndicator("标签"+i);//设置标签文字
			mytab.setContent(tab[i]);//设置标签组件
			this.mytabhost.addTab(mytab);//添加标签
		}
		
	}

}

运行效果如下：

第二种方法，继承自Activity类

定义tab.xml

<?xml version="1.0" encoding="utf-8"?>
<TabHost 
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" 
	android:id="@+id/tabhost"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<LinearLayout 
		xmlns:android="http://schemas.android.com/apk/res/android"
		android:orientation="vertical" 
		android:layout_width="fill_parent"
		android:layout_height="fill_parent">
		<TabWidget
			android:id="@android:id/tabs"
			android:layout_width="fill_parent"
			android:layout_height="wrap_content"
			android:layout_alignParentTop="true" />
		<FrameLayout 
			xmlns:android="http://schemas.android.com/apk/res/android"
			android:id="@android:id/tabcontent"
			android:layout_width="fill_parent"
			android:layout_height="fill_parent">
			<LinearLayout 
				xmlns:android="http://schemas.android.com/apk/res/android"
				android:id="@+id/tab_edit"
				android:orientation="vertical" 
				android:layout_width="fill_parent"
				android:layout_height="fill_parent">
				<EditText
					android:id="@+id/edit" 
					android:layout_width="wrap_content"
					android:layout_height="wrap_content" 
					android:text="请输入检索关键字..."
					android:textSize="18px" />
				<Button
					android:id="@+id/but"
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:text="搜索" />
			</LinearLayout>
			<LinearLayout 
				xmlns:android="http://schemas.android.com/apk/res/android"
				android:id="@+id/tab_clock"
				android:orientation="vertical" 
				android:layout_width="fill_parent"
				android:layout_height="fill_parent">
				<AnalogClock
					android:id="@+id/myAnalogClock" 
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"/>
			</LinearLayout>
			<LinearLayout 
				xmlns:android="http://schemas.android.com/apk/res/android"
				android:id="@+id/tab_sex"
				android:orientation="vertical" 
				android:layout_width="fill_parent"
				android:layout_height="fill_parent">
				<RadioGroup
					android:id="@+id/sex" 
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:orientation="vertical">
					<RadioButton
						android:id="@+id/male"
						android:checked="true"
						android:text="性别：男" />
					<RadioButton
						android:id="@+id/female"
						android:text="性别：女" />
				</RadioGroup>
			</LinearLayout>
		</FrameLayout>
	</LinearLayout>
</TabHost>

activity：

public class MyTabHostDemo extends Activity { // 继承了TabActivity
	private TabHost myTabHost;
	private int[] layRes = new int[] { R.id.tab_edit, R.id.tab_clock,
			R.id.tab_sex }; // 这些是内嵌布局文件的ID
	@Override
	public void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.setContentView(R.layout.tab) ; 
		this.myTabHost = (TabHost) super.findViewById(R.id.tabhost) ;
		this.myTabHost.setup() ;	// 建立TabHost对象 
		for (int x = 0; x < this.layRes.length; x++) {
			TabSpec myTab = this.myTabHost.newTabSpec("tab" + x) ;
			myTab.setIndicator("标签  - " + x) ;
			myTab.setContent(this.layRes[x]) ;
			this.myTabHost.addTab(myTab) ;
		}
		this.myTabHost.setCurrentTab(0) ;	// 默认显示的标签索引
	}
}

效果与上述一致