在低版本中让按钮显示阴影

最新推荐文章于 2023-10-08 15:35:20 发布

水手辛巴

最新推荐文章于 2023-10-08 15:35:20 发布

阅读量1.1k

点赞数

分类专栏： android开发文章标签： android 阴影 shadow button

本文链接：https://blog.csdn.net/u014731991/article/details/51789916

版权

android开发专栏收录该内容

12 篇文章 0 订阅

订阅专栏

在一些情况需要让button显示阴影表示悬空的状态，在Android L 以上有 elevation属性可以使用，低版本就需要自己画阴影来表示悬浮状态。对于一个按钮一般只要支持圆角矩形就可以满足需求了(圆型按钮可以直接使用FloatingActionButton)。

首先自定义View RoundRecButton 继承自Button:
```
public class RoundRecButton extends Button
```
对于自定义的RoundRecButton 添加两个自定义属性：
```
<declare-styleable name="RoundRecButton">
    <attr name="radius" format="dimension"/>
    <attr name="background_tint" format="color"/>
</declare-styleable>
```
这里background_tint 其实就是background 没有做tint的支持，不要被名字误导了（懒得改了）

在View的3个构造方法中做初始化工作,分别获取我们两个自定义属性的值，一个圆角的radius 和一个背景颜色（这里使用 colorStateList 是为了支持颜色选择器<selector/>）

private void init(Context context, AttributeSet attributeSet){

    TypedArray a = context.obtainStyledAttributes(attributeSet, R.styleable.RoundRecButton);
    int radius = a.getDimensionPixelSize(R.styleable.RoundRecButton_radius, 0);
    mStateList = a.getColorStateList(R.styleable.RoundRecButton_background_tint);
    a.recycle();

对于 Android L 及以上版本使用elevation 设置：

private boolean elevationSupported() {
    return android.os.Build.VERSION.SDK_INT >= 21;
}

if (elevationSupported()) {
        mCircle = new ShapeDrawable(new RoundRectShape(new float[]{radius,radius,radius,radius,radius,radius,radius,radius},null,null));
        ViewCompat.setElevation(this, SHADOW_ELEVATION * density);
    }

关于ShapeDrawable 就是对应于<shape android:shape="retangle"/>参数说明如下：

/**
 * RoundRectShape constructor.
 * Specifies an outer (round)rect and an optional inner (round)rect.
 *
 * @param outerRadii An array of 8 radius values, for the outer roundrect. 
 *                   The first two floats are for the 
 *                   top-left corner (remaining pairs correspond clockwise). 
 *                   For no rounded corners on the outer rectangle, 
 *                   pass null.
 * @param inset      A RectF that specifies the distance from the inner 
 *                   rect to each side of the outer rect. 
 *                   For no inner, pass null.
 * @param innerRadii An array of 8 radius values, for the inner roundrect.
 *                   The first two floats are for the 
 *                   top-left corner (remaining pairs correspond clockwise). 
 *                   For no rounded corners on the inner rectangle, 
 *                   pass null.
 *                   If inset parameter is null, this parameter is ignored. 
 */
public RoundRectShape(float[] outerRadii, RectF inset,
                      float[] innerRadii) {

对于Android L 以下版本使用自定义的RoundRectShadow具体就是在原RoundRecShape 的基础上在外侧绘制阴影：

private class RoundRectShadow extends RoundRectShape{
    private Paint mShadowPaint;
    private RadialGradient mRadialGradient;
    private RectF mRectF = new RectF();
    private int mRadius;

    public RoundRectShadow(float[] outerRadii, RectF inset, float[] innerRadii,int shadowRadius,int radius) {
        super(outerRadii, inset, innerRadii);
        mRadius = radius;
        mShadowPaint = new Paint();
        mShadowRadius = shadowRadius;
        mRadialGradient = new RadialGradient(RoundRecButton.this.getWidth()/2, RoundRecButton.this.getHeight() / 2,
                mShadowRadius, new int[] {
                FILL_SHADOW_COLOR, Color.TRANSPARENT
        }, null, Shader.TileMode.CLAMP);
        mShadowPaint.setShader(mRadialGradient);
    }

    @Override
    public void draw(Canvas canvas, Paint paint) {
        final int width = RoundRecButton.this.getWidth();
        final int height = RoundRecButton.this.getHeight();
        mRectF.set(0,0,width,height);
        canvas.drawRoundRect(mRectF, mRadius, mRadius, mShadowPaint);
        mRectF.inset(mShadowRadius, mShadowRadius);
        canvas.drawRoundRect(mRectF,mRadius,mRadius,paint);

    }
}

在Android L 以下版本使用带有阴影的自定义Shape：

if(elevationSupported()){
/.../
}else {
        RoundRectShape oval = new RoundRectShadow(new float[]{radius,radius,radius,radius,radius,radius,radius,radius}, null,null,mShadowRadius,radius);
        mCircle = new ShapeDrawable(oval);
        ViewCompat.setLayerType(this, ViewCompat.LAYER_TYPE_SOFTWARE, mCircle.getPaint());
        mCircle.getPaint().setShadowLayer(mShadowRadius, shadowXOffset, shadowYOffset,
                KEY_SHADOW_COLOR);
        final int padding = mShadowRadius;
        // set padding so the inner image sits correctly within the shadow.
        setPadding(padding, padding, padding, padding);
    }

使用ShadowLayer 会模糊边缘，因为在shape中只是单纯的绘制一层阴影。

现在已经完成对阴影的支持，现在再加入对colorStateList的支持：
设置初始颜色

if(mStateList != null) {
        mCircle.getPaint().setColor(mStateList.getColorForState(getDrawableState(),Color.WHITE));
    }else {
        mCircle.getPaint().setColor(Color.WHITE);
    }

当Drawable 状态改变时设置对应的颜色并刷新界面

@Override
protected void drawableStateChanged() {
    super.drawableStateChanged();
    if(mStateList != null){
        mCircle.getPaint().setColor(mStateList.getColorForState(getDrawableState(),Color.WHITE));
        invalidate();
    }
}

之后再加入对RippleDrawable的支持（由于只是支持的颜色设置，所以这里都是需要自己用Drawable包装，其实可以稍作修改直接支持Drawable 就好了）：

if(Build.VERSION.SDK_INT >= 21){
        TypedArray a1 = context.obtainStyledAttributes(new int[]{android.R.attr.colorControlHighlight});
        ColorStateList colorStateList = a1.getColorStateList(0);
        a1.recycle();
        if(colorStateList != null) {
            setBackground(new RippleDrawable(colorStateList, mCircle, null));
        }
    }else {
        setBackgroundDrawable(mCircle);
    }

总结

其实关键就是使用自定义的Shape进行阴影支持，如果直接进行setBackground,那就连状态选择及Ripple等都不用做处理了。源码如下：

public class RoundRecButton extends Button {
private static final int KEY_SHADOW_COLOR = 0x1E000000;
private static final int FILL_SHADOW_COLOR = 0x3D000000;

private static final float X_OFFSET = 0f;
private static final float Y_OFFSET = 1.75f;
private static final float SHADOW_RADIUS = 3.5f;
private static final int SHADOW_ELEVATION = 4;

private int mShadowRadius;

private ColorStateList mStateList;
private ShapeDrawable mCircle;
public RoundRecButton(Context context) {
    super(context);
    init(context,null);
}

public RoundRecButton(Context context, AttributeSet attrs) {
    super(context, attrs);
    init(context,attrs);
}

public RoundRecButton(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context,attrs);
}

@Override
protected void drawableStateChanged() {
    super.drawableStateChanged();
    if(mStateList != null){
        mCircle.getPaint().setColor(mStateList.getColorForState(getDrawableState(),Color.WHITE));
        invalidate();
    }
}

private void init(Context context, AttributeSet attributeSet){
    TypedArray a = context.obtainStyledAttributes(attributeSet, R.styleable.RoundRecButton);
    int radius = a.getDimensionPixelSize(R.styleable.RoundRecButton_radius, 0);
    mStateList = a.getColorStateList(R.styleable.RoundRecButton_background_tint);
    a.recycle();
    final float density = getContext().getResources().getDisplayMetrics().density;
    final int shadowYOffset = (int) (density * Y_OFFSET);
    final int shadowXOffset = (int) (density * X_OFFSET);
    mShadowRadius = (int) (density * SHADOW_RADIUS);
    if (elevationSupported()) {
        mCircle = new ShapeDrawable(new RoundRectShape(new float[]{radius,radius,radius,radius,radius,radius,radius,radius},null,null));
        ViewCompat.setElevation(this, SHADOW_ELEVATION * density);
    } else {
        RoundRectShape oval = new RoundRectShadow(new float[]{radius,radius,radius,radius,radius,radius,radius,radius}, null,null,mShadowRadius,radius);
        mCircle = new ShapeDrawable(oval);
        ViewCompat.setLayerType(this, ViewCompat.LAYER_TYPE_SOFTWARE, mCircle.getPaint());
        mCircle.getPaint().setShadowLayer(mShadowRadius, shadowXOffset, shadowYOffset,
                KEY_SHADOW_COLOR);
        final int padding = mShadowRadius;
        // set padding so the inner image sits correctly within the shadow.
        setPadding(padding, padding, padding, padding);
    }
    if(mStateList != null) {
        mCircle.getPaint().setColor(mStateList.getColorForState(getDrawableState(),Color.WHITE));
    }else {
        mCircle.getPaint().setColor(Color.WHITE);
    }
    if(Build.VERSION.SDK_INT >= 21){
        TypedArray a1 = context.obtainStyledAttributes(new int[]{android.R.attr.colorControlHighlight});
        ColorStateList colorStateList = a1.getColorStateList(0);
        a1.recycle();
        if(colorStateList != null) {
            setBackground(new RippleDrawable(colorStateList, mCircle, null));
        }
    }else {
        setBackgroundDrawable(mCircle);
    }
}

@Override
public void setBackgroundResource(int resid) {
    super.setBackgroundResource(resid);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    if (!elevationSupported()) {
        setMeasuredDimension(getMeasuredWidth() + mShadowRadius*2, getMeasuredHeight()
                + mShadowRadius*2);
    }
}

private boolean elevationSupported() {
    return android.os.Build.VERSION.SDK_INT >= 21;
}

private class RoundRectShadow extends RoundRectShape{
    private Paint mShadowPaint;
    private RadialGradient mRadialGradient;
    private RectF mRectF = new RectF();
    private int mRadius；
    public RoundRectShadow(float[] outerRadii, RectF inset, float[] innerRadii,int shadowRadius,int radius) {
        super(outerRadii, inset, innerRadii);
        mRadius = radius;
        mShadowPaint = new Paint();
        mShadowRadius = shadowRadius;
        mRadialGradient = new RadialGradient(RoundRecButton.this.getWidth()/2, RoundRecButton.this.getHeight() / 2,
                mShadowRadius, new int[] {
                FILL_SHADOW_COLOR, Color.TRANSPARENT
        }, null, Shader.TileMode.CLAMP);
        mShadowPaint.setShader(mRadialGradient);
    }
    @Override
    public void draw(Canvas canvas, Paint paint) {
        final int width = RoundRecButton.this.getWidth();
        final int height = RoundRecButton.this.getHeight();
        mRectF.set(0,0,width,height);
        canvas.drawRoundRect(mRectF, mRadius, mRadius, mShadowPaint);
        mRectF.inset(mShadowRadius, mShadowRadius);
        canvas.drawRoundRect(mRectF,mRadius,mRadius,paint);
    }
}
}

水手辛巴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在低版本中让按钮显示阴影

在一些情况需要让button显示阴影表示悬空的状态，在Android L 以上有 elevation属性可以使用，低版本就需要自己画阴影来表示悬浮状态。对于一个按钮一般只要支持圆角矩形就可以满足需求了(圆型按钮可以直接使用FloatingActionButton)。首先自定义View RoundRecButton 继承自Button:public class RoundRecButton exten
复制链接

扫一扫