标签/TabActivity 深度研究

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

 

 

 

 

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

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

 

 

1. 标签页 在 屏幕下方

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

 

* 基本布局如下:

Xml代码 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <TabHost xmlns:android="http://schemas.android.com/apk/res/android"   
  3.     android:id="@android:id/tabhost"  
  4.     android:layout_width="fill_parent"     
  5.     android:layout_height="fill_parent" >  
  6. <LinearLayout     
  7.     android:orientation="vertical"  
  8.     android:gravity="bottom"  
  9.     android:layout_width="fill_parent"     
  10.     android:layout_height="fill_parent" >  
  11. <FrameLayout     
  12.     android:id="@android:id/tabcontent"  
  13.     android:layout_width="fill_parent"     
  14.     android:layout_height="200dip" >  
  15.       
  16.     <RelativeLayout  
  17.     android:id="@+id/view1"  
  18.     android:orientation="vertical"  
  19.     android:layout_width="fill_parent"  
  20.     android:layout_height="fill_parent"  
  21.     >  
  22.         <TextView    
  23.             android:id="@+id/text"  
  24.             android:layout_width="wrap_content"   
  25.             android:layout_height="wrap_content"   
  26.             android:text="Hello to Johnny.Griffin!"  
  27.             android:layout_centerInParent="true"  
  28.             android:textStyle="bold|italic" />  
  29.         <ImageView    
  30.             android:layout_width="fill_parent"   
  31.             android:layout_height="fill_parent"   
  32.             android:src="@drawable/robot"  
  33.             android:layout_toLeftOf="@id/text" />  
  34.     </RelativeLayout>  
  35.       
  36.     <TextView  
  37.         android:id="@+id/view2"  
  38.         android:layout_width="fill_parent"  
  39.         android:layout_height="fill_parent"  
  40.         android:text="创新源于模仿!" />  
  41.           
  42.     <TextView  
  43.         android:id="@+id/view3"  
  44.         android:layout_width="fill_parent"  
  45.         android:layout_height="fill_parent"  
  46.         android:text="欢迎进入 droid 世界!" />  
  47.           
  48.     <ImageView  
  49.         android:id="@+id/view4"  
  50.         android:layout_width="fill_parent"  
  51.         android:layout_height="fill_parent"  
  52.         android:src="@drawable/robot" />  
  53. </FrameLayout>  
  54. <TabWidget     
  55.     android:id="@android:id/tabs"   
  56.     android:layout_width="fill_parent"     
  57.     android:layout_height="wrap_content" />     
  58. </LinearLayout>     
  59. </TabHost>   

 

 

* 得到TabHost tHost 仅在TabActivity中有效

Java代码 
  1. tHost = this.getTabHost();  

 

 

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

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

 

 

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

Java代码 
  1. tHost.setOnTabChangedListener(new OnTabChangeListener(){  
  2.             @Override  
  3.             public void onTabChanged(String tabId) {  
  4.                 // TODO Auto-generated method stub  
  5.             }  
  6.               
  7.         });  

 

 

* emulator 运行情况:

 

 

 

 

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

 

 

Java代码 
  1. public class CustomLayout implements TabHost.TabContentFactory  {  
  2.         Activity activity;  
  3.         LayoutInflater inflaterHelper;  
  4.           
  5.         LinearLayout layout;  
  6.           
  7.         public CustomLayout (Activity a) {  
  8.             activity = a;  
  9.               
  10.             inflaterHelper = a.getLayoutInflater();  
  11.         }  
  12.           
  13.         /** {@inheritDoc} *///tag 标记各个标签  
  14.         public View createTabContent(String tag) {  
  15.                 return addCustomView(tag);  
  16.         }  
  17.           
  18.         public View addCustomView(String id){  
  19.               
  20.             layout = new LinearLayout(activity);  
  21.             layout.setOrientation(LinearLayout.VERTICAL);  
  22.               
  23.               
  24.             if(id.equals(Tab1)){  
  25.                 ImageView iv = new ImageView(activity);  
  26.                 iv.setImageResource(R.drawable.beijing_big);  
  27.                 layout.addView(iv,  
  28.                         new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));  
  29.             }  
  30.             else if(id.equals(Tab2)){  
  31.                 EditText edit = new EditText(activity);  
  32.                 layout.addView(edit,  
  33.                         new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));  
  34.                   
  35.                 Button btn = new Button(activity);  
  36.                 btn.setText("OK");  
  37.                 btn.setWidth(100);  
  38.                 layout.addView(btn,  
  39.                         new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT));  
  40.                   
  41.                 RadioGroup rGroup = new RadioGroup(activity);  
  42.                 rGroup.setOrientation(LinearLayout.HORIZONTAL);  
  43.                 RadioButton radio1 = new RadioButton(activity);  
  44.                 radio1.setText("Radio A");  
  45.                 rGroup.addView(radio1);  
  46.                 RadioButton radio2 = new RadioButton(activity);  
  47.                 radio2.setText("Radio B");  
  48.                 rGroup.addView(radio2);  
  49.                   
  50.                 layout.addView(rGroup,  
  51.                         new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT));  
  52.             }  
  53.             else if(id.equals(Tab3)){  
  54.                   
  55.                 LinearLayout.LayoutParams param3 =  
  56.                     new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT);  
  57.                   
  58.                 layout.addView(inflaterHelper.inflate(R.layout.hello, null),param3);  
  59.             }  
  60.             else if(id.equals(Tab4)){  
  61.                 TextView tv = new TextView(activity);  
  62.                 tv.setText("HelloTags!");  
  63.                 tv.setGravity(Gravity.CENTER);  
  64.                 layout.addView(tv);  
  65.             }  
  66.   
  67.             return layout;  
  68.         }  
  69.           
  70.     }  

 

 

* 如何使用:

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

 

 

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

Java代码 
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="horizontal"  
  4.     android:layout_width="fill_parent"  
  5.     android:layout_height="fill_parent"  
  6.     >  
  7. <RelativeLayout  
  8.     android:orientation="vertical"  
  9.     android:layout_width="fill_parent"  
  10.     android:layout_height="wrap_content">  
  11.     <ImageView  />  
  12.     <TextView  />  
  13. </RelativeLayout>  
  14. <RelativeLayout  
  15.     android:orientation="vertical"  
  16.     android:layout_width="fill_parent"  
  17.     android:layout_height="wrap_content">  
  18.     <ImageView  />  
  19.     <TextView  />  
  20. </RelativeLayout>  
  21. <RelativeLayout  
  22.     android:orientation="vertical"  
  23.     android:layout_width="fill_parent"  
  24.     android:layout_height="wrap_content">  
  25.     <ImageView  />  
  26.     <TextView  />  
  27. </RelativeLayout>  
  28. <RelativeLayout  
  29.     android:orientation="vertical"  
  30.     android:layout_width="fill_parent"  
  31.     android:layout_height="wrap_content">  
  32.     <ImageView  />  
  33.     <TextView  />  
  34. </RelativeLayout>  
  35. </LinearLayout>  

 

 

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

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

 

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

 

 

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

Java代码 
  1. public View composeLayout(String s, int i){  
  2.         LinearLayout layout = new LinearLayout(this);  
  3.         layout.setOrientation(LinearLayout.VERTICAL);  
  4.           
  5.         TextView tv = new TextView(this);  
  6.         tv.setGravity(Gravity.CENTER);  
  7.         tv.setSingleLine(true);  
  8.         tv.setText(s);  
  9.         layout.addView(tv,   
  10.                 new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));  
  11.           
  12.         ImageView iv = new ImageView(this);  
  13.         iv.setImageResource(i);  
  14.         layout.addView(iv,   
  15.                 new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT));  
  16.         return layout;  
  17.     }  

 

 

* 得到 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!

 

from:http://www.javaeye.com/topic/602737

你可能感兴趣的:(java,android,layout,扩展,tabs,encoding)