在 Android 中创建波形 UI答案

【问题标题】：Creating wave shape UI in Android在 Android 中创建波形 UI
【发布时间】：2023-03-05 11:35:01
【问题描述】：

我目前正在开发一个安卓应用程序，我想设计一个像图片一样的用户界面：而不是顶部的形状，我想显示具有以下形状的图像。我用于我的目的，并在本教程中使用 FrameLayout 来塑造图像： https://www.techrepublic.com/article/pro-tip-round-corners-on-an-android-imageview-with-this-hack/ 这是我的代码：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="#f5f5f5">
    <!-- A CardView that contains a TextView -->
    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:padding="6dp"
                android:src="@drawable/iranmall"/>

            <ImageView
                android:src="@drawable/homepage_header"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

        </FrameLayout>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/my_recycler_view"
            android:scrollbars="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

    </LinearLayout>

这是我的形状文件：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#00ffffff" />
    <padding
        android:bottom="6dp" />
    <stroke android:width="6dp" android:color="#ffffffff" />
    <corners
        android:radius="12dp" />
</shape>

它只是用于圆角，它不能正常工作。图像不适合形状，如果我重新缩放它，它不会填充形状并溢出它。现在我想创建一个图像视图，如图片中的标题形状。可能吗？我认为应该是。但如何？谢谢。

【问题讨论】：

我建议在图像视图中使用弯曲的背景。
您必须在草图、figma 或使用 Adobe XD 中创建该矢量图像，然后将所有创建的图层分组并导出为 SVG 并在 android studio 项目中用作矢量

标签： java android xml user-interface

【解决方案1】：

这是您的问题的解决方案。我已经测试了不同的屏幕尺寸，这工作正常。在这里，我使用约束布局来对齐 ui 组件。

这里是xml代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="match_parent"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/wave_image"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@drawable/ic_wave_4"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Wave Design"
        android:textAlignment="center"
        android:textAppearance="@style/TextAppearance.AppCompat.Headline"
        android:textColor="@android:color/background_light"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/wave_image" />

</android.support.constraint.ConstraintLayout>

这是上面代码的输出：我已经使用这个网站来下载 svg 文件。波浪设计。 getwaves.io

【讨论】：