Android高斯模糊(毛玻璃效果)蒙层库

ShapeBlurView

ShapeBlurView库是一个高斯模糊(毛玻璃效果)蒙层库。Like iOS UIVisualEffectView
不知大家做需求的时候是否有这样的效果要求:

08f80f2ff5345db7e81ad92bda46fb65.jpeg

需求示例

大家熟悉的Android常用图片加载库,比如Glide 可以对图片进行毛玻璃效果的加载(实现不展开说了)
但是都是对整个要加载的图片进行高斯模糊效果,对应局部这种比较难处理,这个库就能实现这样的效果。


当然,你对整个图片盖一层,也能达到Glide高斯模糊加载的效果。
先看看效果:

c8b4a64ebbd0e4c764fa55dad4bcc308.jpeg

效果示例

7921122d71a9d96bb1e91e669aeb9e55.jpeg

效果示例

网上有其他大神开源的库,但都有些美中不足。没有边框、没有切圆角等功能。

ShapeBlurView库支持矩形、圆形、椭圆;边框、边框自定义颜色、自定义边框粗细;矩形时支持切圆角
并且可以支持对4个角分别切圆角。

使用步骤

1、在添加maven地址的地方添加:

repositories {
        maven { url 'https://jitpack.io' }
    }

2、在需要使用的gradle文件添加依赖:

implementation 'com.github.centerzx:ShapeBlurView:1.0.5'
implementation 'androidx.appcompat:appcompat:***'

appcompat:***根据你自己的版本添加

使用说明

(1)Xml布局文件中引用

<net.center.blurview.ShapeBlurView
                android:id="@+id/blurview"
                android:layout_width="300dp"
                android:layout_height="100dp" />

默认效果代码如上,当然width、height根据需求而定

(2)可用属性

<attr format="dimension" name="blur_radius"/>
        <attr format="float" name="blur_down_sample"/>
        <attr format="color" name="blur_overlay_color"/>
        <attr format="dimension" name="blur_corner_radius"/>
        <attr format="dimension" name="blur_corner_radius_top_left"/>
        <attr format="dimension" name="blur_corner_radius_top_right"/>
        <attr format="dimension" name="blur_corner_radius_bottom_left"/>
        <attr format="dimension" name="blur_corner_radius_bottom_right"/>
        <attr format="dimension" name="blur_border_width"/>
        <attr format="color" name="blur_border_color"/>
        <attr name="blur_mode">
            <enum name="rectangle" value="0"/>
            <enum name="circle" value="1"/>
            <enum name="oval" value="2"/>
        </attr>




blur_radius:高斯模糊半径,值越大越模糊,0<r<=25
blur_down_sample:采样参数
blur_overlay_color:毛玻璃覆盖颜色
blur_corner_radius:矩形时圆角半径(4个角一样),其他几个corner属性大家应该能看懂
blur_border_width:边框线条宽度
blur_border_color:边框线条颜色
blur_mode:样式,rectangle:矩形;circle:圆形;oval:椭圆

(3)代码中对熟悉进行设置

blurview?.refreshView(
            ShapeBlurView.build().setBlurMode(BlurMode.MODE_RECTANGLE)
                .setCornerRadius(BlurCorner.TOP_LEFT, 50f).setBorderWidth(10f)
                .setBorderColor(
                    R.color.teal_200
                )
        )

调用类方法refreshView,使用简洁build模式进行值设置,最终只调用一次invalidate()
这样避免传统的setXXX方法里面设置一个值就去调用invalidate()进行重绘

(4)混淆

-keep class android.support.v8.renderscript.** { *; }
-keep class androidx.renderscript.** { *; }

(5)项目开源地址

GitHub地址 https://github.com/centerzx/ShapeBlurView

高斯模糊效果参考RealtimeBlurView库,感谢:RealtimeBlurView

项目库如有不足和错误的地方,欢迎大家讨论指正!觉得不错,也希望大家帮忙Star下,感谢!



作者:centerzx
链接:https://www.jianshu.com/p/442759a3ccf1

关注我获取更多知识或者投稿

4bb3397bfade610fab6da96c35451336.jpeg

7f8687352e5facffcb5251b97538448c.jpeg

  • 4
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现高斯模糊背景的对话框,可以使用 Android 的 DialogFragment 和 RenderScript 实现。以下是大致的步骤: 1. 在布局文件中定义对话框的 UI,注意要为对话框添加一个半透明的背景。 2. 创建一个继承自 DialogFragment 的类,并在其中实现 onCreateDialog() 方法。 3. 在 onCreateDialog() 方法中,使用 RenderScript 创建一个高斯模糊的 Bitmap,并将其设置为对话框背景。 4. 在对话框显示时,使用 DialogFragment.show() 方法显示对话框。 以下是示例代码: ```java public class BlurDialogFragment extends DialogFragment { @Override public Dialog onCreateDialog(Bundle savedInstanceState) { // 创建一个对话框 AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); LayoutInflater inflater = getActivity().getLayoutInflater(); View view = inflater.inflate(R.layout.dialog_layout, null); builder.setView(view); // 创建一个 RenderScript 对象 RenderScript rs = RenderScript.create(getActivity()); // 加载图片资源 Bitmap image = BitmapFactory.decodeResource(getResources(), R.drawable.background); // 创建一个高斯模糊的 Bitmap Bitmap blurredBitmap = image.copy(Bitmap.Config.ARGB_8888, true); Allocation input = Allocation.createFromBitmap(rs, image); Allocation output = Allocation.createFromBitmap(rs, blurredBitmap); ScriptIntrinsicBlur script = ScriptIntrinsicBlur.create(rs, Element.U8_4(rs)); script.setInput(input); script.setRadius(25.f); script.forEach(output); output.copyTo(blurredBitmap); // 将高斯模糊的 Bitmap 设置为对话框背景 view.setBackground(new BitmapDrawable(getResources(), blurredBitmap)); return builder.create(); } } ``` 要实现毛玻璃效果的对话框,可以使用 Android 的 DialogFragment 和自定义控件实现。以下是大致的步骤: 1. 在布局文件中定义对话框的 UI,包括一个用于显示毛玻璃效果的自定义控件。 2. 创建一个继承自 DialogFragment 的类,并在其中实现 onCreateDialog() 方法。 3. 在 onCreateDialog() 方法中,创建一个自定义控件的实例,并将其添加到对话框的 UI 中。 4. 在对话框显示时,使用 DialogFragment.show() 方法显示对话框。 以下是示例代码: ```java public class GlassDialogFragment extends DialogFragment { @Override public Dialog onCreateDialog(Bundle savedInstanceState) { // 创建一个对话框 AlertDialog.Builder builder = new AlertDialog.Builder(getActivity()); LayoutInflater inflater = getActivity().getLayoutInflater(); View view = inflater.inflate(R.layout.dialog_layout, null); builder.setView(view); // 创建一个自定义控件 GlassView glassView = new GlassView(getActivity()); ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams( ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); glassView.setLayoutParams(layoutParams); // 将自定义控件添加到对话框的 UI 中 FrameLayout frameLayout = view.findViewById(R.id.frame_layout); frameLayout.addView(glassView); return builder.create(); } } ``` 其中 GlassView 是一个自定义控件,用于显示毛玻璃效果。以下是示例代码: ```java public class GlassView extends View { private Paint paint = new Paint(); private Bitmap bitmap; public GlassView(Context context) { super(context); init(); } public GlassView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public GlassView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { // 加载图片资源 bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.background); // 设置画笔透明度 paint.setAlpha(100); } @Override protected void onDraw(Canvas canvas) { // 创建一个缩小的 Bitmap,用于实现毛玻璃效果 Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmap, bitmap.getWidth() / 10, bitmap.getHeight() / 10, false); // 将缩小的 Bitmap 放大,实现模糊效果 Bitmap blurredBitmap = Bitmap.createScaledBitmap(scaledBitmap, getWidth(), getHeight(), false); // 绘制模糊的 Bitmap canvas.drawBitmap(blurredBitmap, 0, 0, paint); } } ``` 注意:以上代码只是示例代码,实际上还需要根据具体情况进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值