Question

我想在右下角看到一个CardView，如下图所示，但我不知道该怎么做。它就像一张折叠纸（没有动画）。我不知道是否应该制作自定义背景可绘制或如何管理角半径以获得所需结果。任何帮助将不胜感激，谢谢

Answer 1

此外，您可以通过编程方式创建这样的drawable：

public static final class FoldCornerCard extends Shape {

    private final float foldPart;
    private final Path cardPath = new Path();
    private final Path foldPath = new Path();
    private final Paint foldPaint;

    public FoldCornerCard(int foldColor, float foldPart) {
        if (foldPart <= 0 || foldPart >= 1) {
            throw new IllegalArgumentException("Fold part must be in (0,1)");
        }
        this.foldPart = foldPart;
        this.foldPaint = new Paint();
        foldPaint.setAntiAlias(true);
        foldPaint.setColor(foldColor);
    }

    @Override
    protected void onResize(float width, float height) {
        super.onResize(width, height);
        this.cardPath.reset();
        final float leftFold = width - width * foldPart;
        final float bottomFold = height * foldPart;

        cardPath.lineTo(leftFold, 0);
        cardPath.lineTo(width, bottomFold);
        cardPath.lineTo(width, height);
        cardPath.lineTo(0, height);
        cardPath.close();

        foldPath.reset();
        foldPath.moveTo(leftFold, 0);
        foldPath.lineTo(leftFold, bottomFold);
        foldPath.lineTo(width, bottomFold);
        foldPath.close();
    }

    @Override
    public void draw(Canvas canvas, Paint paint) {
        canvas.drawPath(cardPath, paint);
        canvas.drawPath(foldPath, foldPaint);
    }
}

用法示例：

final ShapeDrawable shapeDrawable = new ShapeDrawable(
    new FoldCornerCard(Color.GREEN, 0.1f));
shapeDrawable.getPaint().setColor(Color.WHITE);
shapeDrawable.setIntrinsicHeight(-1);
shapeDrawable.setIntrinsicWidth(-1);

您只需稍微修改我的代码片段即可添加圆角。

Answer 2

请看这里https://developer.android.com/studio/write/draw9patch.html 我认为这是使用自定义布局的正确方法。
你可以在xml上绘制它，或者使用9-patch png。
你也可以创建自己的类MyCardView并从CardView扩展，然后覆盖方法onDraw并按照你想要的方式绘制CardView，但这不是一个好主意。
我建议您使用9-patch image

Answer 3

您可以使用xml实现此目的：假设我们的xml形状称为shape.xml 在shape.xml中（必须在drawable文件夹中创建。.drawable/ shape.xml）。创建具有矩形形状的图层列表元素作为xml的背景：

 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!--Paper-Back-->
    <item
        android:bottom="30dp"
        android:left="18dp"
        android:right="1dp"
        android:top="0dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/paperBack"/>
            <corners
                android:bottomLeftRadius="10dp"
                android:bottomRightRadius="10dp"
                android:topLeftRadius="10dp"
                android:topRightRadius="78dp"/>

        </shape>
    </item>
    <!--Paper-Back End-->

<!--Fold-->
    <item
        android:bottom="650dp"
        android:top="0dp"
        android:left="300dp"
        android:right="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/paperFold"/>
            <corners
                android:bottomLeftRadius="0dp"
                android:bottomRightRadius="0dp"
                android:topLeftRadius="0dp"
                android:topRightRadius="100dp"
                />
        </shape>
    </item>

    <!--Fold End-->
</layer-list>

然后在您的colours.xml资源中：添加您的颜色：

color.xml

<color name="PaperBack">#A6F5F5F5</color>
<color name="paperFold">#A6DDDDDD</color>

为了获得最佳结果：必须充分考虑颜色的不透明度以及纸张背景和折叠色的颜色组合类型。

现在要在主要xml中应用纸张折叠形状。在main.xml中将shape.xml用作背景。

使用shape.xml作为背景

 android:background="@drawable/shape.xml"

main.xml

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/shape.xml"
    android:orientation="vertical"
    android:weightSum="4">
.....................

Android CardView - 如何折叠角

3 个答案: