阴影效果 ShadowLayout 布局实现(让控件实现立体效果)

效果

这里写图片描述
第二张和第三张图是加入了阴影效果的,是不是觉得立体感很强,感觉图片是浮在屏幕上。这个效果也可以用Google 提供扩展包下的CardView控件来实现,而这篇文章是带大家自己来实现这样一个效果。

原理

我们仔细观察上图,可以发现,有带阴影效果的图和没带阴影效果的图,其实就一个地方不同,就是在图片的底下绘制了阴影效果,而图片的大小都没变。所以我们要做的就是给子 View 绘制阴影。那么阴影部分怎么绘制呢?这里是整个效果实现的一个难点;阴影部分其实就是一张 bitmap 图片,而接下来的工作就是如何生成一张这样效果的 bitmap 图,还有就是 bitmap 图片绘制位置的确定。

实现

1、阴影效果的 bitmap 图片的生成
最简单的办法叫美工做一张,我们把他转化成.9图片,这是一种方法;还有一种方法就是用代码生成这样一张 bitmap,要实现这样的效果,我们需要用到 Paint 画笔中的一个属性

public MaskFilter setMaskFilter(MaskFilter maskfilter) {
//...
}

这个 MaskFilter有一个子类BlurMaskFilter就能实现这样的效果,一般把它叫为毛玻璃效果。这个类的实现需要传两个参数

public BlurMaskFilter(float radius, Blur style) {
        //...
    }

radius:渐变效果的距离。

style:模式,这里有四中模式

    public enum Blur {
        /**
         * Blur inside and outside the original border.
         */
        NORMAL(0),

        /**
         * Draw solid inside the border, blur outside.
         */
        SOLID(1),

        /**
         * Draw nothing inside the border, blur outside.
         */
        OUTER(2),

        /**
         * Blur inside the border, draw nothing outside.
         */
        INNER(3);

        Blur(int value) {
            native_int = value;
        }
        final int native_int;
    }

这几种模式到底是怎么的呢?来看看下面那张图
这里写图片描述
以上图形是通过

    public void drawRect(RectF rect, Paint paint) {
        ;
    }

看到这张图加上上面几种模式的注解,应该很清楚了。
这里有一个注意点是:我们绘制矩形的时候,如果没有设置这种模糊效果,这绘制的图形的大小就是矩形的大小,如果绘制了模糊效果,则图形的大小需要加上实例化BlurMaskFilter时候的radius,就是渐变的距离。
创建 bitmap 的代码如下:

        //设置画笔的 style
        mPaint.setStyle(Pa
  • 10
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 7
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值