1. 程式人生 > >【Android控制元件】點選變暗效果

【Android控制元件】點選變暗效果

  • 需要準備
    1. 兩張圖片做背景,一張的正常顯示的效果,一張是點選後呈現的效果。
    2. 或者兩個表示不同效果的xml檔案,一個表示正常顯示的效果,一個表示點選後呈現的效果。
<!--greenbutton_pressed-->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >
    <solid
android:color="#34A725"/>
<corners android:radius="5dp"/> </shape> <!--greenbutton_default--> <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <solid android:color
="#3FD22C"/>
<corners android:radius="5dp"/> </shape>
  • 編輯一個包含selector的xml檔案,放入drawable資料夾
<!--檔名:greenbutton_selector -->
<?xml version="1.0" encoding="utf-8"?>
<selector  xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable
="@drawable/greenbutton_default" android:state_checked="true">
</item> <item android:drawable="@drawable/greenbutton_default" android:state_selected="true"></item> <item android:drawable="@drawable/greenbutton_pressed" android:state_pressed="true"></item> <item android:drawable="@drawable/greenbutton_default"></item> </selector> <!--weixin_selector--> <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" > <item android:drawable="@drawable/weixinpress" android:state_pressed="true"></item> <item android:drawable="@drawable/weixin"></item> </selector>
  • 編輯相關屬性,使指向剛才建立的xml檔案。比如:
    1. Button元素的background屬性
    2. TextView的drawableTop屬性
    <Button 
        android:id="@+id/ui_login_btn"
        android:layout_width="fill_parent" 
        android:layout_height="wrap_content" 
        android:text="登入" 
        android:background="@drawable/greenbutton_selector"
        />
    <!--TextView的clickable屬性設為true-->
    <TextView
            android:id="@+id/tv_tencent"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableTop="@drawable/common_tv_qq_selector"
            android:clickable="true"
            android:text="騰訊QQ" 
            android:gravity="center_horizontal"/>