切换卡由TabHost作为根元素,包含TabWidget和FrameLayout两个子元素,TabWidget表示切换卡中的点击标签,FrameLayout(帧布局)中包含切换卡中需要显示的内容,所有想要显示的不同内容都放在同一个帧布局中。其中TabHost、TabWidget、FrameLayout必须为它们指定Android预设的id:tabhost,tabs,tabcontent(很奇怪的设定),帧布局中控件也需要自定义id。
布局文件如下
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@android:id/tabhost"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.briup.tabwidget.MainActivity" >
<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" >
<TextView
android:id="@+id/tv1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="切换卡1" />
<TextView
android:id="@+id/tv2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="切换卡2" />
<TextView
android:id="@+id/tv3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="切换卡3" />
</FrameLayout>
</LinearLayout>
</TabHost>
切换卡的布局写完了,但并不能直接使用,里面有多少个切换卡,是怎样的切换卡需要使用Java代码加入和设定,而且Java类必须继承一个过时的TabActivity。代码如下
import android.app.TabActivity;
import android.os.Bundle;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
@SuppressWarnings("deprecation")
public class MainActivity extends TabActivity {
//划横线,过时了,使用者不能说没有,不多
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TabHost tbHost = getTabHost();//不引用id直接获取切换卡外布局,解释了为何用Android自带的id
TabSpec tab1 = tbHost.newTabSpec("tab1")//tag,暂不管,内容可随意
.setIndicator("Tab1")//设定点击标签文字
.setContent(R.id.tv1);//设定切换卡内容
TabSpec tab2 = tbHost.newTabSpec("tab2").setIndicator("Tab2").setContent(R.id.tv2);
TabSpec tab3 = tbHost.newTabSpec("tab3").setIndicator("Tab3").setContent(R.id.tv3);
tbHost.addTab(tab1);//内容加入切换卡
tbHost.addTab(tab2);
tbHost.addTab(tab3);
}
}
效果如下