Android TabHost，TabWidget，FrameLayout 选项卡总结

TabHost,个人理解为选项卡的容器,是一种特殊的FrameLayout布局(帧布局)

TabHost主要由两部分组成，标签和内容，其中内容是一个FrameLayout,标签是TabWidget。当用户单击不同的标签可以显示不同的内容。使用标签可以达到分页的效果，是页面的内容更加丰富，更加具有亲和力，当然与此同时，也会增加页面的复杂程度.

一个简单的TabHost布局步骤：
1、首先继承TabActivity
2、通过TabActivity的getTabHost()方法得到一个TabHost对象
3、定义选项卡的内容(是一个FrameLayout的对象)，并与TabHost绑定起来
可以通过一下语句绑定TabHost容器的内容
LayoutInflater.from(this).inflate(R.layout.main, tabHost.getTabContentView(), true);

（但注意，如果main.xml中已经用<include>添加了各个tab的布局的，就不能写这个来绑定了，否则重复）

4、添加选项卡及设置选项的标题及内容
我们知道添加选项卡需要指定一个TabSpec对象,通过TabHost的newTabSpec(选项卡的标识)可以得到,并且可以设定选项卡的标题(可以设置图片),并且设置选项卡内容,如
  tabHost.addTab(tabHost.newTabSpec("tab01")
  .setIndicator("标签1",getResources().getDrawable(R.drawable.icon))
  .setContent(R.id.tab01));

TabHost th = getTabHost();  
      
LayoutInflater.from(MainActivity.this).inflate(R.layout.activity_main,th.getTabContentView(), true);//设置使用TabHost布局  

    
th.addTab(th.newTabSpec("123").setIndicator("one").setContent(R.id.text1));  
    
th.addTab(th.newTabSpec("456").setIndicator("two").setContent(R.id.text2));  
    
th.addTab(th.newTabSpec("789").setIndicator("three").setContent(R.id.text3));  

如果在 继承了TabActivity的类中设置了,setContentView(R.layout.main),则有可能导致错误，原因可能是因为main布局文件设置不正确(下面有详解),解决办法是建议先删除此行

上面的例子中TabHost只是与一个布局容器绑定，也就是说各个选项卡的内容是写在一个布局文件中的，然后通过不同的id来区分各个选项卡的内容.
如果选项卡的个数过多，或者每个选项卡的布局比较复杂的话，势必会使布局容器显得臃肿而且可读性比较差，不利于后期的维护。

Android中提供了我们还可以通过setContent(Intent intent)来指定每个选项卡的内容

有时候我们需要将选项卡的标题设置的更加个性化，虽然我们知道了setIndicator()方法可以设置选项卡的标题的时候可以指定图片，但都是图片在下，文字在图片上方,我们能不能设置成文字在图片下方，或者文字在图片右边呢?
当然可以，android中的setIndicator()方法总共有如下三种形式:
TabHost.TabSpec         setIndicator(CharSequence label) 
TabHost.TabSpec         setIndicator(CharSequence label, Drawable icon) 
TabHost.TabSpec         setIndicator(View view)

前两种就不说了，想必现在大家都熟悉了。
主要说说第三种，第三种中，方法的参数是一个View,想必大家想在已经知道一些蹊跷了吧. 好的，废话不多说，

// 自定义标题栏，得到view
View view1 = LayoutInflater.from(this).inflate(R.layout.customer_label,null);
		
ImageView img1 = (ImageView) view1.findViewById(R.id.img);//特别要注意，要用view1去调用findViewById方法
img1.setImageResource(R.drawable.icon);
		
TextView text1 = (TextView) view1.findViewById(R.id.text);
text1.setText("标签一");

tabHost.addTab(tabHost.newTabSpec("tab01").setIndicator(view1).setContent(new Intent(Tabtest03Activity.this, Tab01Activity.class)));

Android之TabWidget

上面基本上已经说明了android中TabHost的大部分用法,但还不够。
在开发中，我们有时需要更加实用的TabHost,虽然我们已经可以随心所欲的设置TabHost,但我们一定会发现，在上面的例子中，Label都是在上面,那怎么才能让Label在下面呢?

我们可以粗略的理解为TabWidget就是Tab的一个集合，也就是Label栏.

根据上面的初学者注意:
不要随便在设置setContentView(R.layout.main)中，这条语句可能引起错误.
如果设置这条语句的话，那么对main布局文件就要正确的配置.

怎么正确定义main.xml布局文件呢？
首先我们需要搞清楚TabHost,TabWidget,FrameLayout之间的关系，
我们知道TabHost好比一个选项卡的容器，包括多个选项卡和选项卡的内容，其中选项卡的内容是一个FrameLayout容器，TabWidget可以理解为选项卡栏.
正确的main.xml文件应该包含这三个组件TabHost,TabWidget,FrameLayout
并且这三个组件的id 必须为
@android:id/tabhost,@android:id/tabs,@android:id/tabcontent
如下,

<?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" >
    

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

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >
           
        </TabWidget>
                       

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_content"
            android:padding="5dp" />
           
    </LinearLayout>
    

</TabHost>

如果想要让选项卡栏在下方，那么只需要交换TabWidget和FrameLayout的位置即可，如

还有一点必须注意的，TabActivity中必须添加setContentView(R.layout.main);，如不添加，则达不到tab在下面的效果

<?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" >
    

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

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1.0"
            android:padding="5dp" />
                      

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" >
           
        </TabWidget>
           
    </LinearLayout>
    

</TabHost>

注意了,<FrameLayout>和<TabWidget>必须在<LinearLayout>内建立，因为<LinearLayout>才有weight。

第二个，FrameLayout中多了一行android:layout_weight="1.0"语句，这个属性代表的是比重，android中所有的组件默认这个属性都是为0，意味着他们只在屏幕上显示他们需要空间的大小。如果设置了该属性，activity将根据设置的值按比例来划分空间的大小

举个例子，如果acitivity中有三个组件，假设屏幕高为90cm，三个组件如果设置了该属性为0的话，那么他们会以正常的方式显示在屏幕上。
如果第一个组件设置组件设置为0，其余两个组件设置为1，那么这个屏幕将会以0:1:1的方式来显示，如果第一个组件默认占10cm,那么其他两个组件各占40cm