介绍
CardView 是用圆角和阴影来实现Material Design卡片图案。通常我们在列表上展示相同的内容时，使用cardview来讲这些信息保存下来，展示相同的风格。
使用
1、添加依赖
implementation "androidx.cardview:cardview:1.0.0"
2、创建Cards
说明：
-
CardView 内部作为视图组包含多个widget时，这些视图会重叠显示，需要借助其他布局来达到预期效果；因为他是一个FrameLayout ，所以这一点就不能理解了。
-
cardBackgroundColor：配置卡片的背景se
cardCornerRadius：配置圆角的半径
cardElevation：配置阴影的高度，高度越大阴影越明显
contentPadding：配置内部边距
<androidx.cardview.widget.CardView
android:id="@+id/card_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
card_view:cardBackgroundColor="#cfcfcf"
card_view:cardCornerRadius="5dp"
card_view:cardElevation="5dp"
card_view:contentPadding="10dp">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="aaaaaaaaaaaaaaaaaaa" />
</androidx.cardview.widget.CardView>
<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="20dp"
card_view:cardBackgroundColor="#cfcfcf"
card_view:cardCornerRadius="5dp"
card_view:cardElevation="5dp"
card_view:contentPadding="10dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="bbbbbbbbbbbbbbb" />
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="cccccccccccccccccc" />
</LinearLayout>
</androidx.cardview.widget.CardView>
注意：
如果使用CardView时，设置了精确的尺寸，那么由于阴影绘制的原因，会导致适配时出现达不到预期！！！！
两种解决方案：
-
区分版本来设置精确的尺寸进行适配；
-
使用setUseCompatPadding(true)来达到cardview内部填充边距；
源码分析：
CardView的源码比较简单，其继承自FrameLayout , 需要重点关注的是内部的static代码块，这里针对不同的版本，对CardViewImpl的实现不同，也就说明了绘制阴影的方式不同。从onMeasure()方法看到主要区分了针对高于API21和低与版本的处理。
public class CardView extends FrameLayout {
private static final int[] COLOR_BACKGROUND_ATTR = {android.R.attr.colorBackground};
private static final CardViewImpl IMPL;
static {
if (Build.VERSION.SDK_INT >= 21) {
IMPL = new CardViewApi21Impl();
} else if (Build.VERSION.SDK_INT >= 17) {
IMPL = new CardViewApi17Impl();
} else {
IMPL = new CardViewBaseImpl();
}
IMPL.initStatic();
}
public CardView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CardView, defStyleAttr,
R.style.CardView);
ColorStateList backgroundColor;
if (a.hasValue(R.styleable.CardView_cardBackgroundColor)) {
backgroundColor = a.getColorStateList(R.styleable.CardView_cardBackgroundColor);
} else {
// There isn't one set, so we'll compute one based on the theme
final TypedArray aa = getContext().obtainStyledAttributes(COLOR_BACKGROUND_ATTR);
final int themeColorBackground = aa.getColor(0, 0);
aa.recycle();
// If the theme colorBackground is light, use our own light color, otherwise dark
final float[] hsv = new float[3];
Color.colorToHSV(themeColorBackground, hsv);
backgroundColor = ColorStateList.valueOf(hsv[2] > 0.5f
? getResources().getColor(R.color.cardview_light_background)
: getResources().getColor(R.color.cardview_dark_background));
}
float radius = a.getDimension(R.styleable.CardView_cardCornerRadius, 0);
float elevation = a.getDimension(R.styleable.CardView_cardElevation, 0);
float maxElevation = a.getDimension(R.styleable.CardView_cardMaxElevation, 0);
mCompatPadding = a.getBoolean(R.styleable.CardView_cardUseCompatPadding, false);
mPreventCornerOverlap = a.getBoolean(R.styleable.CardView_cardPreventCornerOverlap, true);
int defaultPadding = a.getDimensionPixelSize(R.styleable.CardView_contentPadding, 0);
mContentPadding.left = a.getDimensionPixelSize(R.styleable.CardView_contentPaddingLeft,
defaultPadding);
mContentPadding.top = a.getDimensionPixelSize(R.styleable.CardView_contentPaddingTop,
defaultPadding);
mContentPadding.right = a.getDimensionPixelSize(R.styleable.CardView_contentPaddingRight,
defaultPadding);
mContentPadding.bottom = a.getDimensionPixelSize(R.styleable.CardView_contentPaddingBottom,
defaultPadding);
if (elevation > maxElevation) {
maxElevation = elevation;
}
mUserSetMinWidth = a.getDimensionPixelSize(R.styleable.CardView_android_minWidth, 0);
mUserSetMinHeight = a.getDimensionPixelSize(R.styleable.CardView_android_minHeight, 0);
a.recycle();
//下面这个方法针对不同的api版本也走向不同
IMPL.initialize(mCardViewDelegate, context, backgroundColor, radius,
elevation, maxElevation);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (!(IMPL instanceof CardViewApi21Impl)) {
final int widthMode = MeasureSpec.getMode(widthMeasureSpec);
switch (widthMode) {
case MeasureSpec.EXACTLY:
case MeasureSpec.AT_MOST:
final int minWidth = (int) Math.ceil(IMPL.getMinWidth(mCardViewDelegate));
widthMeasureSpec = MeasureSpec.makeMeasureSpec(Math.max(minWidth,
MeasureSpec.getSize(widthMeasureSpec)), widthMode);
break;
case MeasureSpec.UNSPECIFIED:
// Do nothing
break;
}
final int heightMode = MeasureSpec.getMode(heightMeasureSpec);
switch (heightMode) {
case MeasureSpec.EXACTLY:
case MeasureSpec.AT_MOST:
final int minHeight = (int) Math.ceil(IMPL.getMinHeight(mCardViewDelegate));
heightMeasureSpec = MeasureSpec.makeMeasureSpec(Math.max(minHeight,
MeasureSpec.getSize(heightMeasureSpec)), heightMode);
break;
case MeasureSpec.UNSPECIFIED:
// Do nothing
break;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
} else {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}
public void setMaxCardElevation(float maxElevation) {
IMPL.setMaxElevation(mCardViewDelegate, maxElevation);
}
public void setUseCompatPadding(boolean useCompatPadding) {
if (mCompatPadding != useCompatPadding) {
mCompatPadding = useCompatPadding;
IMPL.onCompatPaddingChanged(mCardViewDelegate);
}
}
}
1、API >= 21 的源码
默认cardview内部是不会填充内边距的，也就是他的内容区域是占满了cardview的全部区域的，由于圆角阴影就会导致内容区域在圆角重叠的位置无法显示，如果要显示全部内容，那么就需要手动去配置内部边距。
class CardViewApi21Impl implements CardViewImpl {
@Override
public void initialize(CardViewDelegate cardView, Context context,
ColorStateList backgroundColor, float radius, float elevation, float maxElevation) {
final RoundRectDrawable background = new RoundRectDrawable(backgroundColor, radius);
cardView.setCardBackground(background);
View view = cardView.getCardView();
view.setClipToOutline(true);
view.setElevation(elevation);
setMaxElevation(cardView, maxElevation);
}
@Override
public void setRadius(CardViewDelegate cardView, float radius) {
getCardBackground(cardView).setRadius(radius);
}
@Override
public void onCompatPaddingChanged(CardViewDelegate cardView) {
setMaxElevation(cardView, getMaxElevation(cardView));
}
@Override
public void setMaxElevation(CardViewDelegate cardView, float maxElevation) {
getCardBackground(cardView).setPadding(maxElevation,
cardView.getUseCompatPadding(), cardView.getPreventCornerOverlap());
updatePadding(cardView);
}
//.....
}
//RoundRectDrawable.java
class RoundRectDrawable extends Drawable {
//这个标记就是是否在cardView填充内部边距
private boolean mInsetForPadding = false;
void setPadding(float padding, boolean insetForPadding, boolean insetForRadius) {
if (padding == mPadding && mInsetForPadding == insetForPadding
&& mInsetForRadius == insetForRadius) {
return;
}
mPadding = padding;
mInsetForPadding = insetForPadding;
mInsetForRadius = insetForRadius;
updateBounds(null);
invalidateSelf();
}
void setRadius(float radius) {
if (radius == mRadius) {
return;
}
mRadius = radius;
updateBounds(null);
invalidateSelf();
}
private void updateBounds(Rect bounds) {
if (bounds == null) {
bounds = getBounds();
}
mBoundsF.set(bounds.left, bounds.top, bounds.right, bounds.bottom);
mBoundsI.set(bounds);
if (mInsetForPadding) {
float vInset = RoundRectDrawableWithShadow.calculateVerticalPadding(mPadding, mRadius, mInsetForRadius);
float hInset = RoundRectDrawableWithShadow.calculateHorizontalPadding(mPadding, mRadius, mInsetForRadius);
mBoundsI.inset((int) Math.ceil(hInset), (int) Math.ceil(vInset));
// to make sure they have same bounds.
mBoundsF.set(mBoundsI);
}
}
}
2、API < 21 的源码
CardViewBaseImpl
cardview的阴影部分是从cardview自己的尺寸向内压缩了阴影的区域，这样就有了内部边距
class CardViewBaseImpl implements CardViewImpl {
@SuppressWarnings("WeakerAccess") /* synthetic access */
final RectF mCornerRect = new RectF();
@Override
public void initStatic() {
// Draws a round rect using 7 draw operations. This is faster than using
// canvas.drawRoundRect before JBMR1 because API 11-16 used alpha mask textures to draw
// shapes.
RoundRectDrawableWithShadow.sRoundRectHelper =
new RoundRectDrawableWithShadow.RoundRectHelper() {
@Override
public void drawRoundRect(Canvas canvas, RectF bounds, float cornerRadius,
Paint paint) {
//下面的代码说明老版本的cardview的阴影是从cardview的尺寸向内压缩出来的
final float twoRadius = cornerRadius * 2;
final float innerWidth = bounds.width() - twoRadius - 1;
final float innerHeight = bounds.height() - twoRadius - 1;
if (cornerRadius >= 1f) {
// increment corner radius to account for half pixels.
float roundedCornerRadius = cornerRadius + .5f;
mCornerRect.set(-roundedCornerRadius, -roundedCornerRadius, roundedCornerRadius,
roundedCornerRadius);
int saved = canvas.save();
canvas.translate(bounds.left + roundedCornerRadius,
bounds.top + roundedCornerRadius);
canvas.drawArc(mCornerRect, 180, 90, true, paint);
canvas.translate(innerWidth, 0);
canvas.rotate(90);
canvas.drawArc(mCornerRect, 180, 90, true, paint);
canvas.translate(innerHeight, 0);
canvas.rotate(90);
canvas.drawArc(mCornerRect, 180, 90, true, paint);
canvas.translate(innerWidth, 0);
canvas.rotate(90);
canvas.drawArc(mCornerRect, 180, 90, true, paint);
canvas.restoreToCount(saved);
//draw top and bottom pieces
canvas.drawRect(bounds.left + roundedCornerRadius - 1f, bounds.top,
bounds.right - roundedCornerRadius + 1f,
bounds.top + roundedCornerRadius, paint);
canvas.drawRect(bounds.left + roundedCornerRadius - 1f,
bounds.bottom - roundedCornerRadius,
bounds.right - roundedCornerRadius + 1f, bounds.bottom, paint);
}
// center
canvas.drawRect(bounds.left, bounds.top + cornerRadius,
bounds.right, bounds.bottom - cornerRadius , paint);
}
};
}
}
总结
CardView继承自FrameLayout,再使用的时候如果内部子视图大于1，那么最好在内部嵌套其他的布局，否则会一直从cardview的左上角绘制，这样会导致视图重叠。
CardView的使用和源码都比较简单，核心点就是内部边距的在适配不同版本上需要注意：5.0 之前的版本会自动预留内边距，而5.0之后需要手动配置是否需要预留内边距，否则默认是不会预留内边距的。
技术点：自定义view的绘制流程、自定义widget的xml属性
网友评论