Android的shape和顏色選擇器結合使用

我叫阿狸貓發表於2014-03-05

效果如下:

點選前


點選後



shape檔案和顏色選擇器的定義都必須定義在drawable資料夾下




bind_bg_normal.xml 正常時候的顏色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"><!-- android:shape="rectangle"表示圓角長方形 -->
    <corners android:radius="2dp"/><!-- 圓角的弧度 -->
    <gradient   android:startColor="@color/black"
        		android:endColor="@color/blue"/><!-- 漸變色的設定  這裡可以設定起始  中間  結束位置的顏色 -->
    <!-- 設定邊框顏色  寬度  dashWidth虛線的長度    虛線之間的間隔長度dashGap    -->
    <stroke android:width="1dp" android:dashWidth="10dp" android:dashGap="1dp" android:color="@color/white"/>
</shape>


bind_bg_pressed.xml 按下時候的顏色

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="2dp"/>
    <gradient android:startColor="@color/white"
        		android:endColor="@color/black"/>
    <stroke android:width="1dp" android:dashWidth="10dp" android:dashGap="15dp" android:color="@color/blue"/>
</shape>

bind_bg_selected.xml顏色選擇器

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <!-- 按下時顯示顏色 -->
    <item android:drawable="@drawable/bind_bg_pressed" android:state_pressed="true"/>
    <!-- 獲取焦點顯示顏色 -->
    <item android:drawable="@drawable/bind_bg_pressed" android:state_focused="true"/>
    <!-- 選擇狀態時顯示顏色 -->
    <item android:drawable="@drawable/bind_bg_normal" android:state_selected="true"/>
    <!-- 正常狀態下顯示顏色 -->
    <item android:drawable="@drawable/bind_bg_normal"/>
</selector>  


color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#000000</color>
    <color name="blue">#FF3F00</color>
    <color name="white">#FFFFFF</color>
</resources>

main.xml  別忘記用android:background匯入顏色選擇器,讓其作用於這個佈局檔案

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

    <RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/bind_bg_selected"
        android:clickable="true" ><!-- RelativeLayout必須加android:clickable="true" 點選才有反映 -->

        <TextView
            android:layout_width="fill_parent"
            android:layout_height="30dp"
            android:gravity="center"
            android:text="SHAPE" />
    </RelativeLayout>

</LinearLayout>




相關文章