Android - 在 xml/vector 中制作信封形状背景答案

【问题标题】：Android - Make an envelope shape background in xml/vectorAndroid - 在 xml/vector 中制作信封形状背景
【发布时间】：2019-05-30 10:50:37
【问题描述】：

我正在尝试在 xml 中制作一个形状：

它是一个简单的矩形，从内侧开始，在顶部中心有一个纯色和一个小的透明三角形。

这可以使用向量来实现吗？

【问题讨论】：

是的，您可以使用矢量来实现。
@MayurPatel 你有例子吗？
更新了答案。让我知道这是否有效！

标签： android xml android-drawable android-vectordrawable android-shape

【解决方案1】：

试试这个

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="150dp"
    android:viewportWidth="400"
    android:viewportHeight="230">
    <path
        android:fillColor="#24b44c"
        android:fillType="evenOdd"
        android:strokeWidth="1"
        android:pathData="M50.964 49.856 C 50.870 54.145,50.871 86.953,50.965 122.761 L 51.136 187.868 198.416 187.868 L 345.696 187.868 345.730 154.882 C 345.749 136.739,345.800 118.931,345.844 115.309 C 345.888 111.687,345.857 93.720,345.775 75.382 L 345.626 42.041 282.161 42.107 L 218.696 42.172 215.844 45.176 C 211.458 49.794,198.283 62.854,198.009 62.854 C 197.876 62.854,193.061 58.174,187.311 52.455 L 176.856 42.057 113.995 42.057 L 51.134 42.057 50.964 49.856" />
    <path
        android:fillColor="#74cc8c"
        android:fillType="evenOdd"
        android:strokeWidth="1"
        android:pathData="M50.923 48.296 C 50.923 49.630,50.961 50.176,51.008 49.509 C 51.055 48.842,51.055 47.750,51.008 47.083 C 50.961 46.415,50.923 46.961,50.923 48.296 M345.805 64.125 C 345.805 72.132,345.834 75.374,345.869 71.329 C 345.905 67.285,345.905 60.734,345.869 56.771 C 345.834 52.809,345.805 56.118,345.805 64.125 M345.750 79.723 C 345.750 80.168,345.797 80.350,345.855 80.127 C 345.914 79.905,345.914 79.541,345.855 79.318 C 345.797 79.096,345.750 79.278,345.750 79.723 M124.745 188.042 C 165.330 188.074,231.673 188.074,272.174 188.042 C 312.675 188.009,279.469 187.983,198.382 187.983 C 117.296 187.983,84.159 188.009,124.745 188.042" />
    <path
        android:fillColor="#9cdcac"
        android:fillType="evenOdd"
        android:strokeWidth="1"
        android:pathData="M50.912 44.598 C 50.912 45.425,50.954 45.763,51.005 45.350 C 51.056 44.936,51.056 44.261,51.005 43.847 C 50.954 43.434,50.912 43.772,50.912 44.598 M345.787 46.678 C 345.787 48.394,345.823 49.096,345.867 48.238 C 345.912 47.380,345.912 45.976,345.867 45.118 C 345.823 44.261,345.787 44.962,345.787 46.678" />
    <path
        android:fillColor="#b0e4c0"
        android:fillType="evenOdd"
        android:strokeWidth="1"
        android:pathData="M345.750 42.981 C 345.750 43.426,345.797 43.608,345.855 43.385 C 345.914 43.163,345.914 42.799,345.855 42.577 C 345.797 42.354,345.750 42.536,345.750 42.981 M202.531 58.521 L 201.618 59.503 202.600 58.590 C 203.513 57.740,203.688 57.539,203.513 57.539 C 203.475 57.539,203.033 57.981,202.531 58.521 M193.876 59.041 C 194.308 59.486,194.712 59.850,194.776 59.850 C 194.839 59.850,194.539 59.486,194.107 59.041 C 193.676 58.596,193.272 58.232,193.208 58.232 C 193.144 58.232,193.445 58.596,193.876 59.041" />
</vector>

输出

【讨论】：

解决方案如何在 xml 中使用 layer-list 和 item 元素？

【解决方案2】：

这有点像使用ConstraintLayout 和矢量可绘制对象，但它确实有效！它将扩展以填充其容器的宽度。

dimens.xml

<dimen name="toolbar_height">200dp</dimen>
<dimen name="toolbar_notch_width">100dp</dimen>

notch.xml

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="12dp"
    android:viewportWidth="24"
    android:viewportHeight="12">

    <path
        android:fillColor="#000000"
        android:pathData="m0 0 12 12 12 -12 v12 h-24 v-12 z"/>

</vector>

toolbar.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:layout_width="match_parent"
    android:layout_height="@dimen/toolbar_height"
    tools:layout_gravity="bottom">

    <View
        android:id="@+id/left"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="#F44336"
        app:layout_constraintEnd_toStartOf="@id/notch"
        app:layout_constraintStart_toStartOf="parent"/>

    <View
        android:id="@+id/notch"
        android:layout_width="@dimen/toolbar_notch_width"
        android:layout_height="0dp"
        android:background="@drawable/notch"
        android:backgroundTint="#4CAF50"
        app:layout_constraintDimensionRatio="1:0.5"
        app:layout_constraintEnd_toStartOf="@id/right"
        app:layout_constraintStart_toEndOf="@id/left"
        app:layout_constraintTop_toTopOf="parent"/>

    <View
        android:id="@+id/center"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FFEB3B"
        app:layout_constraintTop_toBottomOf="@id/notch"
        app:layout_constraintStart_toStartOf="@id/notch"
        app:layout_constraintEnd_toEndOf="@id/notch"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <View
        android:id="@+id/right"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="#3F51B5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/notch"/>

</androidx.constraintlayout.widget.ConstraintLayout>

结果

【讨论】：

解决方案如何在 xml 中使用`layer-list` 和item 元素？
您可以像这样引用layer-list 中的可绘制资源：<item android:drawable="@drawable/envelope"/>。希望对您有所帮助。
我的意思是，根本不使用向量。有可能吗？
哦，我明白了，你的意思是把信封的每个部分都画成一个` 来得到完整的信封？我认为这是不可能的，除非您可以以某种方式旋转矩形以使该切口位于中心。或者，我想您可以使用三角形来获得该形状。我不确定，这可能是可能的，但您可能仍需要使用其他可绘制对象。我个人会坚持使用矢量可绘制对象。正如其他人指出的那样，shapeShifter 似乎是一个不错的工具，我一直想尝试一下。
是的，但问题是，如果我想将其用作与设备宽度相匹配的视图的背景，则无法正常升级...

【解决方案3】：

您可以使用shapeShifter 绘制它，甚至可以为您的矢量添加一些动画。

试试这个：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
  <path
      android:pathData="M0.871,16L0.871,6L9.065,6L11.968,8.977L15.194,6L23.194,6L23.194,16Z"
      android:strokeWidth="1"
      android:fillColor="#6fb054"
      android:strokeColor="#6fb054"/>
</vector>

【讨论】：

【解决方案4】：

一般来说，为您的 Android 项目寻找图标的一个很好的起点是 Material Design 网站的 icons section。特别是，对于您正在寻找的图标，您可以尝试找到非常相似的东西，最坏的情况是您可以对其进行调整和调整。检查mail图标，是一个非常精美的信封：https://material.io/tools/icons/?icon=mail&style=baseline

从选项中选择Android，然后按SVG Button获取您的矢量资产。

要添加不同的颜色，您可以直接在 xml 上对矢量应用颜色：

android:tint="@color/your_color"

【讨论】：

【解决方案5】：

使用最新Android Studio IDE中的Vector Asset Studio并使用本地文件

Vector Asset Studio 将矢量图形作为描述图像的 XML 文件添加到项目中。维护一个 XML 文件比更新多个不同分辨率的光栅图形更容易。

https://developer.android.com/studio/write/vector-asset-studio#svg

【讨论】：