Use of tabactivity in Android (2)

In the previous article, I wrote the basic usage of tabactivity. This section describes tabactivity interface customization. Many projects need to redesign the tag position and style, such as placing the tag below, and displaying it with images rather than text.

Interface Structure

The following figure shows the tabactivity structure:

Where, tabhost is the root element and its ID is @ Android: ID/tabhost, which contains tabwidget and tabcontent. Tabwidget is the location where the tag is located. The ID is @ Android: ID/tabs; the ID of tabcontent is @ Android: ID/tabcontent, which is the content of each tag.Framelayout clothShow only one child element at a time.

Custom Layout

Once we know the structure of the interface, we only need to define a similar tag and set the ID. The following is an example:

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

In this example, the labels are displayed below and the image is displayed instead of text.

Corresponding Java code

Only image settings are displayed here.

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

When an image is clicked, the corresponding tag is displayed.

Display Effect