android 组件边界,自定义控件(7)---BlurMaskFilter边界阴影

本文介绍如何在Android中利用BlurMaskFilter为组件添加边界阴影效果,通过示例代码展示如何创建和应用BlurMaskFilter,以及讨论如何处理图片的Alpha通道以实现阴影效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Android中的很多自带控件都有类似软阴影的效果,比如说Button,使用BlurMaskFilter就可以得到类似的效果

92b76156dfac209adc2502227294c570.png

activity_main.xml

android:layout_width="match_parent"

android:layout_height="match_parent"

android:background="#FFFFFF"

android:orientation="vertical" >

android:layout_width="match_parent"

android:layout_height="match_parent" />

MeasureUtil

package com.aigestudio.customviewdemo.utils;

import android.app.Activity;

import android.graphics.Bitmap;

import android.graphics.Color;

import android.util.DisplayMetrics;

public final class MeasureUtil {

public static int[] getScreenSize(Activity activity) {

DisplayMetrics metrics = new DisplayMetrics();

activity.getWindowManager().getDefaultDisplay().getMetrics(metrics);

return new int[] { metrics.widthPixels, metrics.heightPixels };

}

}

MainActivity

package com.aigestudio.customviewdemo.activities;

import android.app.Activity;

import android.os.Bundle;

import com.aigestudio.customviewdemo.R;

public class MainActivity extends Activity {

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

}

}

MaskFilterView

package com.aigestudio.customviewdemo.views;

import android.app.Activity;

import android.content.Context;

import android.graphics.BlurMaskFilter;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.util.AttributeSet;

import android.view.View;

import com.aigestudio.customviewdemo.utils.MeasureUtil;

public class MaskFilterView extends View {

private static final int RECT_SIZE = 800;

private Paint mPaint;// 画笔

private Context mContext;// 上下文环境引用

private int left, top, right, bottom;//

public MaskFilterView(Context context) {

this(context, null);

}

public MaskFilterView(Context context, AttributeSet attrs) {

super(context, attrs);

mContext = context;

// 初始化画笔

initPaint();

// 初始化资源

initRes(context);

/**

* 如果可以只针对某个View关闭硬件加速那岂不是很好么?当然,Android也给我们提供了这样的功能,我们可以在View中通过

*/

setLayerType(LAYER_TYPE_SOFTWARE, null);

}

/**

* 初始化画笔

*/

private void initPaint() {

// 实例化画笔

mPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);

mPaint.setStyle(Paint.Style.FILL);

mPaint.setColor(0xFF603811);

/**

* radius很容易理解,值越大我们的阴影越扩散

* SOLID,其效果就是在图像的Alpha边界外产生一层与Paint颜色一致的阴影效果而不影响图像本身

* NORMAL会将整个图像模糊掉

* OUTER会在Alpha边界外产生一层阴影且会将原本的图像变透明

* INNER则会在图像内部产生模糊

*/

mPaint.setMaskFilter(new BlurMaskFilter(20, BlurMaskFilter.Blur.SOLID));

}

/**

* 初始化资源

*/

private void initRes(Context context) {

/*

* 计算位图绘制时左上角的坐标使其位于屏幕中心

*/

left = MeasureUtil.getScreenSize((Activity) mContext)[0] / 2

- RECT_SIZE / 2;

top = MeasureUtil.getScreenSize((Activity) mContext)[1] / 2 - RECT_SIZE

/ 2;

right = MeasureUtil.getScreenSize((Activity) mContext)[0] / 2

+ RECT_SIZE / 2;

bottom = MeasureUtil.getScreenSize((Activity) mContext)[1] / 2

+ RECT_SIZE / 2;

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

canvas.drawColor(Color.GRAY);

// 画一个矩形

//(float left, float top, float right, float bottom, Paint paint)

canvas.drawRect(left, top, right, bottom, mPaint);

}

}

或者下面的方法也可以实现

package com.aigestudio.customviewdemo.views;

import android.annotation.SuppressLint;

import android.app.Activity;

import android.content.Context;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.graphics.Paint.Style;

import android.util.AttributeSet;

import android.view.View;

import com.aigestudio.customviewdemo.utils.MeasureUtil;

@SuppressLint("NewApi")

public class ShadowView extends View {

private static final int RECT_SIZE = 800;// 方形大小

private Paint mPaint;// 画笔

private int left, top, right, bottom;// 绘制时坐标

public ShadowView(Context context, AttributeSet attrs) {

super(context, attrs);

// setShadowLayer不支持HW

setLayerType(LAYER_TYPE_SOFTWARE, null);

// 初始化画笔

initPaint();

// 初始化资源

initRes(context);

}

/**

* 初始化画笔

*/

private void initPaint() {

// 实例化画笔

mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);

mPaint.setColor(Color.RED);

mPaint.setStyle(Style.FILL);

//radius表示阴影的扩散半径,而dx和dy表示阴影平面上的偏移值,shadowColor就不说了阴影颜色

mPaint.setShadowLayer(60, 3, 3, Color.DKGRAY);

}

/**

* 初始化资源

*/

private void initRes(Context context) {

/*

* 计算位图绘制时左上角的坐标使其位于屏幕中心

*/

left = MeasureUtil.getScreenSize((Activity) context)[0] / 2 - RECT_SIZE

/ 2;

top = MeasureUtil.getScreenSize((Activity) context)[1] / 2 - RECT_SIZE

/ 2;

right = MeasureUtil.getScreenSize((Activity) context)[0] / 2

+ RECT_SIZE / 2;

bottom = MeasureUtil.getScreenSize((Activity) context)[1] / 2

+ RECT_SIZE / 2;

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 先绘制位图

canvas.drawRect(left, top, right, bottom, mPaint);

}

}

如上所说BlurMaskFilter是根据Alpha通道的边界来计算模糊的,如果是一张图片(注:上面我们说过Android会把拷贝到资源目录的图片转为RGB565,具体原因具体分析我会单独开一篇帖子说,这里就先假设所有提及的图片格式为RGB565)你会发现没有任何效果,那么假使我们需要给图片加一个类似阴影的效果该如何做呢?其实很简单,我们可以尝试从Bitmap中获取其Alpha通道,并在绘制Bitmap前先以该Alpha通道绘制一个模糊效果不就行了?

如下面代码所示我们通过Bitmap的extractAlpha()方法从原图中分离出一个Alpha通道位图并在计算模糊滤镜的时候使用该位图生成模糊效果:

f1d6d38379f96bb55f297ca49a6e05c7.png

BlurMaskFilterView

package com.aigestudio.customviewdemo.views;

import android.app.Activity;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.graphics.BlurMaskFilter;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.util.AttributeSet;

import android.view.View;

import com.aigestudio.customviewdemo.R;

import com.aigestudio.customviewdemo.utils.MeasureUtil;

public class BlurMaskFilterView extends View {

private Paint shadowPaint;// 画笔

private Context mContext;// 上下文环境引用

private Bitmap srcBitmap, shadowBitmap;// 位图和阴影位图

private int x, y;// 位图绘制时左上角的起点坐标

public BlurMaskFilterView(Context context) {

this(context, null);

}

public BlurMaskFilterView(Context context, AttributeSet attrs) {

super(context, attrs);

mContext = context;

// 记得设置模式为SOFTWARE

setLayerType(LAYER_TYPE_SOFTWARE, null);

// 初始化画笔

initPaint();

// 初始化资源

initRes(context);

}

/**

* 初始化画笔

*/

private void initPaint() {

// 实例化画笔

shadowPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG);

shadowPaint.setColor(Color.DKGRAY);

//outer solid normal 都可以 但是inner不行

shadowPaint.setMaskFilter(new BlurMaskFilter(10, BlurMaskFilter.Blur.NORMAL));

}

/**

* 初始化资源

*/

private void initRes(Context context) {

// 获取位图

srcBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.a);

// 获取位图的Alpha通道图

shadowBitmap = srcBitmap.extractAlpha();

/*

* 计算位图绘制时左上角的坐标使其位于屏幕中心

*/

x = MeasureUtil.getScreenSize((Activity) mContext)[0] / 2 - srcBitmap.getWidth() / 2;

y = MeasureUtil.getScreenSize((Activity) mContext)[1] / 2 - srcBitmap.getHeight() / 2;

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

// 先绘制阴影

canvas.drawBitmap(shadowBitmap, x, y, shadowPaint);

// 再绘制位图

canvas.drawBitmap(srcBitmap, x, y, null);

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值