在 "標籤頁(TabHost+TabWidget)的使用" 提到預設標籤頁的使用,實際上的應用卻不會使用預設標籤頁,因為介面美觀實在不夠,1個好的應用除了內容外,其 UI 的包裝也是相當重要, 這裡介紹如何使用自訂的標籤頁,如下圖
首先來看看 TabHost 套用的佈局檔,如下
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:
7: <LinearLayout
8: android:id="@+id/LinearLayout01"
9: android:layout_width="fill_parent"
10: android:layout_height="fill_parent"
11: android:orientation="vertical" >
12:
13: <!-- Admob add here -->
14:
15: <LinearLayout
16: android:id="@+id/AdLayout"
17: android:layout_width="wrap_content"
18: android:layout_height="wrap_content" >
19: </LinearLayout>
20:
21: <TabWidget
22: android:id="@android:id/tabs"
23: android:layout_width="fill_parent"
24: android:layout_height="wrap_content"
25: android:visibility="gone" />
26:
27: <!-- framelayout put here will be buttom -->
28:
29: <RadioGroup
30: android:id="@+id/tab_group"
31: android:layout_width="fill_parent"
32: android:layout_height="50dp"
33: android:layout_gravity="bottom"
34: android:background="@drawable/background1"
35: android:checkedButton="@+id/tab1"
36: android:gravity="center_vertical"
37: android:orientation="horizontal" >
38:
39: <!-- button set null that will remove default radio button -->
40:
41: <RadioButton
42: android:id="@id/tab1"
43: android:layout_width="fill_parent"
44: android:layout_height="fill_parent"
45: android:layout_marginTop="1.0dip"
46: android:layout_weight="1.0"
47: android:background="@drawable/tab_bg_selector"
48: android:button="@null"
49: android:gravity="center"
50: android:tag="tab1"
51: android:text="消費清單" />
52:
53: <RadioButton
54: android:id="@+id/tab2"
55: android:layout_width="fill_parent"
56: android:layout_height="fill_parent"
57: android:layout_marginTop="1.0dip"
58: android:layout_weight="1.0"
59: android:background="@drawable/tab_bg_selector"
60: android:button="@null"
61: android:gravity="center"
62: android:text="本日消費" />
63:
64: <RadioButton
65: android:id="@+id/tab3"
66: android:layout_width="fill_parent"
67: android:layout_height="fill_parent"
68: android:layout_marginTop="1.0dip"
69: android:layout_weight="1.0"
70: android:background="@drawable/tab_bg_selector"
71: android:button="@null"
72: android:gravity="center"
73: android:text="本周消費" />
74:
75: <RadioButton
76: android:id="@+id/tab4"
77: android:layout_width="fill_parent"
78: android:layout_height="fill_parent"
79: android:layout_marginTop="1.0dip"
80: android:layout_weight="1.0"
81: android:background="@drawable/tab_bg_selector"
82: android:button="@null"
83: android:gravity="center"
84: android:text="本月消費" />
85: </RadioGroup>
86:
87: <!-- framelayout put here will be Top -->
88: <FrameLayout
89: android:id="@android:id/tabcontent"
90: android:layout_width="fill_parent"
91: android:layout_height="0.0dip"
92: android:layout_weight="1.0" />
93:
94: </LinearLayout>
95:
96: </TabHost>
第 7 行指出使用垂直線性排版
第 8 ~ 11 行為 LinearLayout 的內容
第 13 ~ 19 行為 Admob 的使用,如果沒有 admob 可以忽略
第 21 ~ 25 行為原先的 TabWidget ,注意 25 行我們直接讓它不顯示,也不會作用
第 29 ~ 85 行為取代 TabWidget 的 RadioGroup , 裡面有 4 個 RadioButton 分別在 41, 53, 64, 75 行
第 32 行設定高度
第 33 行設定在畫面底部
第 34 行設定底圖為 background1,為1張 png 圖,它會設定在整個按鈕的下方,注意這張圖的寬高
第 36 行設定其內容按鈕為橫向排列
第 41 ~ 51 行為第 1 個按鈕的設定
第 42 行設定其 id, 注意這個 id 名稱會連結到程式碼中
第 43 ~ 44 行設定尺寸
第 45 行距離上方多 1 dp
第 46 行設定 weight 為 1.0
第 47 行設定按鈕的格式為 xml 檔,注意它決定按鈕顯示的外觀,其內容如下
1: <?xml version="1.0" encoding="utf-8"?>
2: <selector xmlns:android="http://schemas.android.com/apk/res/android">
3:
4: <item android:drawable="@drawable/button1" android:state_focused="true"/>
5: <item android:drawable="@drawable/button2" android:state_pressed="true"/>
6: <item android:drawable="@drawable/button3" android:state_checked="true"/>
7:
8: </selector>
第 4 行無作用
第 5 行為按鈕被按下的顯示圖片,注意圖片寬高
第 6 行為按鈕被選擇的顯示圖片,注意圖片寬高
第 48 行設定為 null ,以去除預設的按鈕外觀
第 50 行設定其 tag, 注意這個 tag 名稱會連結到程式碼中
第 51 行設定顯示字樣,其他按鈕也是類似的設定
第 88 ~ 92 行為 framelayout 的設定, 注意它也可以放在第 27 行 ,如此按鈕們都會移動到畫面底部
看完 TabHost 套用的佈局檔後,接著來看看其程式碼
1: package com.example.helloworld;
2:
3: import android.app.TabActivity;
4: import android.content.Intent;
5: import android.os.Bundle;
6: import android.view.animation.Animation;
7: import android.view.animation.ScaleAnimation;
8: import android.widget.LinearLayout;
9: import android.widget.RadioButton;
10: import android.widget.RadioGroup;
11: import android.widget.RadioGroup.OnCheckedChangeListener;
12: import android.widget.TabHost;
13:
14: import com.google.ads.AdRequest;
15: import com.google.ads.AdSize;
16: import com.google.ads.AdView;
17:
18: @SuppressWarnings("deprecation")
19: public class Table_Flow extends TabActivity{
20:
21:
22: private RadioGroup tabGroup;
23:
24: private RadioButton rb1;
25: private RadioButton rb2;
26: private RadioButton rb3;
27: private RadioButton rb4;
28:
29: private TabHost thost;
30:
31: public void onCreate(Bundle savedInstanceState){
32: super.onCreate(savedInstanceState);
33:
34: setContentView(R.layout.table_host);
35:
36: // showAdmob();
37:
38: initView();
39: }
40:
41:
42: void initView(){
43:
44: thost = getTabHost();// build tabhost
45:
46: tabGroup = (RadioGroup) findViewById(R.id.tab_group);
47:
48: rb1 = (RadioButton)findViewById(R.id.tab1);
49: rb2 = (RadioButton)findViewById(R.id.tab2);
50: rb3 = (RadioButton)findViewById(R.id.tab3);
51: rb4 = (RadioButton)findViewById(R.id.tab4);
52:
53: Intent inte1 = new Intent(this, Table_widget4.class);
54: Intent inte2 = new Intent(this, Table_widget1.class);
55: Intent inte3 = new Intent(this, Table_widget2.class);
56: Intent inte4 = new Intent(this, Table_widget3.class);
57:
58: thost.addTab(thost.newTabSpec("TAB1").setIndicator("tab1").setContent(inte1));
59: thost.addTab(thost.newTabSpec("TAB4").setIndicator("tab4").setContent(inte2));
60: thost.addTab(thost.newTabSpec("TAB2").setIndicator("tab2").setContent(inte3));
61: thost.addTab(thost.newTabSpec("TAB3").setIndicator("tab3").setContent(inte4));
62:
63:
64: tabGroup.setOnCheckedChangeListener(new OnTabChangeListener());
65:
66: }
67:
68: private class OnTabChangeListener implements OnCheckedChangeListener {
69:
70: @Override
71: public void onCheckedChanged(RadioGroup group, int id) {
72: // TODO Auto-generated method stub
73:
74: //button anim
75: Animation scalybig = new ScaleAnimation(0.0f, 1.0f, 0.0f, 1.0f);
76: scalybig.setDuration(500);
77:
78:
79: switch(id){
80:
81: case R.id.tab1:
82: thost.setCurrentTabByTag("TAB1");
83: rb1.startAnimation(scalybig);
84: break;
85:
86: case R.id.tab2:
87: thost.setCurrentTabByTag("TAB2");
88: rb2.startAnimation(scalybig);
89: break;
90:
91: case R.id.tab3:
92: thost.setCurrentTabByTag("TAB3");
93: rb3.startAnimation(scalybig);
94: break;
95:
96: case R.id.tab4:
97: thost.setCurrentTabByTag("TAB4");
98: rb4.startAnimation(scalybig);
99:
100: break;
101: }
102:
103: }
104:
105: }
106:
107:
108: void showAdmob(){
109:
110: AdView adView;
111:
112: // Create the adView
113: adView = new AdView(this, AdSize.BANNER, "a150189a3abeb1a");
114:
115: LinearLayout layout = (LinearLayout)findViewById(R.id.AdLayout);
116:
117: layout.addView(adView);
118:
119: adView.loadAd(new AdRequest());
120: }
121: }
122:
123:
124:
事實上內容也沒有太大的改變,只是加入 RadioGroup
第 34 行套用上述的佈局檔
第 36 行為 Admob 的使用,目前不用
第 46 行取得 RadioGroup, 注意 id 要對應 xml 中的設定
第 48 ~ 51 行取得 4 個按鈕, 我針對按鈕有做點選後的動畫
第 53 ~ 56 行設定 4 個 Intent
第 58 ~ 61 行設定 4 個按鈕對應的內容, 注意 setIndicator("") 和 setContent(),其傳入參數必須對應 xml 中的設定
第 64 行設定按鈕們的監聽器,其內容在 68 ~ 105 行
第 71 行覆寫 onCheckedChanged 方法
第 75 ~ 76 行為按鈕被按下時播放的動畫
第 79 ~ 101 行為按鈕按下切換的方法,注意 case 對應的 id 和 setCurrentTabByTag 的 id 必須符合
Posted in: Android App
0 意見:
張貼留言