Android开发偷懒技巧之阴影

在Android开发中我们会在设计稿中看到各种阴影效果,我们知道CardView可以添加阴影效果,不过可能并不是我们设计稿想要的效果,那我们如何可以更加灵活地给我们原生控件添加阴影效果,这就是下面所要描述的,当然也可以让设计师给个阴影切图,我们做下.9处理然后使用切图实现阴影效果。

下面看看如何用代码更灵活地去为原生控件实现阴影效果,源码可以查看 XSelector GitHub, 结尾也会贴出ShadowHelper源码。
先看效果图:

shadow.png

如果使用XSelector工具库引入对应的库implementation 'com.android.util:xselector:1.0.2',使用方法如下,也可以直接使用该ShadowHelper 类去完成阴影效果。

  XSelector.shadowHelper().setShape(ShadowHelper.SHAPE_CIRCLE)
         .setBgColor(Color.parseColor("#FF3D00"))
         .setShapeRadius(dpToPx(6))
         .setShadowColor(Color.parseColor("#991DE9B6"))
         .setShadowRadius(dpToPx(6))
         .setOffsetX(dpToPx(4))
         .setOffsetY(dpToPx(4))
         .into(textView5);

使用方法存在但不限于上述使用方法,具体详细方法如下:

模块 方法名 描述
ShadowHelper setShape 设置背景形状,椭圆或者圆形
setBgColor 背景颜色
setShapeRadius 设置背景半径
setShadeSide 设置阴影方向,默认四周
setShadeRadius 设置阴影半径
setShadowColor 设置阴影颜色
setOffsetX 设置阴影X轴偏移量
setOffsetY 设置阴影Y轴偏移量
setShadowAlpha 设置阴影透明度
into 目标View

ShadowHelper 源码如下:

import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.ColorFilter;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.PixelFormat;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;
import android.graphics.Shader;
import android.graphics.drawable.Drawable;
import android.support.annotation.IntRange;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.view.ViewCompat;
import android.view.View;

/**
 * 类名称:ShadowHelper
 * 创建者:Create by liujc
 * 创建时间:Create on 2018/5/28
 * 描述:控件阴影效果
 */
public class ShadowHelper extends Drawable {

    static ShadowHelper shadowHelper;
    private Paint mPaint;
    /**
     * 阴影模糊半径,越大越模糊
     */
    private int mShadowRadius;
    /**
     * 阴影颜色
     */
    private int mShadowColor;
    /**
     * 背景形状
     */
    private int mShape;
    /**
     * 背景圆角半径
     */
    private int mShapeRadius;
    /**
     * 阴影x偏移(右偏移)
     */
    private int mOffsetX;
    /**
     * 阴影y偏移(下偏移)
     */
    private int mOffsetY;
    /**
     * 背景颜色
     */
    private int mBgColor[];
    private RectF mRect;

    public final static int SHAPE_ROUND = 1;
    public final static int SHAPE_CIRCLE = 2;
    public static final int ALL = 0x1111;
    public static final int LEFT = 0x0001;
    public static final int TOP = 0x0010;
    public static final int RIGHT = 0x0100;
    public static final int BOTTOM = 0x1000;
    /**
     * 阴影边 例:0x1100 表示RIGHT和BOTTOM
     */
    private int shadowSide = ALL;

    private ShadowHelper(){
        mShape = ShadowHelper.SHAPE_ROUND;
        mShapeRadius = 0;
        mShadowColor = Color.parseColor("#4d000000");
        mShadowRadius = 18;
        mOffsetX = 0;
        mOffsetY = 0;
        mBgColor = new int[1];
        mBgColor[0] = Color.TRANSPARENT;

        mPaint = new Paint();
        mPaint.setColor(Color.TRANSPARENT);
        mPaint.setAntiAlias(true);
        mPaint.setShadowLayer(mShadowRadius, mOffsetX, mOffsetY, mShadowColor);
        mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_ATOP));

    }

    public static ShadowHelper getInstance() {
        shadowHelper = new ShadowHelper();
        return shadowHelper;
    }

    public ShadowHelper setShape(int mShape) {
        this.mShape = mShape;
        return this;
    }

    public ShadowHelper setShadowSide(int shadowSide) {
        this.shadowSide = shadowSide;
        return this;
    }

    public ShadowHelper setShapeRadius(int ShapeRadius) {
        this.mShapeRadius = ShapeRadius;
        return this;
    }
    /**
     * 设置阴影颜色
     * @param shadowColor 例:R.color.colorPrimary
     * @return
     */
    public ShadowHelper setShadowColor(int shadowColor) {
        this.mShadowColor = shadowColor;
        mPaint.setShadowLayer(mShadowRadius, mOffsetX, mOffsetY, mShadowColor);
        return this;
    }

    /**
     * 设置阴影颜色
     * @param shadowColor 例:#ffffff
     * @return
     */
    public ShadowHelper setShadowColor(String shadowColor) {
        this.mShadowColor = Color.parseColor(shadowColor);
        mPaint.setShadowLayer(mShadowRadius, mOffsetX, mOffsetY, mShadowColor);
        return this;
    }

    public ShadowHelper setShadowRadius(int shadowRadius) {
        this.mShadowRadius = shadowRadius;
        mPaint.setShadowLayer(mShadowRadius, mOffsetX, mOffsetY, mShadowColor);
        return this;
    }

    public ShadowHelper setOffsetX(int OffsetX) {
        this.mOffsetX = OffsetX;
        mPaint.setShadowLayer(mShadowRadius, mOffsetX, mOffsetY, mShadowColor);
        return this;
    }

    public ShadowHelper setOffsetY(int OffsetY) {
        this.mOffsetY = OffsetY;
        mPaint.setShadowLayer(mShadowRadius, mOffsetX, mOffsetY, mShadowColor);
        return this;
    }

    /**
     * 设置背景颜色
     * @param BgColor 例:R.color.colorPrimary
     * @return
     */
    public ShadowHelper setBgColor(int BgColor) {
        this.mBgColor[0] = BgColor;
        return this;
    }

    /**
     * 设置背景颜色
     * @param bgColor 例:#ffffff
     * @return
     */
    public ShadowHelper setBgColor(String bgColor) {
        this.mBgColor[0] = Color.parseColor(bgColor);
        return this;
    }

    public ShadowHelper setBgColor(int[] BgColor) {
        this.mBgColor = BgColor;
        return this;
    }
    public ShadowHelper setBgColor(String[] bgColor) {
        int length = bgColor.length;
        int[] color = new int[length];
        for(int i=0;i < length;i++){
            color[i] = Color.parseColor(bgColor[i]);
        }
        this.mBgColor = color;
        return this;
    }

    public ShadowHelper setShadowAlpha(int i) {
        setAlpha(i);
        return this;
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        int leftShadow = (shadowSide & LEFT) == LEFT ? mShadowRadius - mOffsetX : -mShapeRadius;
        int topShadow = (shadowSide & TOP) == TOP ? mShadowRadius - mOffsetY : -mShapeRadius;
        int rightShadow = (shadowSide & RIGHT) == RIGHT ? mShadowRadius + mOffsetX : -mShapeRadius;
        int bottomShadow = (shadowSide & BOTTOM) == BOTTOM ? mShadowRadius + mOffsetY : -mShapeRadius;
        mRect = new RectF(bounds.left + leftShadow, bounds.top + topShadow, bounds.right - rightShadow,
                bounds.bottom - bottomShadow);
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        Paint newPaint = new Paint();
        if (mBgColor != null) {
            if (mBgColor.length == 1) {
                newPaint.setColor(mBgColor[0]);
            } else {
                newPaint.setShader(new LinearGradient(mRect.left, mRect.height() / 2, mRect.right, mRect.height() / 2, mBgColor,
                        null, Shader.TileMode.CLAMP));
            }
        }
        newPaint.setAntiAlias(true);
        if (mShape == SHAPE_ROUND) {
            canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, mPaint);
            canvas.drawRoundRect(mRect, mShapeRadius, mShapeRadius, newPaint);
        } else {
            canvas.drawCircle(mRect.centerX(), mRect.centerY(), Math.min(mRect.width(), mRect.height())/ 2, mPaint);
            canvas.drawCircle(mRect.centerX(), mRect.centerY(), Math.min(mRect.width(), mRect.height())/ 2, newPaint);
        }
    }

    @Override
    public void setAlpha(@IntRange(from = 0, to = 255) int alpha) {
        mPaint.setAlpha(alpha);
    }

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

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

    public static void setShadowHelper(View view, Drawable drawable) {
        view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        ViewCompat.setBackground(view, drawable);
    }

    public void into(View view){
        if (view == null){
            return;
        }
        view.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
        ViewCompat.setBackground(view, this);
    }

}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容