Android TabHost,TabWidget,FrameLayout 选项卡总结

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

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



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

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

4、添加选项卡及设置选项的标题及内容
我们知道添加选项卡需要指定一个TabSpec对象,通过TabHostnewTabSpec(选项卡的标识)可以得到,并且可以设定选项卡的标题(可以设置图片),并且设置选项卡内容,
  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)));


AndroidTabWidget



上面基本上已经说明了androidTabHost的大部分用法,但还不够。
在开发中,我们有时需要更加实用的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>



如果想要让选项卡栏在下方,那么只需要交换TabWidgetFrameLayout的位置即可,如

还有一点必须注意的,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





  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值