Android下TabActivity的使用（2）

最新推荐文章于 2024-10-31 14:47:24 发布

AlburtHoffman

最新推荐文章于 2024-10-31 14:47:24 发布

阅读量991

点赞数

分类专栏： Android开发文章标签： android Android ANDROID java Java JAVA layout Layout ui UI

本文链接：https://blog.csdn.net/AlburtHoffman/article/details/8453738

版权

Android开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

即当图片被点击时，将会显示相应的标签。