2018April01_自定义控件实现圆角阴影效果

#1 Requirement
自定义控件实现圆角阴影效果,不用.9

#2 Effect

这里写图片描述

#3 Implement
自定义控件View实现
core API:
圆角 Canvas.drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)
rx、ry 圆角的x\y方向半径

阴影 Paint.setShadowLayer(float radius, float dx, float dy, int shadowColor)
radius阴影半径 dx 横向偏移 dy 纵向偏移

#4 Major Code

public class RoundShadowView extends View {

    private int mWidth,mHeight;
    private Paint mPaint;
    private int mRoundRadius;
    private int mShadowRadius;

    public RoundShadowView(Context context) {
        super(context);
        init();
    }

    public RoundShadowView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public RoundShadowView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        setLayerType(View.LAYER_TYPE_SOFTWARE,null);

        mShadowRadius = dip2px(getContext(),10);
        yOffset = dip2px(getContext(),5);
        mRoundRadius = dip2px(getContext(),6);

        mPaint = new Paint();
        mPaint.setStrokeWidth(dip2px(getContext(),1));
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(0xffEEEEEE);

        //曲线更加圆润 0x4dFF9541
        mPaint.setAntiAlias(true);
        mPaint.setShadowLayer(mShadowRadius,0,yOffset,0x40FF9541);
    }
    private int yOffset;
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        mWidth = getWidth();
        mHeight = getHeight();
        //左、上、右(右边到控件左边)、下(底部到控件顶部)
        RectF rectF = new RectF(mShadowRadius/2,0,mWidth - mShadowRadius/2,mHeight - mShadowRadius/4 -yOffset);
        canvas.drawRoundRect(rectF,mRoundRadius,mRoundRadius, mPaint);
    }

    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}

#5 Demo
[自定义控件实现圆角阴影效果]

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值