Tab Layout 之单个Activity实现

       要创建一个 tabbed UI,我们需要一个TabHost和一个TabWidget。并且TabHost一定要是layout的根元素,TabHost要包含用来显示tabs的TabWidget和一个用来显示tab内容的FrameLayout.

       我们可以使用两种方法来完成tab的显示内容:一种是在一个Activity中交换几个Views来显示不同的tabs,在本文介绍;另一种是利用多个Activity来显示不痛的tabs,这将在下一篇介绍!两种方式可自行选择,但建议选择多个Activity来实现,这样便于管理UI,可实现较复杂应用!

      我们这里用一个Activity实现,实现3个tabs切换,每个tab利用一个TextView来显示不同的内容!

      现在布局文件中添加需要的组件,具体如下:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/FrameLayout01"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    
    <TabHost
        android:id="@+id/TabHost"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
        
        <TextView 
            android:id="@+id/FirstTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="First Tab"/>
        
        <TextView 
            android:id="@+id/SecondTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Second Tab"/>
        
        <TextView 
            android:id="@+id/ThirdTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Third Tab"/>
        
    </TabHost>
    
</FrameLayout>
       FrameLayout元素可以设置ID属性,TabHost可以通过这个ID来获取到FrameLayout。

      然后,再java文件中添加如下代码:

public class TabhostActivity extends TabActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        TabHost host = this.getTabHost();
        
        LayoutInflater.from(this).inflate(R.layout.main, host.getTabContentView(), true);

        host.addTab(host.newTabSpec("First").setIndicator("First Tab").setContent(R.id.FirstTextView));
        host.addTab(host.newTabSpec("Second").setIndicator("Second Tab").setContent(R.id.SecondTextView));
        host.addTab(host.newTabSpec("Third").setIndicator("Third Tab").setContent(R.id.ThirdTextView));
    }
}

          我们首先通过getTabHost()函数来获取这个context的TabHost,然后通过TabHost的addtab()函数来添加我们的3个tabs,并通过TabSpec()来定义每个tab的属性,我们这里分别设为first、second和third。通过调用setIndicator()来设置每个tab的的显示(可以是文字或者图片),最后是用setContent来设置每个tab的显示内容,我们这里设置为之前定义的的3个TextView.

     这样我们便实现了自己的Tab Layout!


    



  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值