Button 点击切换背景

8 篇文章 0 订阅
4 篇文章 0 订阅

转自:http://blog.csdn.net/bossgirls/article/details/7574507

实现按钮按下和释放,按钮背景图片相应切换效果的方法这里介绍两种,一种是在代码里实现,另一种是在xml文件里实现

一、在xml文件里

首先现在layout的一个xml文件下定义Button如下所示:

[java]  view plain copy
  1. <Button   
  2.     android:id="@+id/btn_user_selected"  
  3.     android:layout_width="wrap_content"  
  4.     android:layout_height="wrap_content"  
  5.     android:background="@drawable/btn_selected/>  

注意代码里的android:background="@drawable/btn_selected",这里btn_selecteddrawable文件下定义button按下释放效果的xml文件
接下来看btn_selected.xml文件的定义:

[html]  view plain copy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.     <!-- 获得焦点但未按下时的背景图片 -->  
  4.     <item android:state_focused="true" android:state_enabled="true" android:state_pressed="false" android:drawable="@drawable/user_selecte_n" />  
  5.      <!-- 按下时的背景图片 -->  
  6.     <item android:state_enabled="true" android:state_pressed="true" android:drawable="@drawable/user_selecte_p" />  
  7.     <!-- 按下时的背景图片 -->  
  8.     <item android:state_enabled="true" android:state_checked="true" android:drawable="@drawable/user_selecte_p" />  
  9.     <!-- 默认时的背景图片 -->  
  10.     <item android:drawable="@drawable/user_selecte_n" />  
  11. </selector>  

创建xml:点击drawable文件夹右键-->new-->Android XML File-->在File栏里填写xml名称-->Root Element下选择xml的背景选择器selector-->点击finish-->创建成功

相关属性:

android:state_selected :选中
android:state_focused
  :获得焦点
android:state_pressed
  :点击
android:state_enabled
  :设置是否响应事件,指所有事件

selector背景选择器用法大全请跳转到:点击打开链接


二、在java代码里

[java]  view plain copy
  1. bottomReturnBtn.setOnTouchListener(new OnTouchListener() {  
  2.       
  3.     public boolean onTouch(View v, MotionEvent event) {  
  4.         Button upStepBtn = (Button) v;  
  5.         if(event.getAction() == MotionEvent.ACTION_DOWN){  
  6.             upStepBtn.setBackgroundResource(R.drawable.bottom_sub_order_btn);  
  7.         }else if(event.getAction() == MotionEvent.ACTION_UP){  
  8.             upStepBtn.setBackgroundResource(R.drawable.bottom_return_check);  
  9.             finish();   
  10.         }  
  11.         return false;  
  12.     }  
  13. });   

通过监听按钮的不同状态来更改按钮的背景图片

public boolean onTouch(View v,MotionEvent event){

}

参数v:事件源对象

参数event:事件封装类的对象,其中封装了触发事件的详细信息,同样包括事件的类型、触发时间等信息。


event.getAction() == MotionEvent.ACTION_DOWN   ======>按钮被按下

event.getAction() == MotionEvent.ACTION_UP                ======>按钮被释放

在uniapp中,你可以使用条件渲染来实现按钮点击切换颜色的功能。具体实现方法如下: 1. 首先,在`<button>`标签中添加一个动态的`class`属性,用来控制按钮的颜色。例如: ```html <template> <button class="my-btn" :class="{ active: isActive }" @click="toggleButton"> {{ buttonText }} </button> </template> ``` 以上代码中,`my-btn`是自定义的样式类,`active`是用来控制按钮颜色的类名,`isActive`是一个数据属性,用来控制`active`类名的出现与否。 2. 接着,在`<script>`标签中,定义`toggleButton`方法,用来切换`isActive`属性的值,从而实现按钮颜色的切换。例如: ```javascript <script> export default { data() { return { buttonText: "点击我", isActive: false, }; }, methods: { toggleButton() { this.isActive = !this.isActive; }, }, }; </script> ``` 以上代码中,当按钮被点击时,`toggleButton`方法会将`isActive`属性的值取反,从而实现按钮颜色的切换。 3. 最后,在`<style>`标签中,定义`.active`类的样式,用来控制按钮的颜色。例如: ```css <style> .my-btn { color: #fff; background-color: #333; border: none; padding: 10px 20px; border-radius: 5px; } .active { background-color: #f00; } </style> ``` 以上代码中,`.my-btn`是自定义的样式类,用来设置按钮的一般样式,`.active`是用来控制按钮颜色的类名,设置为红色背景色。 通过以上步骤,点击按钮时,按钮的颜色就可以切换了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值