Android下TabActivity的使用(2)

來源:互聯網
上載者:User

上一篇寫了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);}});}

即當圖片被點擊時,將會顯示相應的標籤。

顯示效果

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.