Android点击效果

nighteagle

我们在开发网站时，会发现当我们添加<a/>标签后，标签有一个点击效果，比如颜色变化，这样开看起来用户体验会很棒，那么在我们的Android开发中如何加入这样的效果呢？本篇就为大家揭开它的神秘面纱。

　　既然是点击事件的变化，我们就要监控用户是否点击，这里我有两种实现方式：1、通过改变背景图片达到上述效果；2、通过改变背景颜色来达到上述效果。

　　两者各有千秋，比如当我们设计按钮（Button）的点击事件时，建议使用第一种；而当我们设计诸如Item时，建议使用第二种。好了下面开始为大家进行代码分析：

　　首先为大家介绍第一种：通过改变背景图片来达到上述效果，既然是通过改变背景图片，所以我们需要事先准备好2张图片，一张作为未点击时，一张作为点击时。

　　然后我们需要在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.     <!-- 点击时  -->
   
5.     <item android:drawable="@drawable/img_1" android:state_pressed="true"/>
   
6.     <!-- 未点击时 -->
   
7.     <item android:drawable="@drawable/img_2" android:state_pressed="false"/>
   
8. 
   
9. </selector>

复制代码

我们的布局文件（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="点击变化"
    
12.         />
    
13.    
    
14. </RelativeLayout>

复制代码

特别注意标注处。好了我们的第一个效果就实现了，大家感觉如何。下面我们来一起学习一下第二种方法：

　　第二种方法无需准备图片，我们通过改变背景的颜色来达到上述效果，既然这里需要使用到颜色，先为大家分享一下16进制的颜色对照表：

有了颜色对照表，我们就开始进行代码解析吧：

　　第一步在value文件夹下新建一个col.xml文件，把我么可能使用到的颜色添加进去：

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>

复制代码

第二步修改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.     <!-- 点击时  -->
   
5.     <item android:drawable="@drawable/gray" android:state_pressed="true"/>
   
6.     <!-- 未点击时 -->
   
7.     <item android:drawable="@drawable/write" android:state_pressed="false"/>
   
8. 
   
9. </selector>

复制代码

最后一步我们Item标签设置：

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="第一个item"
    
21.                 android:layout_toRightOf="@id/img1"
    
22.                 android:layout_centerVertical="true"
    
23.                 />
    
24.        </RelativeLayout>
    

复制代码

这样我们Item也添加上了点击事件变化，最后总结一下这两种方法，第一种方法我们需要事先准备材料，而第二种方法，相对来说就灵活许多，我们可以随心所欲的进行修改，非常的方便。