Android UI設計-Tabhost標籤頁

 

何謂標籤 印象最深刻的應該是這個

 

 

 

 

現在 我們將通過一系列的擴展來研究之

寫道
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();  
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!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章