Android学习历程16-TabHost的基本用法

1. TabHost常用组件
   TabWidget : 该组件就是TabHost标签页中上部 或者 下部的按钮, 可以点击按钮切换选项卡;

TabSpec : 代表了选项卡界面, 添加一个TabSpec即可添加到TabHost中;

– 创建选项卡 : newTabSpec(String tag), 创建一个选项卡;

– 添加选项卡 : addTab(tabSpec);

1. TabHost使用步骤

a. 定义布局 : 在XML文件中使用TabHost组件, 并在其中定义一个FrameLayout选项卡内容;

b. 继承TabActivity : 显示选项卡组件的Activity继承TabActivity;

c. 获取组件 : 通过调用getTabHost()方法, 获取TabHost对象;

d. 创建添加选项卡 : 通过TabHost创建添加选项卡;
3. 将按钮放到下面
布局文件中TabWidget代表的就是选项卡按钮, Fragement组件代表内容;
设置失败情况 : 如果Fragement组件没有设置 android:layout_weight属性, 那么将TabWidget放到下面, 可能不会显示按钮;
设置权重 : 设置了Fragment组件的权重之后, 就可以成功显示该选项卡按钮

---

直接附上常见用法的代码：

第一种

<FrameLayout    android:id="@+id/tabcontent"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:layout_above="@id/tv_transp"    android:layout_below="@id/details"    android:background="#C0C0C0" /><android.support.v4.app.FragmentTabHost    android:id="@+id/tabhost"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:layout_alignParentBottom="true"    android:background="#C0C0C0" >    <TabWidget        android:id="@+id/tabs"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="horizontal" /></android.support.v4.app.FragmentTabHost

main.Activity中的代码

FragmentTabHost tabHost = (FragmentTabHost) findViewById(R.id.tabhost);    tabHost.setup(this, getSupportFragmentManager(), R.id.tabcontent);    tabHost.addTab(            tabHost.newTabSpec(String.valueOf(TABS[0])).setIndicator(getLayoutInflater().inflate(TABS[0], null)),            TimesFragment.class, null);    tabHost.addTab(            tabHost.newTabSpec(String.valueOf(TABS[1])).setIndicator(getLayoutInflater().inflate(TABS[1], null)),            KChartsFragment.class, null);    tabHost.addTab(            tabHost.newTabSpec(String.valueOf(TABS[2])).setIndicator(getLayoutInflater().inflate(TABS[2], null)),            GuideFragment.class, null);    tabHost.addTab(            tabHost.newTabSpec(String.valueOf(TABS[3])).setIndicator(getLayoutInflater().inflate(TABS[3], null)),            AboutFragment.class, null);

第二种

布局文件代码

<LinearLayout 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:orientation="vertical"  tools:context=".MainActivity" >  <Button      android:id="@+id/button1"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:text="Button" />   <TabHost      android:id="@+id/tabhost"      android:layout_width="match_parent"      android:layout_height="wrap_content">      <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" >              <!-- 第一个tab的布局 -->              <LinearLayout                  android:id="@+id/tab1"                  android:layout_width="match_parent"                  android:layout_height="match_parent" >                  <TextView                      android:id="@+id/textView1"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:text="林炳东" />              </LinearLayout>              <!-- 第二个tab的布局 -->              <LinearLayout                  android:id="@+id/tab2"                  android:layout_width="match_parent"                  android:layout_height="match_parent" >                  <TextView                      android:id="@+id/textView2"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:text="张小媛" />              </LinearLayout>              <!-- 第三个tab的布局 -->              <LinearLayout                  android:id="@+id/tab3"                  android:layout_width="match_parent"                  android:layout_height="match_parent" >                  <TextView                      android:id="@+id/textView3"                      android:layout_width="wrap_content"                      android:layout_height="wrap_content"                      android:text="马贝贝" />              </LinearLayout>          </FrameLayout>      </LinearLayout>  </TabHost>   </LinearLayout>  

Java代码

public class MainActivity extends Activity {  @Override  protected void onCreate(Bundle savedInstanceState) {      super.onCreate(savedInstanceState);      setContentView(R.layout.activity_main);      TabHost th=(TabHost)findViewById(R.id.tabhost);      th.setup();            //初始化TabHost容器      //在TabHost创建标签，然后设置：标题／图标／标签页布局      th.addTab(th.newTabSpec("tab1").setIndicator("标签1",getResources().getDrawable(R.drawable.ic_launcher)).setContent(R.id.tab1));      th.addTab(th.newTabSpec("tab2").setIndicator("标签2",null).setContent(R.id.tab2));      th.addTab(th.newTabSpec("tab3").setIndicator("标签3",null).setContent(R.id.tab3));         //上面的null可以为getResources().getDrawable(R.drawable.图片名)设置图标   }  }