Android - ImageButton单击切换旋钮图片效果的实现

Android - ImageButton单击切换按钮图片效果的实现

在android中有一个ImageButton的View，跟Button按钮的区别是可以在Imagebutton上加载一个图片。

从ImageButton这个字面意思上来看，它是一个图片按钮，那么我们就可以使用它做一个我们想要的图片按钮了，但是我们在实际使用的过程当中，就会发现该按钮的使用并没有想像中的那么简单，需要再增加一些代码或再配置XML才能实现图片按钮按下的效果，个人感觉有点麻烦，不知道google为什么这么做？

下面是个图片按钮正常状态的效果：

下面是图片按钮按下的效果图片：

?

我们来看一下如何实现上面的效果。

实现图片按钮按下的效果有两种方式可以实现：一是增加代码，二配置XML。

一、在java中为图片按钮增加触摸监听的函数来实现图片切换，代码如下：

?

1. ImageButton?btn?=?(ImageButton)findViewById(R.id.imageButton1);??????????
2. btn.setOnTouchListener(new?View.OnTouchListener(){????????????
3. ????public?boolean?onTouch(View?v,?MotionEvent?event)?{???????????????
4. ????????????if(event.getAction()?==?MotionEvent.ACTION_DOWN){???????
5. ???????????????//重新设置按下时的背景图片??
6. ???????????????((ImageButton)v).setImageDrawable(getResources().getDrawable(R.drawable.android_btn_pressed));??????????????????????????????
7. ????????????}else?if(event.getAction()?==?MotionEvent.ACTION_UP){???????
8. ????????????????//再修改为抬起时的正常图片??
9. ????????????????((ImageButton)v).setImageDrawable(getResources().getDrawable(R.drawable.android_btn));?????
10. ????????????}??
11. ????????????return?false;???????
12. ????}???????
13. });??

代码比较简单，就是当图片按下时，修改按钮的背景图片，当抬起时再修改为正常的图片显示。

?

二、通过给按钮配置XML文件来实现图片按钮的背景切换效果，方法如下：

1) 在Layout下增加一个image_btn_press.xml文件，内容如下：

?

1. <?xml?version="1.0"?encoding="utf-8"?>???
2. <selector?xmlns:android="http://schemas.android.com/apk/res/android">???
3. ?????<item?android:state_pressed="false"?android:drawable="@drawable/android_btn"?/>??
4. ?????<item?android:state_focused="true"?android:drawable="@drawable/android_btn"?/>??
5. ?????<item?android:state_pressed="true"?android:drawable="@drawable/android_btn_pressed"?/>???
6. </selector>???

在这个文件中可以设置按钮图片的正常时的图片、具有焦点时的图片和按下时的图片。在本例中将按钮的正常图片和焦点图片设置成同样的效果了。

?

或者你也可以将state_focused的整个属性行删除。

另外，该XML配置文件不一定要存放在layout的目录下，您也可以存放在drawable的目录下。

?

2) 在main.xml中设置图片按钮的属性，装上面的xml文件增加到图片按钮中，内容如下：

?

1. <ImageButton??
2. ????android:id="@+id/imageButton2"??
3. ????android:layout_width="wrap_content"??
4. ????android:layout_height="wrap_content"??
5. ????android:background="@layout/image_btn_press"?/>??

在ImageButtonk中指定background的属性值：@layout/image_btn_press，其中image_btn_press就是上面为该图片铵钮创建的XML配置文件，文件名不要写错了。同时，你也可以将image_btn_press.xml文件放到drawable的目录下，此时，就要将它的属性值修改为：@drawable/image_btn_press即可，也就是说指定它的XML文件的正确路经就行了。

?

另外，需要特别注意的是：在ImageButton中，如果使用XML配置文件来设置图片的效果的话，就不要再指定它的android:src=""属性值了，否则图片的按下效果就出不来了。

这两种方法各有各的好处，在实际运用过种当种可以根据自己的需要进行选择。

?

附上面实例的源代码下载：http://download.csdn.net/detail/ztp800201/4106649

该源代码分别使用了两种的方法实现了图片按钮的效果。其中上面的图片按钮是用代码实现的，下面的图片是用XML实现的。