Android點(diǎn)擊效果

nighteagle

我們在開發(fā)網(wǎng)站時(shí)，會發(fā)現(xiàn)當(dāng)我們添加<a/>標(biāo)簽后，標(biāo)簽有一個(gè)點(diǎn)擊效果，比如顏色變化，這樣開看起來用戶體驗(yàn)會很棒，那么在我們的Android開發(fā)中如何加入這樣的效果呢？本篇就為大家揭開它的神秘面紗。

　　既然是點(diǎn)擊事件的變化，我們就要監(jiān)控用戶是否點(diǎn)擊，這里我有兩種實(shí)現(xiàn)方式：1、通過改變背景圖片達(dá)到上述效果；2、通過改變背景顏色來達(dá)到上述效果。

　　兩者各有千秋，比如當(dāng)我們設(shè)計(jì)按鈕（Button）的點(diǎn)擊事件時(shí)，建議使用第一種；而當(dāng)我們設(shè)計(jì)諸如Item時(shí)，建議使用第二種。好了下面開始為大家進(jìn)行代碼分析：

　　首先為大家介紹第一種：通過改變背景圖片來達(dá)到上述效果，既然是通過改變背景圖片，所以我們需要事先準(zhǔn)備好2張圖片，一張作為未點(diǎn)擊時(shí)，一張作為點(diǎn)擊時(shí)。

　　然后我們需要在res下新建一個(gè)drawable文件夾，在里面新建一個(gè)btn_bg.xml文件：

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
   
3. 
   
4.     <!-- 點(diǎn)擊時(shí)  -->
   
5.     <item android:drawable="@drawable/img_1" android:state_pressed="true"/>
   
6.     <!-- 未點(diǎn)擊時(shí) -->
   
7.     <item android:drawable="@drawable/img_2" android:state_pressed="false"/>
   
8. 
   
9. </selector>

復(fù)制代碼

我們的布局文件（main_activity.xml）：

1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
2.     xmlns:tools="http://schemas.android.com/tools"
   
3.     android:layout_width="match_parent"
   
4.     android:layout_height="match_parent"
   
5.     tools:context=".MainActivity" >
   
6.    
   
7.     <Button
   
8.         android:layout_width="fill_parent"
   
9.         android:layout_height="wrap_content"
   
10.        android:background="@drawable/btn_bg"  （看這一條）
    
11.         android:text="點(diǎn)擊變化"
    
12.         />
    
13.    
    
14. </RelativeLayout>

復(fù)制代碼

特別注意標(biāo)注處。好了我們的第一個(gè)效果就實(shí)現(xiàn)了，大家感覺如何。下面我們來一起學(xué)習(xí)一下第二種方法：

　　第二種方法無需準(zhǔn)備圖片，我們通過改變背景的顏色來達(dá)到上述效果，既然這里需要使用到顏色，先為大家分享一下16進(jìn)制的顏色對照表：

有了顏色對照表，我們就開始進(jìn)行代碼解析吧：

　　第一步在value文件夾下新建一個(gè)col.xml文件，把我么可能使用到的顏色添加進(jìn)去：

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <resources>
   
3. 
   
4.     <drawable name="write">#fff</drawable>
   
5. 
   
6.     <drawable name="gray">#aaa</drawable>
   
7. 
   
8. </resources>

復(fù)制代碼

第二步修改res下drawable文件夾下的btn_bg.xml文件：

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">
   
3. 
   
4.     <!-- 點(diǎn)擊時(shí)  -->
   
5.     <item android:drawable="@drawable/gray" android:state_pressed="true"/>
   
6.     <!-- 未點(diǎn)擊時(shí) -->
   
7.     <item android:drawable="@drawable/write" android:state_pressed="false"/>
   
8. 
   
9. </selector>

復(fù)制代碼

最后一步我們Item標(biāo)簽設(shè)置：

1. <RelativeLayout
   
2.             android:id="@+id/relative1"
   
3.             android:layout_width="match_parent"
   
4.             android:layout_height="wrap_content"
   
5.             android:background="@drawable/btn_bg">
   
6.             <ImageView
   
7.                android:id="@+id/img1"
   
8.                android:layout_width="50dp"
   
9.                android:layout_height="50dp"
   
10.                android:src="@drawable/img_1"
    
11.                android:layout_marginLeft="20dp"
    
12.                android:layout_marginTop="20dp"
    
13.                android:layout_centerVertical="true"
    
14.                 />
    
15.             <TextView
    
16.                 android:layout_width="wrap_content"
    
17.                 android:layout_height="wrap_content"
    
18.                 android:layout_marginLeft="20dp"
    
19.                 android:textColor="#fff"
    
20.                 android:text="第一個(gè)item"
    
21.                 android:layout_toRightOf="@id/img1"
    
22.                 android:layout_centerVertical="true"
    
23.                 />
    
24.        </RelativeLayout>
    

復(fù)制代碼

這樣我們Item也添加上了點(diǎn)擊事件變化，最后總結(jié)一下這兩種方法，第一種方法我們需要事先準(zhǔn)備材料，而第二種方法，相對來說就靈活許多，我們可以隨心所欲的進(jìn)行修改，非常的方便。