RadioButton佈局圖片+文字 實現tabhost效果

PS:2013年寫在開源中國的,現在轉過來

main.xml

<!-- 左邊底部佈局 -->


    <LinearLayout

        android:id="@+id/approver_task_titles_radio_group"

        android:layout_width="match_parent"  -----使Button平分寬度

        android:layout_height="wrap_content"

        android:layout_alignParentBottom="true"

        android:orientation="vertical"

        android:padding="8dp" >


        <!-- 左邊底部圖標 -->`


<RadioGroup

            android:id="@+id/approver_task_titles_radio_group_icon"

            android:layout_width="match_parent"

            android:layout_height="60dp"  ----讓文字顯示出來

            android:gravity="center"

            android:background="@drawable/background_bottom_approver"

—-真個背景,可有可無看喜好

 android:orientation="horizontal" >


            <RadioButton

                android:id="@+id/approver_radio_all"

                style="@style/radiobutton_bottom"

—-引用一個樣式下面給出樣式代碼

android:drawableTop="@drawable/radio_all_selector"

—-讓圖片顯示在文字上面,並且引用xml文件,設置點擊變化圖片效果

 android:background="@drawable/radio_background_selector"

                android:checked="true"

—-默認被選中

android:paddingLeft="10dp"

                android:paddingRight="14dp"

                android:text="@string/task_all"/>----給出Button文字

            <RadioButton

                android:id="@+id/approver_radio_wait_approver"

                style="@style/radiobutton_bottom"

                android:drawableTop="@drawable/radio_wait_approve_selector"

                android:background="@drawable/radio_background_selector"

                android:text="@string/task_wait_approver" />

            <RadioButton

                android:id="@+id/approver_radio_working"

                style="@style/radiobutton_bottom"

                android:drawableTop="@drawable/radio_doing_selector"

                android:background="@drawable/radio_background_selector"

                android:paddingLeft="6dp"

                android:text="@string/task_doing"/>

        </RadioGroup>

        <!-- 左側底部文字 -->

    </LinearLayout>





上面應用的樣式

<style name="radiobutton_bottom">

        <item name="android:layout_width">match_parent</item>

        <item name="android:layout_height">match_parent</item>

        <item name="android:button">@null</item>  ----去掉Button的圓點   

        <item name="android:layout_margin">1dip</item>

        <item name="android:background">@android :color/transparent</item>

—–設置去點Button前面的空白,這個空白是去圓點後留下的

        <item name="android:layout_weight">1</item>

        <item name="android:gravity">center</item>

        <item name="android:textColor">@drawable/color_radiobutton_text</item>

—–設置文字顏色的變化,引用了xml.下面給出xml文件

<item name="android:textSize">14sp</item>
<!--Color_radiobutton_text.xml-->佈局文件

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

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="#000000" android:state_checked="true"/>

    <item android:color="#000000" android:state_pressed="true"/>

    <item android:color="#7e7e7e"/>----默認顏色

</selector>

效果圖片:這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章