如何创建像这样的图像？

Question

我正在开发android news应用，如何在顶部的imageview上使如下所示的imageview，并且应该有任何库或方法来实现

Answer 1

尝试1：使用简单的Shape可绘制对象：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <rotate
                android:fromDegrees="10"
                android:toDegrees="0"
                android:pivotX="-230%"
                android:pivotY="14%" >
            <shape
                    android:shape="rectangle" >
                <stroke android:color="@android:color/transparent"
                        android:width="1dp"/>
                <solid
                        android:color="@android:color/white" />
            </shape>
        </rotate>
    </item>
</layer-list>

（这花了我5分钟，所以也许有更好的方法来制作这种形状）。

这是布局，请注意上面的foreground属性指向我的“形状”。

<ImageView
            android:id="@+id/imageView"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:foreground="@drawable/my_shape"
            android:scaleType="centerCrop"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:srcCompat="@drawable/xxx" />

它看起来像这样：

（Original Wikipedia image source）

尝试2：使用自定义SVG

我发射了Inkscape，并制作了一个快速三角形（我将其保留为半透明状态，以便您可以看到它）

将其作为称为ic_bad_triangle的Vector资产导入，然后将其添加到图像的前景...

...（当然省略了所有属性）

    <ImageView
            ...
            android:foreground="@drawable/ic_bad_triangle" />

它看起来像这样：

很显然，您必须调整向量资产以匹配您的设计和尺寸，但是您有了主意，无需引入库。

最后一个图像的三角形在那里显然是半透明的，因此您可以看到它。考虑到这花了我25分钟，我希望它能使您朝正确的方向前进。

更新：我抛光了三角形：

<vector android:height="35.357143dp" android:viewportHeight="297"
    android:viewportWidth="210" android:width="25dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#ffffff"
        android:pathData="M-0.084,298.008H216.193L-0.421,258.091Z"
        android:strokeAlpha="1" android:strokeColor="#ffffff"
        android:strokeLineCap="butt" android:strokeLineJoin="miter" android:strokeWidth="0.64384729"/>
</vector>

现在看起来像这样：