时间戳

首页 > 解决方案 > 如何创建这样的图像？

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

问题描述

我正在开发android新闻应用程序，如何在顶部的imageview上制作如下imageview，应该有任何库或方法来实现它

图片

标签： androidimageview

解决方案

尝试 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" />

它看起来像这样：

样本

（原始维基百科图片来源）

尝试 2：使用自定义 SVG

我解雇了 Inkscape，并制作了一个快速三角形（我将其设为半透明以便您可以看到它）

墨景

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

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

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

它看起来像这样：

带有SVG

显然，您必须调整矢量资产以匹配您的设计和尺寸，但您明白了，无需引入库。

最后一张图片的三角形显然是半透明的，所以你可以看到它。考虑到这花了我 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>

现在看起来像这样：

更好的

推荐阅读