标签/TabActivity 深度研究

标签/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 >    

<?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();  

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));  

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));

 

 

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

Java代码

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

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

 

 

* 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.     }  

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));  

CustomLayout ct = new CustomLayout(this);

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>  

<?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));   

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.     }  

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 );  

LinearLayout ll=(LinearLayout)tHost.getChildAt(0); 
        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.     }  

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

 

 

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

 

 

that's all!