TabActivity 深度研究(非常好的总结，谢谢原创者)

标签/TabActivity 深度研究

何谓标签 印象最深刻的应该是这个

 

 

 

 

现在 我们将通过一系列的扩展来研究之

写道

1. 自定义TabActivity 使得标签处于屏幕下方  
2. 各个标签所用布局 既可在 *.xml 中定义 也可在 *.java 中定义  
3. 更改标签布局

 

 

1. 标签页 在 屏幕下方

写道

一个典型的标签Activity  是由2 部分构成的 且其id都有规定 即：  
* TabWidget 用于展示标签页 id=tabs  
* FrameLayout 用于展示隶属于各个标签的具体布局 id=tabcontent

 

* 基本布局如下：

xml代码

<?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= "fill_parent"        android:layout_height= "fill_parent" > <LinearLayout        android:orientation= "vertical"      android:gravity= "bottom"      android:layout_width= "fill_parent"        android:layout_height= "fill_parent" > <FrameLayout        android:id= "@android:id/tabcontent"      android:layout_width= "fill_parent"        android:layout_height= "200dip" >            <RelativeLayout      android:id= "@+id/view1"      android:orientation= "vertical"      android:layout_width= "fill_parent"      android:layout_height= "fill_parent"      >          <TextView               android:id= "@+id/text"              android:layout_width= "wrap_content"              android:layout_height= "wrap_content"              android:text= "Hello to Johnny.Griffin!"              android:layout_centerInParent= "true"              android:textStyle= "bold|italic" />          <ImageView               android:layout_width= "fill_parent"              android:layout_height= "fill_parent"              android:src= "@drawable/robot"              android:layout_toLeftOf= "@id/text" />      </RelativeLayout>            <TextView          android:id= "@+id/view2"          android:layout_width= "fill_parent"          android:layout_height= "fill_parent"          android:text= "创新源于模仿！" />                <TextView          android:id= "@+id/view3"          android:layout_width= "fill_parent"          android:layout_height= "fill_parent"          android:text= "欢迎进入 droid 世界！" />                <ImageView          android:id= "@+id/view4"          android:layout_width= "fill_parent"          android:layout_height= "fill_parent"          android:src= "@drawable/robot" /> </FrameLayout> <TabWidget        android:id= "@android:id/tabs"      android:layout_width= "fill_parent"        android:layout_height= "wrap_content" />   </LinearLayout>   </TabHost>

* 得到TabHost tHost 仅在TabActivity中有效

Java代码   

1. tHost = this.getTabHost();  

 

 

* 创建4个标签 并指定所使用的布局

Java代码

public static final String Tab1 = "Tab1" ; public static final String Tab2 = "Tab2" ; public static final String Tab3 = "Tab3" ; public static final String Tab4 = "Tab4" ; public static final String Tab5 = "Tab5" ;   tHost.addTab(tHost.newTabSpec(Tab1).setIndicator( "Tab 1" , getResources().getDrawable(R.drawable.icon)).setContent(R.id.view1));          tHost.addTab(tHost.newTabSpec(Tab2).setIndicator( "Tab 2" , getResources().getDrawable(R.drawable.beijing_small)).setContent(R.id.view2));          tHost.addTab(tHost.newTabSpec(Tab3).setIndicator( "Tab 3" ).setContent(R.id.view3));          tHost.addTab(tHost.newTabSpec(Tab4).setIndicator( "Tab 4" ).setContent(R.id.view4));

 

 

* 设定监听器 用于监听 标签间切换事件

1 2 3 4 5 6 7

tHost.setOnTabChangedListener( new OnTabChangeListener(){              @Override              public void onTabChanged(String tabId) {                  // TODO Auto-generated method stub              }                        });

 

 

* emulator 运行情况：

 

 

 

 

2.  在 *.java 中定义标签所需布局

 Java代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70

public class CustomLayout implements TabHost.TabContentFactory  {          Activity activity;          LayoutInflater inflaterHelper;                    LinearLayout layout;                    public CustomLayout (Activity a) {              activity = a;                            inflaterHelper = a.getLayoutInflater();          }                    /** {@inheritDoc} */ //tag 标记各个标签          public View createTabContent(String tag) {                  return addCustomView(tag);          }                    public View addCustomView(String id){                            layout = new LinearLayout(activity);              layout.setOrientation(LinearLayout.VERTICAL);                                          if (id.equals(Tab1)){                  ImageView iv = new ImageView(activity);                  iv.setImageResource(R.drawable.beijing_big);                  layout.addView(iv,                          new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));              }              else if (id.equals(Tab2)){                  EditText edit = new EditText(activity);                  layout.addView(edit,                          new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));                                    Button btn = new Button(activity);                  btn.setText( "OK" );                  btn.setWidth( 100 );                  layout.addView(btn,                          new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));                                    RadioGroup rGroup = new RadioGroup(activity);                  rGroup.setOrientation(LinearLayout.HORIZONTAL);                  RadioButton radio1 = new RadioButton(activity);                  radio1.setText( "Radio A" );                  rGroup.addView(radio1);                  RadioButton radio2 = new RadioButton(activity);                  radio2.setText( "Radio B" );                  rGroup.addView(radio2);                                    layout.addView(rGroup,                          new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));              }              else if (id.equals(Tab3)){                                    LinearLayout.LayoutParams param3 =                      new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT);                                    layout.addView(inflaterHelper.inflate(R.layout.hello, null ),param3);              }              else if (id.equals(Tab4)){                  TextView tv = new TextView(activity);                  tv.setText( "HelloTags!" );                  tv.setGravity(Gravity.CENTER);                  layout.addView(tv);              }                return layout;          }                }

 

 

 

* 如何使用：

Java代码   

1. CustomLayout ct = new CustomLayout(this);  
2.   
3. tHost.addTab(tHost.newTabSpec(Tab4).setIndicator("Tab 4").setContent(ct));  

 

 * emulator 运行结果:

 

 

 

 

3. 改变标签布局

 

写道

可能很多人对TabActivity 不满意 原因之一：其很不美观 而不美观的根源就是：标签的问题 其图像和文字相互覆盖 导致的  


那么 我们可以自己扩展么？ 当然

 

 

写道

TabWidget 理解：  

1. TabWidget 为 horizontal 的 LinearLayout  
2. 且 其包含的标签又是一个RelativeLayout  
3. 每个标签RelativeLayout 里面包含2个View: TextView ImageView

 

 

因此 我们甚至可以推算出其布局为：

xml代码

<?xml version= "1.0" encoding= "utf-8" ?> <LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android"      android:orientation= "horizontal"      android:layout_width= "fill_parent"      android:layout_height= "fill_parent"      > <RelativeLayout      android:orientation= "vertical"      android:layout_width= "fill_parent"      android:layout_height= "wrap_content" >      <ImageView  />      <TextView  /> </RelativeLayout> <RelativeLayout      android:orientation= "vertical"      android:layout_width= "fill_parent"      android:layout_height= "wrap_content" >      <ImageView  />      <TextView  /> </RelativeLayout> <RelativeLayout      android:orientation= "vertical"      android:layout_width= "fill_parent"      android:layout_height= "wrap_content" >      <ImageView  />      <TextView  /> </RelativeLayout> <RelativeLayout      android:orientation= "vertical"      android:layout_width= "fill_parent"      android:layout_height= "wrap_content" >      <ImageView  />      <TextView  /> </RelativeLayout> </LinearLayout>

 

 

* 去掉系统默认的布局 即 在 setIndicator() 中置空 修改如下：

Java代码   

1. tHost.addTab(tHost.newTabSpec(Tab1).setIndicator("").setContent(ct));   

 

写道

可能有人会说：那我不调用setIndicator() 不久可以了么 不行 否则 会报错

 

 

* 自己定义布局 并 指定显示的内容

Java代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

public View composeLayout(String s, int i){          LinearLayout layout = new LinearLayout( this );          layout.setOrientation(LinearLayout.VERTICAL);                    TextView tv = new TextView( this );          tv.setGravity(Gravity.CENTER);          tv.setSingleLine( true );          tv.setText(s);          layout.addView(tv,                  new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));                    ImageView iv = new ImageView( this );          iv.setImageResource(i);          layout.addView(iv,                  new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));          return layout;      }

 

 

* 得到 TabWidget 实例 tw

Java代码   

1. LinearLayout ll=(LinearLayout)tHost.getChildAt(0);   
2.         tw =(TabWidget)ll.getChildAt(1);  

 

 

* 得到 TabWidget 内的具体某个Layout 并使用上面的布局 composeLayout()

Java代码   

1. public void updateWidgetView(int i,String text,int image){  
2.         RelativeLayout rl =(RelativeLayout)tw.getChildAt(i);  
3.           
4.         rl.addView(composeLayout(text,image));  
5.     }  

 

 

* emulator 运行截图 // 前面 3个是使用新布局 最后一个是使用TabActivity 默认的布局 哪个好看 大家自己选择之

 

 

that's all!