自定义TabActivity

最新推荐文章于 2016-11-25 15:16:48 发布

原创最新推荐文章于 2016-11-25 15:16:48 发布 · 176 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Android #XML #Apache

本文介绍如何自定义Android中的TabActivity，包括改变TAB栏位置至页面底部及自定义TAB的图片显示方式。通过修改布局文件与使用自定义视图实现更灵活的设计。

系统自带的TabActivity的效果不甚理想。开发中对其自定义可能有两种，第一种，改变TAB行的位置，如放到页面下方。第二种，对TabHost图片的自定义。

一、改变Tab栏的位置。

java代码。在TabActivity的oncreate方法中添加

setContentView(R.layout.tab_host);

其中 Layout tab_host.xml 是从系统资源文件中抠出来之后略作修改。

系统原来的 tab_host.xml内容如下

<?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="match_parent" android:layout_height="match_parent">
    <LinearLayout android:orientation="vertical"
        android:layout_width="match_parent" android:layout_height="match_parent">
        <TabWidget android:id="@android:id/tabs" android:layout_width="match_parent"
            android:layout_height="wrap_content" android:layout_weight="0" />
        <FrameLayout android:id="@android:id/tabcontent"
            android:layout_width="match_parent" android:layout_height="0dip"
            android:layout_weight="1"/>
    </LinearLayout>
</TabHost>

要实现TAB栏在页面下方，只需简单修改。

<?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">
        <LinearLayout android:orientation="vertical"
        android:layout_width="fill_parent" android:layout_height="fill_parent">
                 <FrameLayout android:id="@android:id/tabcontent"
                 android:layout_width="fill_parent" android:layout_height="0dip"
            android:layout_weight="1"/>

这样，就实现了ＴＡＢ栏在页面下册。需要注意的是，view的id不要修改。
二、自定义TAB的图片。系统自带的tab_indicator.xml内容如下

<?xml version="1.0" encoding="utf-8"?>


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="0dip"
    android:layout_height="64dip"
    android:layout_weight="1"
    android:layout_marginLeft="-3dip"
    android:layout_marginRight="-3dip"
    android:orientation="vertical"
    android:background="@android:drawable/tab_indicator">

    <ImageView android:id="@+id/icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
    />

    <TextView android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        style="?android:attr/tabWidgetStyle"
    />

</RelativeLayout>
可以看出，默认情况下，图标在文字上方，并且不能占到整个格，无法满足设计需要。因此可以重写该Layout。

编写tab_in.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="wrap_content"
     android:layout_height="64dip"
     android:orientation="vertical"
     >
</RelativeLayout>

View view1 = inflater.inflate(R.layout.tab_in, null);;
        View view2 = inflater.inflate(R.layout.tab_in, null);;
        View view3 = inflater.inflate(R.layout.tab_in, null);;



        view1 .setBackgroundResource(R.drawable.record_upload_button_stateful);
        view2 .setBackgroundResource(R.drawable.record_download_button_stateful);
        view3 .setBackgroundResource(R.drawable.record_receive_button_stateful);

tabHost.addTab(tabHost
                .newTabSpec("view1")
                .setIndicator(view1)
        );

        tabHost.addTab(tabHost
                .newTabSpec("view2")
                .setIndicator(view2)
        );


        tabHost.addTab(tabHost
                .newTabSpec("view3")
                .setIndicator(view3)
           );

---------------------------搞定