Android CardView - 如何折叠角落

Question

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

Answer 1

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

Answer 2

您也可以像这样以编程方式创建这样的可绘制对象：

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);

你只需要稍微修改一下我的 sn-p 就可以添加圆角了。

Answer 3

您可以使用您的 xml 实现此目的： 让我们假设我们的 xml 形状被称为 shape.xml 在 shape.xml（你必须在你的可绘制文件夹中创建..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"

ma​​in.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">
.....................