上一篇寫了TabActivity的基本用法,這節來講訴TabActivity的介面定製。很多項目都需要重新設計標籤的位置和樣式,比如將標籤放到下方,使用圖片而不是文字來顯示等等。
介面的結構
下面這幅圖展示了TabActivity的結構:
其中,TabHost是根項目,其id為@android:id/tabhost,包含了TabWidget和TabContent。TabWidget就是標籤所在的位置,id為@android:id/tabs;TabContent的id為@android:id/tabcontent,則是每個標籤的內容,使用FrameLayout的布局,每次只顯示一個子項目。
自訂布局
知道了介面的結構,我們只要定義一個類似的標籤,將id設定好就行了。下面是一個樣本:
<?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" android:background="@drawable/background" > <LinearLayout android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:padding="0dp"> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="0dp" android:layout_weight="1"> </FrameLayout> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginBottom="-4dp" android:layout_weight="0" android:background="@color/transparent" android:visibility="gone"/> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="bottom|center_horizontal" android:gravity="bottom|center_horizontal" android:orientation="horizontal" > <ImageView android:id="@+id/stopwatch_tabwidget_stopwatchTab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/transparent" android:clickable="true" android:scaleType="center" android:src="@drawable/stopwatch_sd" android:tag="stopwatch" /> <ImageView android:id="@+id/stopwatch_tabwidget_reviewTab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/transparent" android:clickable="true" android:scaleType="center" android:src="@drawable/review" android:tag="review" /> <ImageView android:id="@+id/stopwatch_tabwidget_chartTab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/transparent" android:clickable="true" android:scaleType="center" android:src="@drawable/chart" android:tag="chart" /> <ImageView android:id="@+id/stopwatch_tabwidget_cloudTab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/transparent" android:clickable="true" android:scaleType="center" android:src="@drawable/cloud" android:tag="cloud" /> <ImageView android:id="@+id/stopwatch_tabwidget_shareTab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@color/transparent" android:clickable="true" android:scaleType="center" android:src="@drawable/share" android:tag="share" /> </LinearLayout> </LinearLayout></TabHost>
這個樣本將標籤一到下面,並且使用圖片而不是文字來顯示。
相應的Java代碼
這裡只顯示對圖片的設定。
for (int i = 0; i < imageViews.size(); i++) {final int currentTabIndex = i;imageViews.get(i).setOnClickListener(new View.OnClickListener() {public void onClick(View v) {switchToTab(currentTabIndex);}});}
即當圖片被點擊時,將會顯示相應的標籤。
顯示效果