[新手]Android中，UI设计的技巧之按钮样式的变化

这里只是自己在学习Android的过程中，一些非常基础的知识。。。  对于大神们来说没什么技术含量的！

先上效果图	布局文件列表

 

在这篇中，我们主要来实现，下面TABHOST中的UI界面。不会文字，直接上代码：

main.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="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"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="@drawable/maintab_toolbar_bg"
            android:gravity="center_vertical"
            android:orientation="horizontal" >

            <RadioButton
                android:id="@+id/tabs_recommend"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/tabs_recommend"
                android:text="@string/tabs_recommend" />

            <RadioButton
                android:id="@+id/tabs_home"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/tabs_home"
                android:text="@string/tabs_home" />

            <RadioButton
                android:id="@+id/tabs_personal"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/tabs_personal"
                android:text="@string/tabs_personal" />

            <RadioButton
                android:id="@+id/tabs_side"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/tabs_side"
                android:text="@string/tabs_side" />

            <RadioButton
                android:id="@+id/tabs_more"
                style="@style/main_tab_bottom"
                android:drawableTop="@drawable/tabs_more"
                android:text="@string/tabs_more" />
        </RadioGroup>
    </LinearLayout>

</TabHost>

styles.xml 加入以下样式

    <style name="main_tab_bottom">
        <item name="android:textSize">@dimen/bottom_tab_font_size</item>
        <item name="android:textColor">@color/maintabs_button_color</item>
        <item name="android:ellipsize">marquee</item>
        <item name="android:gravity">center_horizontal</item>
        <item name="android:background">@drawable/tabs_btn_bg</item>
        <item name="android:paddingTop">@dimen/bottom_tab_padding_up</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:button">@null</item>
        <item name="android:singleLine">true</item>
        <item name="android:drawablePadding">@dimen/bottom_tab_padding_drawable</item>
        <item name="android:layout_weight">1.0</item>
    </style>

tabs_btn_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    <!-- 当然点击时，将背景改为黑色 -->
    <item android:drawable="@android:color/black" android:state_enabled="true" android:state_pressed="true"/>
    <item android:drawable="@android:color/black" android:state_checked="true"/>
    <!-- 默认状态下的背景图片 -->
    <item android:drawable="@drawable/maintab_toolbar_bg"/>

</selector>

maintabs_button_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_enabled="true" android:state_pressed="true" android:color="#FF30A5FF"/>
    <item android:state_checked="true" android:color="#FF30A5FF"/>
    <item android:color="#FFBBBBBB"/>

</selector>

dimens.xml

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

    <dimen name="bottom_tab_padding_drawable">2.0dp</dimen>
    <dimen name="bottom_tab_padding_up">3.0dp</dimen>
    <dimen name="bottom_tab_font_size">13.0dp</dimen>

</resources>

tabs_home.xml，tabs_more.xml,tabs_personal.xml,tabs_side.xml,tabs_recommend.xml 文件跟下面的内容是类似的

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/tabbar_icon_home" android:state_enabled="true" android:state_pressed="true"/>
    <item android:drawable="@drawable/tabbar_icon_home_hl" android:state_checked="true"/>
    <item android:drawable="@drawable/tabbar_icon_home"/>

</selector>

这样就实现了，当焦点在“首页”时，就可以改变 “首页” 按钮的图片和文件颜色的变化。