android UI - 仿威信tab样式

由于前段时间工作比较忙，前面的api demo的学习耽误了一段时间，忙里偷闲分享一个威信UI的例子

效果图：

其实现原理就是 TabHost + RadioButton

 

1、首先来看下layout文件

 

<?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:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical" >

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="0.0dip"
            android:layout_weight="1.0" />

        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0.0"
            android:visibility="gone" />

        <RadioGroup
            android:id="@id/main_tab_group"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@drawable/mmfooter_bg"
            android:gravity="bottom"
            android:orientation="horizontal"
            android:paddingTop="2.0dip" >

            <RadioButton
                android:id="@id/main_tab_weixin"
                style="@style/MMTabButton"
                android:checked="true"
                android:drawableTop="@drawable/tab_weixin"
                android:text="@string/main_title" />

            <RadioButton
                android:id="@id/main_tab_address"
                style="@style/MMTabButton"
                android:drawableTop="@drawable/tab_address"
                android:text="@string/main_contact" />

            <RadioButton
                android:id="@id/main_tab_find_friend"
                style="@style/MMTabButton"
                android:drawableTop="@drawable/tab_find_frd"
                android:text="@string/main_addcontact" />

            <RadioButton
                android:id="@id/main_tab_settings"
                style="@style/MMTabButton"
                android:drawableTop="@drawable/tab_settings"
                android:text="@string/main_setting" />
        </RadioGroup>
    </LinearLayout>

</TabHost>

 2、接下来中电看RadioButton的各个属性 

style属性引用的样式：

 

<style name="MMTabButton">
    <item name="android:textSize">12.0dip</item>
        <item name="android:textColor">@color/mm_tab_btn</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:background">@drawable/tab_bg</item>
        <item name="android:layout_width">0.0dip</item>
        <item name="android:layout_height">wrap_content</item>
		<item name="android:layout_marginLeft">0.70000005dip</item> 
        <item name="android:layout_marginRight">0.70000005dip</item>
        <item name="android:button">@null</item>
        <item name="android:layout_weight">1.0</item> 
    </style>

其中background

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/tab_bg_halo"/>
    <item android:state_selected="true" android:drawable="@drawable/tab_bg_halo"/>
    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/tab_bg_halo" />
    <item android:drawable="@drawable/mm_trans" />
</selector>

 drawabletop属性

 

<?xml version="1.0" encoding="utf-8"?>
<selector
  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@drawable/tab_weixin_pressed"/>
    <item android:state_selected="true" android:drawable="@drawable/tab_weixin_pressed"/>
    <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/tab_weixin_pressed" />
    <item android:drawable="@drawable/tab_weixin_normal" />
</selector>

 至此界面效果完成

感兴趣的同学可以下载附件仔细研究。

注意：源码来自 微度网 苗条的胖子

评论

1 楼 kensunhu 2013-03-09  

正是我想要的。典型的app ui布局。谢谢！