Android基于模糊滤镜(MaskFilter)的阴影边框渐变效果

setMaskFilter(MaskFilter maskfilter):设置MaskFilter,可以用不同的MaskFilter实现滤镜的效果,如滤化,立体等!

而我们一般不会直接去用这个MaskFilter,而是使用它的两个子类:

  • BlurMaskFilter:指定一个模糊的样式和半径来处理Paint的边缘
  • EmbossMaskFilter:指定光源的方向和环境光强度来添加浮雕效果

BlurMaskFilter(模糊效果)

构造方法

1
BlurMaskFilter(float radius, Blur style)
  • 参数1:指定模糊边缘的半径
  • 参数2:指定模糊的风格,可选值有
    • BlurMaskFilter.Blur.NORMAL:内外模糊
    • BlurMaskFilter.Blur.OUTER:外部模糊
    • BlurMaskFilter.Blur.INNER:内部模糊
    • BlurMaskFilter.Blur.SOLID:内部加粗,外部模糊

阴影渐变边框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
public class ShadowBorderLayout extends ConstraintLayout {
private static final String TAG = "yezhou";
private BlurMaskFilter mBlurMaskFilter;
private Paint mPaint;
private float mShadowWidth;

public ShadowBorderLayout(Context context) {
this(context, null);
}

public ShadowBorderLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public ShadowBorderLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

private void init() {
mShadowWidth = DisplayUtil.dp2px(4);

mPaint = new Paint();
mPaint.setAntiAlias(true); //抗锯齿
mPaint.setColor(Color.parseColor("#00A0E9")); //画笔颜色
mPaint.setStyle(Paint.Style.FILL); //画笔风格
mPaint.setStrokeWidth(5); //画笔粗细

mBlurMaskFilter = new BlurMaskFilter(10f, BlurMaskFilter.Blur.OUTER);
mPaint.setMaskFilter(mBlurMaskFilter);

setLayerType(View.LAYER_TYPE_SOFTWARE, null); //关闭硬件加速
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
Log.i(TAG, "left: " + getLeft() + ", top: " + getTop() + ", right: " + getRight() + ", bottom: " + getBottom());
Log.i(TAG, "width: " + getWidth() + ", height: " + getHeight());
canvas.drawRect(mShadowWidth, mShadowWidth, getWidth()-mShadowWidth, getHeight()-mShadowWidth, mPaint);
}

}

圆角阴影渐变边框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
public class ShadowRoundBorderLayout extends ConstraintLayout {
private static final String TAG = "yezhou";
private BlurMaskFilter mBlurMaskFilter;
private Paint mPaint;
private float mRadius;

public ShadowRoundBorderLayout(Context context) {
this(context, null);
}

public ShadowRoundBorderLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

public ShadowRoundBorderLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}

private void init() {
mRadius = DisplayUtil.dp2px(6);

mPaint = new Paint();
mPaint.setAntiAlias(true); //抗锯齿
mPaint.setColor(Color.parseColor("#00A0E9")); //画笔颜色
mPaint.setStyle(Paint.Style.STROKE); //画笔风格
mPaint.setStrokeWidth(5); //画笔粗细

mBlurMaskFilter = new BlurMaskFilter(10f, BlurMaskFilter.Blur.OUTER);
mPaint.setMaskFilter(mBlurMaskFilter);

setLayerType(View.LAYER_TYPE_SOFTWARE, null); //关闭硬件加速
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}

@RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
@Override
protected void dispatchDraw(Canvas canvas) {
super.dispatchDraw(canvas);
Log.i(TAG, "left: " + getLeft() + ", top: " + getTop() + ", right: " + getRight() + ", bottom: " + getBottom());
Log.i(TAG, "width: " + getWidth() + ", height: " + getHeight());
canvas.drawRoundRect(0, 0, getWidth(), getHeight(), mRadius, mRadius, mPaint);
}

}

引用自定义布局

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>

<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?android:attr/actionBarSize"
android:background="@color/colorPrimaryDark"
app:title="基于模糊滤镜的阴影渐变边框效果"
app:titleTextColor="#FFF"
>
</android.support.v7.widget.Toolbar>

<me.yezhou.widget.ShadowBorderLayout
android:id="@+id/layout_shadow_border"
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="@id/toolbar"
android:layout_height="160dp"
android:layout_margin="15dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:text="阴影渐变边框"
android:textSize="20sp"
/>
</me.yezhou.widget.ShadowBorderLayout>

<me.yezhou.widget.ShadowRoundBorderLayout
android:layout_width="match_parent"
app:layout_constraintTop_toBottomOf="@id/layout_shadow_border"
android:layout_height="160dp"
android:layout_margin="15dp"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
android:text="圆角阴影渐变边框"
android:textSize="20sp"
/>
</me.yezhou.widget.ShadowRoundBorderLayout>

</android.support.constraint.ConstraintLayout>

效果演示

ShadowBorderLayout

Powered by AppBlog.CN     浙ICP备14037229号

Copyright © 2012 - 2020 APP开发技术博客 All Rights Reserved.

访客数 : | 访问量 :