android - 如何创建像这样的图像？

Question

我正在开发 android 新闻应用程序，如何在顶部的 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 Assets ，然后将其添加到图像的前景...

...(当然省略了所有属性)

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

现在看起来像这样: