Android开发:巧妙运用ViewStub写出类似Tab选项卡

巧妙运用ViewStub写出类似Tab选项卡(想怎么写tab就怎么写,横着写竖着写随你)

网上找了半天也没找到如何运用ViewStub写出一个选项卡,而且关于ViewStub也都是基本介绍(基础知识请参照网上,一大坨的转载).之前看到一个老兄写的模拟iphone选项卡的界面,但是那个太麻烦了,本人天生懒惰,没办法只好自己动手写一个了。

先睹为快,看下面截图(有点类QQ通讯录),最底下是一个类似于Tab的选项卡(有点iphone选项卡感觉吧)。Android开发:巧妙运用ViewStub写出类似Tab选项卡  Android开发:巧妙运用ViewStub写出类似Tab选项卡

为了简单起见,这里就不用这个截图做例子了,下面就用写一个最简单的Demo。

第一步:还是先建立底部的选项卡(其实就是一个TableLayout布局),代码如下(main.xml):

  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout   
  3.      xmlns:Android="http://schemas.android.com/apk/res/android"  
  4.       android:layout_width="wrap_content"   
  5.       android:layout_height="wrap_content"  
  6.       android:background="#ffffff">  
  7. <TableLayout android:layout_width="fill_parent"  
  8.         android:layout_height="54dip"  
  9.         android:orientation="horizontal"  
  10.         android:layout_gravity="bottom"  
  11.         android:layout_alignParentBottom="true"  
  12.         xmlns:android="http://schemas.android.com/apk/res/android"  
  13.         >  
  14.         <TableRow  
  15.             android:layout_width="fill_parent"  
  16.             android:layout_height="54dip"  
  17.             >  
  18.             <Button   
  19.                 android:id="@+id/btn1"  
  20.                 android:background="#888888"  
  21.                 android:layout_width="70dip"  
  22.                 android:layout_height="54dip"  
  23.                 android:layout_weight="1"  
  24.                 android:text="Button 1"  
  25.                 />  
  26.             <Button   
  27.                 android:id="@+id/btn2"  
  28.                 android:background="#888888"  
  29.                 android:layout_width="70dip"  
  30.                 android:layout_height="54dip"  
  31.                 android:layout_weight="1"  
  32.                 android:text="Button 2"  
  33.                 />  
  34.             <Button   
  35.                 android:background="#888888"  
  36.                 android:id="@+id/btn3"  
  37.                 android:layout_width="70dip"  
  38.                 android:layout_height="54dip"  
  39.                 android:layout_weight="1"  
  40.                 android:text="Button 3"  
  41.                 />  
  42.             <Button   
  43.                 android:background="#888888"  
  44.                 android:id="@+id/btn4"  
  45.                 android:layout_width="70dip"  
  46.                 android:layout_height="54dip"  
  47.                 android:layout_weight="1"  
  48.                 android:text="Button 4"  
  49.                 />         
  50.         </TableRow>         
  51.     </TableLayout>  
  52. </RelativeLayout>  

效果图:

Android开发:巧妙运用ViewStub写出类似Tab选项卡