类似支付宝的view点击效果透明度变化

先上两个截图,如下:

支付宝: 


QQ:


如上两图用红色框框住的部分,当手纸按压时,图片透明度发生变化,但是背景颜色没有变化,这和我们平常所用的控件按压效果不太一样,但是要做到这种效果也不难,我们可以让美工做两套图片出来,然后设置正常状态和按压状态时的图片即可, 但是这样会造成应用的包体积很大,毕竟有很多地方都需要这种效果,不是首选之法。第二种方式是利用ImageView的tint属性即可达到这样效果,在xml文件中使用:android:tint =" ”或者在java代码中使用ImageView.setColorFilter();  ImageView的这个方法的作用就是给src中的图片加上一层遮罩层,再经过一些触摸事件的处理就能实现类似支付宝或者QQ中的效果。

下面直接给出一个我自己写的工具类,然后就可以一行代码实现这种效果,代码如下:

package com.lanma.conveniencecar.utils;

import android.graphics.Color;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;

/**
 * 作者 qiang_xi on 2016/8/29 14:12.
 * view初始化完毕之后,建议在onCreate方法里调用 ImageViewTintUtil.setImageViewTint((ImageView) findViewById(R.id.xx));即可
 */
public class ImageViewTintUtil {

    public static void setImageViewtint(final ImageView imageView, final int color) {
        imageView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                int action = event.getAction();
                switch (action) {
                    case MotionEvent.ACTION_DOWN:
                        imageView.setColorFilter(color);
                        break;
                    case MotionEvent.ACTION_UP:
                        imageView.setColorFilter(null);
                        break;
                }
                //这里一定要return false,不然该方法会拦截事件,造成不能响应点击等操作
                return false;
            }
        });
    }

    public static void setImageViewTint(final ImageView imageView) {
        imageView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                int action = event.getAction();
                switch (action) {
                    case MotionEvent.ACTION_DOWN:
                        imageView.setColorFilter(Color.parseColor("#89DBFA"));
                        break;
                    case MotionEvent.ACTION_UP:
                        imageView.setColorFilter(null);
                        break;
                }
                //这里一定要return false,不然该方法会拦截事件,造成不能响应点击等操作
                return false;
            }
        });
    }
}

注意事项:

已经在代码中表明的很清楚了,即一定要返回false,不然onTouch方法会拦截事件,导致ACTION_DOWN、ACTION_UP、ACTION_MOVE等一系列事件不再传递到ImageView的onTouchEvent()方法,进而造成不能响应点击事件等问题!!!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
小程序中的 view 点击效果是指当用户点击一个 view 元素时,该元素会产生可视化的反馈效果,以指示用户已成功点击该元素。小程序支持多种点击效果,以下是一些常见的点击效果示例: 1. 设置背景色变化效果:当用户点击 view 元素时,可以通过改变该元素的背景色来实现点击效果。可以使用 CSS 的`:active`伪类或者通过给 view 元素添加特定的类名来定义点击时的背景色样式。 2. 设置边框变化效果:当用户点击 view 元素时,可以通过改变该元素的边框样式或者边框颜色来实现点击效果类似于设置背景色变化效果,可以使用 CSS 的`:active`伪类或者给 view 元素添加特定的类名来定义点击时的边框样式。 3. 设置动画效果:当用户点击 view 元素时,可以通过添加动画效果来提供更加生动的点击反馈。可以使用小程序的动画 API,在点击事件处理函数中定义一组动画效果,并将其应用到 view 元素上,例如改变元素的位置、大小、透明度等。 4. 设置点击态图片:当用户点击 view 元素时,可以通过切换图片来实现点击效果。可以在点击事件处理函数中使用`setData`更新 view 元素的图片路径,从而达到切换点击态图片的效果。 小程序提供了丰富的样式和动画 API,开发者可以根据需求选择合适的点击效果,通过添加视觉反馈方式来提升小程序的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值