Button按钮点击图片切换效果

Button按钮图片切换效果设置。

通常在工程中用到图片按钮点击事件,大多都用ImageButton。在这里我们用

Button的点击事件,在图片的切换过程中不再通过setBackgroundResource()设置

点击效果。而是通过.xml预先设置好切换效果。在这里我们习惯把该.xml文件放到drawable文件夹下。

代码如下:

//xml文件   名称这里为test_press.xml

1、 android:state_pressed="true"  为点击后效果

2、 android:state_focused="true"

3、 最后一行 <item android:drawable="@drawable/ok"/>

是必不可少的,否则会引起布局混乱。另外该行的drawable其实就是

默认的显示图片。所以有了该行代码,上面的2可以不用写了。为了程序的

完整性,我们建议还是要写上啦。

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
   <item
        android:drawable="@drawable/ok_press"
        android:state_pressed="true"/>
    <item
        android:drawable="@drawable/ok"
        android:state_focused="true"/>
    
    <item android:drawable="@drawable/ok"/>
 
</selector>

//Button按钮的设置

只需设置一步即可

android:background="@drawable/test_press"

<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/test_press"/>

在主代码中只需要正常使用Button的监听器即可,至于点击效果则会自动切换。

时间: 2024-12-17 20:05:28

Button按钮点击图片切换效果的相关文章

jquery带按钮的图片切换效果

<!doctype html> <html> <head> <meta charset="gb2312"> <title>jquery带按钮的图片切换效果</title> <script type="text/javascript" src="jquery-1.8.0.js"></script> <style type="text/cs

图片切换效果2(定时+左右按钮)

js引用:jquery-1.8.3.min.js 效果图: 代码: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> New Document </title> 5 <meta name=

atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js

atitit.GUI图片非规则按钮跟动态图片切换的实现模式总结java .net c# c++ web html js 1. 图片按钮的效果总结 1 1.1. 按钮图片自动缩放的. 1 1.2. 不要边框,如果用自定义图片做按钮背景可以设为 false. 2 1.3. 异形按钮 2 1.4. 不绘制焦点 2 1.5. 鼠标经过时的图标 2 1.6. 选中时的图标 2 1.7. 禁用时显示的图标 2 1.8. 可能需要按钮半透明效果 2 2. 图片按钮的实现 2 2.1. 优先模式:button控

css图片切换效果分析+翻译整理

Demos:http://tympanus.net/Tutorials/CSS3SlidingImagePanels/ 出处:http://tympanus.net/codrops/2012/01/17/sliding-image-panels-with-css3/ 这个教程将介绍如何使用纯CSS创建一个干净的幻灯图片面板.主要想法是在面板中使用背景图片,然后在点击标签后让动画起效. 今天我们将向您展示如何创建仅适用于CSS一些巧妙的滑动图像面板.该想法是使用背景图像的面板和一个标签上点击时动画

图片切换特效(1):原生JS图片切换效果

转自:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

Android 自定义 ViewPager 打造千变万化的图片切换效果

Android 自定义 ViewPager 打造千变万化的图片切换效果 标签: Android自定义ViewPagerJazzyViewPager 目录(?)[+] 转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/38026503 记 得第一次见到ViewPager这个控件,瞬间爱不释手,做东西的主界面通通ViewPager,以及图片切换也抛弃了ImageSwitch之类的,开 始让ViewPager来做.时间长了,ViewPa

selector实现点击图片切换(解决常见的点击无效问题)

实现效果图:       图片未点击前                         图片点击后 selector的实现方法其实很简单,只需3步: 第一步:选择两张图片效果图放在res/drawable-hdpi中,放在mdpi也可以 第二步:在mdpi文件夹中新建xml文件,命名为selector.xml.注意名字selector后面会引用到. 在selector.xml文件中,完成代码: <?xml version="1.0" encoding="utf-8&qu

JS图片切换效果

源地址:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&g

jQuery淡出淡入带缩略图幻灯图片切换效果

企业网站横幅焦点图切换,JavaScript版的图片切换,右下角显示等比例的缩略图,缩略图是调用的大图片,整体唯美,采用淡入淡出的方式图片轮播,点击后切换,不点击时自动轮播.是一款不错的网页上的图片展示效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l