除了实践以外,没有别的办法可以识别错误。——狄德罗
首先网上找了一圈方案,要么是用UI
切图的方式,要么是说用背景或者自带的阴影,这篇文章也说了
阴影组件化,解决安卓不统一问题 - 掘金
UI
切图/制作点9
图的方式:
这种方式应该是完美还原蓝湖设计图的方式,但不是从技术角度实现
下面还有几个
1. elevation(组件属性) 优点:绘制效率高,使用自带的api不用添加多余的drawable文件,并且支持 translationZ 动画方便实现点击的动画效果;不占位 缺点:低版本不显示,方向颜色不可控,自带的属性设置参数有限; 注意:View要带透明度,否则是没有效果; 2. CardView(组件自带) 优点:CardView是自带阴影的是Materail设计的组件,效率高;不占位 缺点:阴影方向颜色不可控; 注意:CardView模拟的光源在屏幕中心正上方阴影显示角度会有所差异; 3. Shape(作为背景绘制所以会占位,它的绘制原理是一层层的由深到浅的形状作为阴影) 优点:颜色方向可控制;占位 缺点:没有模糊效果阴影不自然有点生硬(较弱的阴影不太容易看出来); 注意:占位的阴影要考虑预留出阴影的空间; 4. SCardView 同CardView显示效果,可通过代码调整边角光源调整阴影方向和颜色,但需考虑版本兼容性问题; 5. 自定义View 理论上我们想要的阴影效果都可以实现,但是如果脱离了系统原生属性就需要考虑的太多; 自定义阴影针对特殊的载体样式和阴影,代码实现较为复杂,绘制成本较高,非必要情况下不建议; 作者:owlling 链接:https://juejin.cn/post/6844904122433404941 来源:稀土掘金 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
然后这里我采取的是这篇文章的方式
https://xiaozhuanlan.com/topic/6538724091
最后的xml
布局:
<com.ruben.customviews.ShadowViewCard
android:id="@ id/shadow"
android:layout_width="@dimen/dp_86"
android:layout_height="@dimen/dp_42"
app:layout_constraintBottom_toBottomOf="@ id/img"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@ id/img"
app:shadowBottomHeight="@dimen/dp_3"
app:shadowCardPaddingHeight="@dimen/dp_5"
app:shadowCardPaddingWidth="@dimen/dp_10"
app:shadowColors="#A3D8FF"
app:shadowLeftHeight="0dp"
app:shadowOffsetX="0dp"
app:shadowOffsetY="@dimen/dp_2"
app:shadowRadius="25"
app:shadowRightHeight="0dp"
app:shadowRound="@dimen/dp_15"
app:shadowTopHeight="@dimen/dp_1">
<com.noober.background.view.BLTextView
android:id="@ id/label"
android:layout_width="@dimen/dp_66"
android:layout_height="@dimen/dp_29"
android:layout_marginLeft="@dimen/dp_0"
android:layout_marginTop="@dimen/dp_0"
android:gravity="center"
android:text="领取"
android:textColor="@color/setup_But_Color"
android:textSize="15sp"
android:textStyle="bold"
app:bl_corners_radius="@dimen/dp_20"
app:bl_gradient_endColor="#3EA7E3"
app:bl_gradient_startColor="#A3D8FF"
app:bl_padding_left="@dimen/dp_0"
app:bl_padding_top="@dimen/dp_0" />
</com.ruben.customviews.ShadowViewCard>
然后是代码部分:
代码语言:javascript复制package com.ruben.customviews;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.widget.FrameLayout;
import com.namaste.hsswcom.rubens ShadowViewCard extends FrameLayout {
private static final int DEFAULT_VALUE_SHADOW_COLOR = R.color.shadow_default_color;
private static final int DEFAULT_VALUE_SHADOW_CARD_COLOR = R.color.shadow_card_default_color;
private static final int DEFAULT_VALUE_SHADOW_CARD_PADDING_WIDTH = 0;
private static final int DEFAULT_VALUE_SHADOW_CARD_PADDING_HEIGHT = 0;
private static final int DEFAULT_VALUE_SHADOW_ROUND = 0;
private static final int DEFAULT_VALUE_SHADOW_RADIUS = 10;
private static final int DEFAULT_VALUE_SHADOW_TOP_HEIGHT = 5;
private static final int DEFAULT_VALUE_SHADOW_LEFT_HEIGHT = 5;
private static final int DEFAULT_VALUE_SHADOW_RIGHT_HEIGHT = 5;
private static final int DEFAULT_VALUE_SHADOW_BOTTOM_HEIGHT = 5;
private static final int DEFAULT_VALUE_SHADOW_OFFSET_Y = 0;
private static final int DEFAULT_VALUE_SHADOW_OFFSET_X = DEFAULT_VALUE_SHADOW_TOP_HEIGHT / 3;
private int shadowRound;
private int shadowColor;
private int shadowCardColor;
private int shadowCardPaddingHeight;
private int shadowCardPaddingWidth;
private int shadowRadius;
private int shadowOffsetY;
private int shadowOffsetX;
private int shadowTopHeight;
private int shadowLeftHeight;
private int shadowRightHeight;
private int shadowBottomHeight;
public ShadowViewCard(Context context) {
this(context, null);
}
public ShadowViewCard(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ShadowViewCard(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initView(context, attrs);
}
private void initView(Context context, AttributeSet attrs) {
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ShadowViewCard);
shadowRound = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowRound, DEFAULT_VALUE_SHADOW_ROUND);
shadowColor = a.getColor(R.styleable.ShadowViewCard_shadowColors, getResources().getColor(DEFAULT_VALUE_SHADOW_COLOR, null));
shadowCardColor = a.getColor(R.styleable.ShadowViewCard_shadowCardColor, getResources().getColor(DEFAULT_VALUE_SHADOW_CARD_COLOR, null));
shadowTopHeight = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowTopHeight, dp2px(getContext(), DEFAULT_VALUE_SHADOW_TOP_HEIGHT));
shadowRightHeight = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowRightHeight, dp2px(getContext(), DEFAULT_VALUE_SHADOW_RIGHT_HEIGHT));
shadowLeftHeight = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowLeftHeight, dp2px(getContext(), DEFAULT_VALUE_SHADOW_LEFT_HEIGHT));
shadowCardPaddingHeight = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowCardPaddingHeight, dp2px(getContext(), DEFAULT_VALUE_SHADOW_CARD_PADDING_HEIGHT));
shadowCardPaddingWidth = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowCardPaddingWidth, dp2px(getContext(), DEFAULT_VALUE_SHADOW_CARD_PADDING_WIDTH));
shadowBottomHeight = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowBottomHeight, dp2px(getContext(), DEFAULT_VALUE_SHADOW_BOTTOM_HEIGHT));
shadowOffsetY = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowOffsetY, dp2px(getContext(), DEFAULT_VALUE_SHADOW_OFFSET_Y));
shadowOffsetX = a.getDimensionPixelSize(R.styleable.ShadowViewCard_shadowOffsetX, dp2px(getContext(), DEFAULT_VALUE_SHADOW_OFFSET_X));
shadowRadius = a.getInteger(R.styleable.ShadowViewCard_shadowRadius, DEFAULT_VALUE_SHADOW_RADIUS);
a.recycle();
setPadding(shadowCardPaddingWidth, shadowCardPaddingHeight, shadowCardPaddingWidth, shadowCardPaddingHeight);
setLayerType(LAYER_TYPE_SOFTWARE, null);
}
public static int dp2px(Context context, float dipValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dipValue * scale 0.5f);
}
@Override
protected void dispatchDraw(Canvas canvas) {
// 创建画笔,设置画笔的颜色,风格
Paint shadowPaint = new Paint();
shadowPaint.setColor(shadowCardColor);
shadowPaint.setStyle(Paint.Style.FILL);
shadowPaint.setAntiAlias(true);
// 获取绘画的范围:ShadowCard的范围减去需要的阴影的范围,假如阴影的宽度为45px,则在ShadowCard内部的45px内进行绘制
float left = shadowLeftHeight shadowCardPaddingWidth;
float top = shadowTopHeight shadowCardPaddingHeight;
float right = getWidth() - shadowRightHeight - shadowCardPaddingWidth;
float bottom = getHeight() - shadowBottomHeight - shadowCardPaddingHeight;
shadowPaint.setShadowLayer(shadowRadius, shadowOffsetX, shadowOffsetY, shadowColor);
// 创建RectF,最后开始绘画。
RectF rectF = new RectF(left, top, right, bottom);
// 给画笔设置阴影的颜色,阴影的模糊度,模糊度值越大越模糊,且不能为0
canvas.drawRoundRect(rectF, shadowRound, shadowRound, shadowPaint);
canvas.save();
super.dispatchDraw(canvas);
}
}
最后实现效果: