Android自定义Drawable，增加渐变阴影、部分渐变（圆角、部分圆角、圆形）

最新推荐文章于 2024-08-16 08:22:04 发布
最新推荐文章于 2024-08-16 08:22:04 发布
阅读量2.6k 收藏 2
点赞数 2
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xp_panda/article/details/94615597
版权

自定义Drawable，增加渐变阴影、部分渐变（圆角、部分圆角、圆形）

一、先上效果图

效果图

二、思路

 1、圆角
      1）绘制shadow
    * 2）绘制遮挡部分shadow
      3）绘制圆角图
 2、部分圆角
      1）绘制shadow
    * 2）绘制遮挡部分shadow
      3）绘制圆角图
      4）绘制遮挡部分圆角
 3、圆形
      1）绘制shadow
    * 2）绘制遮挡部分shadow
      3）绘制圆形图

四、实现

1）设置paint

         /**
         * 阴影paint
         */
        mShadowPaint = new Paint();
        mShadowPaint.setAntiAlias(true);
        mShadowPaint.setShadowLayer(shadowRadius, 0, 0, shadowColor);
        /**
         * 覆盖部分背景的paint
         */
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
        /**
         * 背景paint
         */
        mBgPaint = new Paint();
        mBgPaint.setAntiAlias(true);
        /**
         * 覆盖部分圆角的paint
         */
        mBgPartPaint = new Paint();
        mBgPartPaint.setAntiAlias(true);

图像合成效果示意图

     设置 覆盖部分背景的paint  DST_OUT  显示不重叠的部分

2）根据类型设置RectF

   ***** 根据类型设置RectF ******

 @Override
    public void setBounds(int left, int top, int right, int bottom) {
        super.setBounds(left, top, right, bottom);
        switch (type) {
            case All:
                left = left + mShadowRadius;
                top = top + mShadowRadius;
                right = right - mShadowRadius;
                bottom = bottom - mShadowRadius;
                break;
            case TOP:
            case BOTTOM:
                top = top + mShadowRadius;
                bottom = bottom - mShadowRadius;
                break;
            case LEFT:
            case RIGHT:
                left = left + mShadowRadius;
                right = right - mShadowRadius;
                break;
            default:
                break;
        }
        mRect = new RectF(left, top, right, bottom);
    }

3）根据类型设置覆盖阴影/圆角 的 RectF

        /**
         * 设置覆盖阴影/圆角 的 RectF
         */
        RectF rect = new RectF();
        RectF rect1 = new RectF();
        switch (type) {
            case All:
                rect.left = 0;
                rect.right = 0;
                rect.top = 0;
                rect.bottom = 0;
                break;
            case TOP:
                rect.left = mRect.left;
                rect.right = mRect.right;
                rect.top = mRect.height() / 2;
                rect.bottom = mRect.bottom + mShadowRadius;
                rect1.left = mRect.left;
                rect1.right = mRect.right;
                rect1.top = mRect.height() / 2;
                rect1.bottom = mRect.bottom;
                break;
            case BOTTOM:
                rect.left = mRect.left;
                rect.right = mRect.right;
                rect.top = mRect.top - mShadowRadius;
                rect.bottom = mRect.height() / 2;

                rect1.left = mRect.left;
                rect1.right = mRect.right;
                rect1.top = mRect.top;
                rect1.bottom = mRect.height() / 2;

                break;
            case LEFT:
                rect.left = mRect.width() / 2;
                rect.right = mRect.right + mShadowRadius;
                rect.top = mRect.top;
                rect.bottom = mRect.bottom;

                rect1.left = mRect.width() / 2;
                rect1.right = mRect.right ;
                rect1.top = mRect.top;
                rect1.bottom = mRect.bottom;

                break;
            case RIGHT:
                rect.left = mRect.left-mShadowRadius;
                rect.right = mRect.width() / 2;
                rect.top = mRect.top;
                rect.bottom = mRect.bottom;

                rect1.left = mRect.left;
                rect1.right = mRect.width() / 2;
                rect1.top = mRect.top;
                rect1.bottom = mRect.bottom;
                break;

            default:
                break;
        }

4）根据 类型绘制 背景

     if (mShape == SHAPE_ROUND) {
           /**
            * 绘制全圆角阴影
            */
           canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, mShadowPaint);//绘制阴影
           canvas.drawRect(rect, mPaint);//绘制不需显示阴影部分的遮盖
           canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, mBgPaint);//绘制中心的图
       } else if (mShape == SHAPE_ROUND_PART) {
           /**
            * 绘制部分圆角阴影
            */
           canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, mShadowPaint);//绘制阴影
           canvas.drawRect(rect, mPaint);//绘制不需显示阴影部分的遮盖
           canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, mBgPaint);//绘制中心的图
           canvas.drawRect(rect1, mBgPartPaint);//绘制不需显示圆角的部分
       } else {
           /**
            * 绘制圆形阴影
            */
           canvas.drawCircle(mRect.centerX(), mRect.centerY(), Math.min(mRect.width(), mRect.height()) / 2, mShadowPaint);//绘制带阴影的圆形
           canvas.drawRect(rect, mPaint);//绘制不需显示阴影部分的遮盖
           canvas.drawCircle(mRect.centerX(), mRect.centerY(), Math.min(mRect.width(), mRect.height()) / 2, mBgPaint);//绘制中心圆
       }

4）使用（就是这么简单）

       ShadowDrawableUtil.setShadowDrawable(round_tv, ShadowDrawableUtil.TypeEnum.LEFT);
       ShadowDrawableUtil.setShadowDrawableTop(round_part_tv,"#A6000000");
       ShadowDrawableUtil.setShadowDrawableCircle(circle_tv);

6）RoundImageView完整代码


/**
 * view 添加阴影
 */
public class ShadowDrawableUtil extends Drawable {

    private Paint mShadowPaint;
    private Paint mBgPaint;
    private Paint mPaint;
    private Paint mBgPartPaint;
    private int mShadowRadius;
    private int mShape;
    private int mShapeRadius;
    private int mBgColor[];
    private RectF mRect;
    private TypeEnum type;
    private static int SHAPE_ROUND = 1;
    private static int SHAPE_CIRCLE = 2;
    private static int SHAPE_ROUND_PART = 3;

    public enum TypeEnum {
        All,
        LEFT,
        TOP,
        RIGHT,
        BOTTOM
    }


    private ShadowDrawableUtil(int shape, TypeEnum type, int[] bgColor, int shapeRadius, int shadowColor, int shadowRadius) {
        this.mShape = shape;
        this.type = type;
        this.mBgColor = bgColor;
        this.mShapeRadius = shapeRadius;
        this.mShadowRadius = shadowRadius;
        /**
         * 阴影paint
         */
        mShadowPaint = new Paint();
        mShadowPaint.setAntiAlias(true);
        mShadowPaint.setShadowLayer(shadowRadius, 0, 0, shadowColor);
        /**
         * 覆盖部分背景的paint
         */
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
        /**
         * 背景paint
         */
        mBgPaint = new Paint();
        mBgPaint.setAntiAlias(true);
        /**
         * 覆盖部分圆角的paint
         */
        mBgPartPaint = new Paint();
        mBgPartPaint.setAntiAlias(true);
    }

    @Override
    public void setBounds(int left, int top, int right, int bottom) {
        super.setBounds(left, top, right, bottom);
        switch (type) {
            case All:
                left = left + mShadowRadius;
                top = top + mShadowRadius;
                right = right - mShadowRadius;
                bottom = bottom - mShadowRadius;
                break;
            case TOP:
            case BOTTOM:
                top = top + mShadowRadius;
                bottom = bottom - mShadowRadius;
                break;
            case LEFT:
            case RIGHT:
                left = left + mShadowRadius;
                right = right - mShadowRadius;
                break;
            default:
                break;
        }


        mRect = new RectF(left, top, right, bottom);
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        if (mBgColor != null) {
            if (mBgColor.length == 1) {
                mBgPaint.setColor(mBgColor[0]);
                mShadowPaint.setColor(mBgColor[0]);
                mBgPartPaint.setColor(mBgColor[0]);
            } else {
                mBgPaint.setShader(new LinearGradient(mRect.left, mRect.height() / 2, mRect.right,
                        mRect.height() / 2, mBgColor, null, Shader.TileMode.CLAMP));
            }
        }
        /**
         * 设置覆盖阴影/圆角 的 RectF
         */
        RectF rect = new RectF();
        RectF rect1 = new RectF();
        switch (type) {
            case All:
                rect.left = 0;
                rect.right = 0;
                rect.top = 0;
                rect.bottom = 0;
                break;
            case TOP:
                rect.left = mRect.left;
                rect.right = mRect.right;
                rect.top = mRect.height() / 2;
                rect.bottom = mRect.bottom + mShadowRadius;
                rect1.left = mRect.left;
                rect1.right = mRect.right;
                rect1.top = mRect.height() / 2;
                rect1.bottom = mRect.bottom;
                break;
            case BOTTOM:
                rect.left = mRect.left;
                rect.right = mRect.right;
                rect.top = mRect.top - mShadowRadius;
                rect.bottom = mRect.height() / 2;

                rect1.left = mRect.left;
                rect1.right = mRect.right;
                rect1.top = mRect.top;
                rect1.bottom = mRect.height() / 2;

                break;
            case LEFT:
                rect.left = mRect.width() / 2;
                rect.right = mRect.right + mShadowRadius;
                rect.top = mRect.top;
                rect.bottom = mRect.bottom;

                rect1.left = mRect.width() / 2;
                rect1.right = mRect.right ;
                rect1.top = mRect.top;
                rect1.bottom = mRect.bottom;

                break;
            case RIGHT:
                rect.left = mRect.left-mShadowRadius;
                rect.right = mRect.width() / 2;
                rect.top = mRect.top;
                rect.bottom = mRect.bottom;

                rect1.left = mRect.left;
                rect1.right = mRect.width() / 2;
                rect1.top = mRect.top;
                rect1.bottom = mRect.bottom;
                break;

            default:
                break;
        }

        if (mShape == SHAPE_ROUND) {
            /**
             * 绘制全圆角阴影
             */
            canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, mShadowPaint);
            canvas.drawRect(rect, mPaint);
            canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, mBgPaint);
        } else if (mShape == SHAPE_ROUND_PART) {
            /**
             * 绘制部分圆角阴影
             */
            canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, mShadowPaint);
            canvas.drawRect(rect, mPaint);
            canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, mBgPaint);
            canvas.drawRect(rect1, mBgPartPaint);
        } else {
            /**
             * 绘制圆形阴影
             */
            canvas.drawCircle(mRect.centerX(), mRect.centerY(), Math.min(mRect.width(), mRect.height()) / 2, mShadowPaint);
            canvas.drawRect(rect, mPaint);
            canvas.drawCircle(mRect.centerX(), mRect.centerY(), Math.min(mRect.width(), mRect.height()) / 2, mBgPaint);
        }
    }

    @Override
    public void setAlpha(int alpha) {
        mShadowPaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
        mShadowPaint.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }

    public static void setShadowDrawable(View view) {
        ShadowDrawableUtil drawable = new Builder()
                .setType(TypeEnum.BOTTOM)
                .builder();
        view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        ViewCompat.setBackground(view, drawable);
    }

    public static void setShadowDrawable(View view, String bgColor) {
        ShadowDrawableUtil drawable = new Builder()
                .setType(TypeEnum.BOTTOM)
                .setBgColor(bgColor)
                .builder();
        view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        ViewCompat.setBackground(view, drawable);
    }

    public static void setShadowDrawable(View view, TypeEnum type) {
        ShadowDrawableUtil drawable = new Builder()
                .setType(type)
                .builder();
        view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        ViewCompat.setBackground(view, drawable);
    }

    public static void setShadowDrawableCircle(View view) {
        ShadowDrawableUtil drawable = new Builder()
                .setShape(SHAPE_CIRCLE)
                .setType(TypeEnum.All)
                .builder();
        view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        ViewCompat.setBackground(view, drawable);
    }

    public static void setShadowDrawableTop(View view, String shapeColor) {
        ShadowDrawableUtil drawable = new Builder()
                .setShape(SHAPE_ROUND_PART)
                .setType(TypeEnum.TOP)
                .setShadowColor(shapeColor)
                .builder();
        view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        ViewCompat.setBackground(view, drawable);
    }

    public static void setShadowDrawable(View view, String shapeColor, int shapeRadius, String shadowColor, int shadowRadius) {
        ShadowDrawableUtil drawable = new Builder()
                .setBgColor(shapeColor)
                .setShapeRadius(shapeRadius)
                .setShadowColor(shadowColor)
                .setShadowRadius(shadowRadius)
                .builder();
        view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        ViewCompat.setBackground(view, drawable);
    }

    public static void setShadowDrawable(View view, int shape, TypeEnum type, String shapeColor, int shapeRadius, String shadowColor, int shadowRadius) {
        ShadowDrawableUtil drawable = new Builder()
                .setBgColor(shapeColor)
                .setShapeRadius(shapeRadius)
                .setShadowColor(shadowColor)
                .setShadowRadius(shadowRadius)
                .setShape(shape)
                .setType(type)
                .builder();
        view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        ViewCompat.setBackground(view, drawable);
    }

    public static void setShadowDrawable(View view, int shape, TypeEnum type, String[] shapeColor, int shapeRadius, String shadowColor, int shadowRadius) {
        ShadowDrawableUtil drawable = new Builder()
                .setBgColor(shapeColor)
                .setShapeRadius(shapeRadius)
                .setShadowColor(shadowColor)
                .setShadowRadius(shadowRadius)
                .setShape(shape)
                .setType(type)
                .builder();
        view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        ViewCompat.setBackground(view, drawable);
    }


    private static class Builder {
        private int mShape;
        private int mShapeRadius;
        private int mShadowColor;
        private int mShadowRadius;
        private int[] mBgColor;
        private TypeEnum type;

        private Builder() {
            mShape = SHAPE_ROUND;
            type = TypeEnum.All;
            mShapeRadius = 17;
            mShadowColor = Color.parseColor("#FF0000");
            mShadowRadius = 4;
            mBgColor = new int[1];
            mBgColor[0] = Color.GREEN;
        }

        private Builder setShape(int mShape) {
            this.mShape = mShape;
            return this;
        }

        private Builder setShapeRadius(int ShapeRadius) {
            this.mShapeRadius = ShapeRadius;
            return this;
        }

        private Builder setShadowColor(String shadowColor) {

            this.mShadowColor = Color.parseColor(shadowColor);
            return this;
        }

        private Builder setShadowRadius(int shadowRadius) {
            this.mShadowRadius = shadowRadius;
            return this;
        }

        private Builder setBgColor(String bgColor) {
            this.mBgColor[0] = Color.parseColor(bgColor);
            return this;
        }

        private Builder setType(TypeEnum type) {
            this.type = type;
            return this;
        }


        private Builder setBgColor(String[] bgColors) {
            if (bgColors != null && bgColors.length > 0) {
                int[] b = new int[bgColors.length];
                for (int i = 0; i < bgColors.length; i++) {
                    b[i] = Color.parseColor(bgColors[i]);
                }
                this.mBgColor = b;
            }

            return this;
        }

        private ShadowDrawableUtil builder() {
            return new ShadowDrawableUtil(mShape, type, mBgColor, dp2px(mShapeRadius), mShadowColor, dp2px(mShadowRadius));
        }
    }

    private static int dp2px(float dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpVal, ShadowApplication.getApplication().getResources().getDisplayMetrics());
    }
}

如有意见和建议，及时沟通。

_xiangpan
关注
专栏目录
android设置自定义颜色阴影效果,Android自定义图片圆角，增加渐变阴影
weixin_28994403的博客
05-26 914
自定义图片，切圆角、圆形，增加渐变颜色阴影一、先上效果图效果图二、GitHub三、思路1、图片切成圆角(圆形)2、绘制一个带有渐变阴影的图形3、融合圆角图片和阴影图形四、实现(以下是以圆角为例，圆形的类似)1)图片切成圆角BitmapShader bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMo...
Android编程实现带渐变效果的圆角矩形示例
08-29
"Android编程实现带渐变效果的圆角矩形示例" 在Android编程中，实现带渐变效果的圆角矩形是一种常见的界面布局技巧。本文将详细介绍如何使用Android编程实现带渐变效果的圆角矩形，并对其涉及的Android界面布局及...
Android使用shape绘制阴影图层阴影效果示例
08-27
本篇文章主要介绍了Android使用shape绘制阴影图层阴影效果示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android开发：用Drawable XML绘制带阴影效果的圆形按钮
a5597942的专栏
04-14 2122
众所周知，在Android开发里，为了优化在各种分辨率设备上的显示效果，同一份图片素材往往要提供mdpi、hdpi、xhdpi三种（以前还有ldpi），尤其是按钮类的素材，考虑到normal、pressed、focused更是需要至少3×3=9张图片。NinePatch技术虽然可以解决一部分尺寸灵活性的问题，但大部分修改和适配还是要再次制作一批图片的。 根据交互设计的需要，可以考虑用Draw
ShadowDrawable：轻松实现Android阴影效果
最新发布
gitblog_00240的博客
08-16 787
ShadowDrawable：轻松实现Android阴影效果 项目地址:https://gitcode.com/gh_mirrors/sh/ShadowDrawable 在Android应用开发中，我们常常遇到需要为UI元素添加阴影效果以提升界面的立体感和用户体验。然而，原生Android API对于阴影效果的支持并不直接，这往往给开发者带来了不小的困扰。今天，我将向大家推荐一个优秀的开源库——S...
Android实现有阴影的Drawable
yangjunjin的博客
07-10 3340
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true"> <layer-list> ...
Android进阶2之 阴影制作（Shadow）
com_xpp的专栏
03-17 623
阴影制作：包括各种形状（矩形，圆形等等），以及文字等等都能设置阴影。 阴影制作是什么原理呢？ 其实很简单，你需要设置阴影的东西被看作一个主层。然后在主层下面画一个阴影层。 阴影制作涉及到一个重要函数： public void setShadowLayer(float radius, float dx, float dy, int color) radius：阴...
android阴影渐变效果[备用保存]
CherryChen
06-13 1237
&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt; &lt;item&gt; &lt;shape android:shape="rectangle"&
Android自定义Drawable实现圆形和圆角
08-29
"Android自定义Drawable实现圆形和圆角" Android自定义Drawable实现圆形和圆角是Android开发中一个非常重要的技术点，掌握这项技术可以让开发者更好地实现图形处理和自定义控件的开发。 圆形Drawable实现 圆形...
自定义Drawable 实现图片圆角、圆形、椭圆形
09-08
本文将深入探讨如何通过自定义Drawable实现图片的圆角、圆形以及椭圆形显示，帮助开发者更好地理解和运用这一技术。 首先，我们了解Drawable的基本概念。在Android中，Drawable是一种图形对象，可以用于绘制视图的...
Android自定义Drawable的代码例子
08-31
本教程将通过具体的代码示例，介绍如何在Android中创建自定义的Drawable，包括自定义形状、水印和淡出效果。 1. **自定义形状** Android中的Shape Drawable允许我们创建各种几何形状，如矩形、椭圆、线和路径。要...
Android 设置阴影效果
01-14 8338
1. android api（限制  21 以上 ） 在layout中设置elevation，使用android:elevation属性。在代码中设置，使用View.setElevation()方法。设置一个View的translation，使用View.setTranslationZ()方法。ViewPropertyAnimator.z()和ViewPropertyAnimator.transl...
android 实现 drawable 边框阴影效果（渐变效果 ）在线征集名字真不会起名
unknown_315的博客
06-30 1034
我擦 真是一圈一圈实现渐变 珍惜 创建一个drawable 代码应该直接粘过去就能用 为转载博客 事情是这样的 时间久远 真是不知道地址了 项目当时需要用到这个 但是耐不住岁月变迁 项目要迭代了 这个页面删除不用了 太可惜了 枉费我当时花这么长时间去寻找它 必须留下点痕迹 拿来分享给大家 根据项目做了一些改动 将就看 自己改 其中一些单位（dp px 大家自己看着改 别嫌我的垃圾 纯属懒得改） <?xml version="1....
Android MaterialShapeDrawable 阴影
chuyouyinghe的专栏
07-28 1294
方便开发人员给控件添加样式。
Android阴影绘制的方式
xiaokangss的博客
10-19 1651
不管是自定义View也还是自定义ViewGroup，都是一样的效果，我们都是通过Paint画笔自己画出阴影，本质都是操作onDraw方法。核心类就是 BlurMaskFilter 类，它的兼容性比较好，它通过一个模糊的遮罩来实现几个重要参数：mMaskRadius:扩散的半径BlurMaskFilter.Blur.NORMAL：整个图像都被模糊掉BlurMaskFilter.Blur.SOLID：图像边界外产生一层与图像颜色一致阴影效果。
Android:view添加渐变阴影
m0_37678565的博客
06-25 4217
&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt; &lt;item android:gravity="bottom"&gt; &lt;shape&amp
android布局带渐变阴影
烈火苍穹的博客
08-22 3982
效果： 方法很简单，首先在drawable文件夹下建一个test.xml，然后将下面这段代码复制进去 &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;layer-list xmlns:android="http://schemas.android.com/apk/res/android"&gt; &lt;item&gt; ..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值