UI 怎么设计成这样？

Question

我在FIGMA中设计了一个UI，如下图

当我在 android 工作室尝试同样的方法时，它看起来不太好。下面是我使用的代码

<LinearLayout
        android:id="@+id/dark"
        android:layout_width="364dp"
        android:layout_height="46dp"
        android:layout_marginTop="36dp"
        android:background="@drawable/bg_layout"
        android:elevation="8dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/toolbar">

        <ImageView
            android:layout_width="32dp"
            android:layout_height="32dp"
            android:src="@drawable/night"
            android:layout_gravity="center_vertical"/>

    </LinearLayout>

UI 看起来像这样

如何实现我使用 Figma 创建的设计？提前谢谢你。

Answer 1

有多种方法可以在 Android 中创建此类 UI。

您可以创建圆形可绘制对象并将该可绘制对象放置在图像背景中。
您可以在 Figma 中将文本框分组，然后导出相同的 UI 并在 android 中使用。（你需要创建两个 UI (enable/disable).

希望你明白我想说的。

谢谢。

Answer 2

为了实现设计，material 卡片视图为您提供了大部分功能。

海拔：app:cardElevation="dp"
大纲：app:strokeWidth="dp"指定宽度
轮廓颜色：app:strokeColor="@color/"指定颜色
圆角半径：app:cardCornerRadius="dp"指定半径.

喜欢：

<com.google.android.material.card.MaterialCardView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="@dimen/corner_radius_8dp"
    app:cardElevation="@dimen/elevation_4dp"
    app:cardUseCompatPadding="true"
    app:strokeColor="?attr/colorPrimary"
    app:strokeWidth="@dimen/stroke_width">

    <!--Content goes here-->

</com.google.android.material.card.MaterialCardView>

UI 怎么设计成这样？

How can I design UI like this?

java

android

xml

user-interface