修炼-------------Android TabHost,TabWidget选项卡总结

修炼-------------Android TabHost,TabWidget选项卡总结

Android之TabHost

TabHost,个人理解为选项卡的容器,是一种特殊的FrameLayout布局(帧布局)
根据SDK文档，
Container for a tabbed window view. This object holds two children: a set of tab labels that the user clicks to select a specific tab, and a FrameLayout object that displays the contents of that page. The individual elements are typically controlled using this container object, rather than setting values on the child elements themselves。
TabHost主要由两部分组成，标签和内容，其中内容是一个FrameLayout,当用户单击不同的标签可以显示不同的内容。使用标签可以达到分页的效果，是页面的内容更加丰富，更加具有亲和力，当然与此同时，也会增加页面的复杂程度.

一个简单的TabHost布局
1.首先继承TabActivity
2.通过TabActivity的getTabHost()方法得到一个TabHost对象
3.定义选项卡的内容(是一个FrameLayout的对象)，并与TabHost绑定起来
可以通过一下语句绑定TabHost容器的内容
LayoutInflater.from(this).inflate(R.layout.main, tabHost.getTabContentView(), true);
4.添加选项卡及设置选项的标题及内容
我们知道添加选项卡需要指定一个TabSpec对象,通过TabHost的newTabSpec(选项卡的标识)可以得到,并且可以设定选项卡的标题(可以设置图片),并且设置选项卡内容,如
  tabHost.addTab(tabHost.newTabSpec("tab01")
  .setIndicator("标签1",getResources().getDrawable(R.drawable.icon))
  .setContent(R.id.tab01));
...
效果图: 

源码: tabtest01.zip (43.15 KB, 下载次数: 4) 

初学者注意了:
如果在 继承了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,想必大家想在已经知道一些蹊跷了吧. 好的，废话不多说，
直接上源码
源码: 
效果图: tabtest03.zip (51.65 KB, 下载次数: 3) 

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

下面介绍TabWidget
根据SDK文档,
Displays a list of tab labels representing each page in the parent‘s tab collection. The container object for this widget is TabHost. When the user selects a tab, this object sends a message to the parent container, TabHost, to tell it to switch the displayed page. You typically won‘t use many methods directly on this object. The container TabHost is used to add labels, add the callback handler, and manage callbacks. You might call this object to iterate the list of tabs, or to tweak the layout of the tab list, but most methods should be called on the containing TabHost object.

我们可以粗略的理解为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: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">
           </TabWidget>
           
            <FrameLayout
                android:id="@android:id/tabcontent"
         android:layout_width="fill_parent"
         android:layout_height="fill_content"
         android:padding="5dp" />
           
</LinearLayout>
    
</TabHost>
效果图: 
使用TabWidget选项卡栏在上方源码: tabtest04.zip (53.09 KB, 下载次数: 1) 

如果想要让选项卡栏在下方，那么只需要交换TabWidget和FrameLayout的位置即可，如
<?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:orientation="vertical"
           android:layout_width="fill_parent"
           android:layout_height="fill_parent">
           
            <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>

效果图: 
使用TabWidget选项卡栏在下方源码: tabtest05.zip (150.63 KB, 下载次数: 7) 

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

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