Android - 在 xml/vector 中制作信封形状背景
Android - Make an envelope shape background in xml/vector
我正在尝试做一个像 xml:
中的这个形状
这是一个简单的矩形，在顶部中心有一个纯色和一个透明的小三角形，从内侧 .
这可以用向量来实现吗？
试试这个
<?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>
输出
您可以使用 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>
一般来说，为您的 Android 项目寻找图标时，一个好的起点是 Material 设计网站的 icons section。
特别是，对于您正在寻找的图标，您可以尝试找到非常相似的东西，最坏的情况下您可以调整它并稍微调整一下。
勾选mail图标，是一个绘制的非常精美的信封：https://material.io/tools/icons/?icon=mail&style=baseline
Select Android 从选项中，然后按 SVG Button 获取您的矢量资产。
要添加不同的颜色，您可以直接在 xml:
上对矢量应用色调
android:tint="@color/your_color"
在最新的 Android Studio IDE 中使用 Vector Asset Studio 并使用本地文件
Vector Asset Studio 将矢量图形作为描述图像的 XML 文件添加到项目中。维护一个 XML 文件比更新多个不同分辨率的光栅图形更容易。
https://developer.android.com/studio/write/vector-asset-studio#svg
使用 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:
中的这个形状这是一个简单的矩形，在顶部中心有一个纯色和一个透明的小三角形，从内侧 .
这可以用向量来实现吗？
试试这个
<?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>
输出
您可以使用 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>
一般来说，为您的 Android 项目寻找图标时，一个好的起点是 Material 设计网站的 icons section。
特别是，对于您正在寻找的图标，您可以尝试找到非常相似的东西，最坏的情况下您可以调整它并稍微调整一下。
勾选mail图标，是一个绘制的非常精美的信封：https://material.io/tools/icons/?icon=mail&style=baseline
Select Android 从选项中，然后按 SVG Button 获取您的矢量资产。
要添加不同的颜色，您可以直接在 xml:
上对矢量应用色调android:tint="@color/your_color"
在最新的 Android Studio IDE 中使用 Vector Asset Studio 并使用本地文件
Vector Asset Studio 将矢量图形作为描述图像的 XML 文件添加到项目中。维护一个 XML 文件比更新多个不同分辨率的光栅图形更容易。
https://developer.android.com/studio/write/vector-asset-studio#svg
使用 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>
结果