这个 android ui 元素叫什么？

Question

目前，我正在尝试为我的应用程序创建一个 UI，并遇到了亚马逊 Android 应用程序的设计。我对以下内容非常感兴趣：

我现在的问题是：这个 UI 元素由什么组成？我会想到一个 Cardview 中有两个 CardView。这是我目前的做法：

<com.google.android.material.card.MaterialCardView
    android:id="@+id/cvAddress"
    android:layout_width="0dp"
    android:layout_height="100dp"
    app:strokeColor="@color/color_user_address_border"
    app:strokeWidth="1dp"
    app:cardCornerRadius="8dp"
    app:layout_constraintEnd_toStartOf="@+id/margin_right"
    app:layout_constraintStart_toStartOf="@+id/margin_left"
    app:layout_constraintTop_toTopOf="parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:strokeWidth="0dp"
            app:cardCornerRadius="0dp" />

        <com.google.android.material.card.MaterialCardView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:strokeWidth="0dp"
            app:cardCornerRadius="0dp" />

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

很接近，但我的边框粗了很多，看起来有点丑。

编辑：完成XML布局

   <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/cvAddress"
        android:layout_width="0dp"
        android:layout_height="152dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/rounded_background_address"
        app:layout_constraintEnd_toStartOf="@+id/margin_right"
        app:layout_constraintStart_toStartOf="@+id/margin_left"
        app:layout_constraintTop_toBottomOf="@+id/tvUserDataAddressHeadline">

        <TextView
            android:id="@+id/tvAddAddress"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:background="?attr/selectableItemBackground"
            android:clickable="true"
            android:focusable="true"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="Add new Address"
            android:textColor="@color/color_text_dark"
            android:textSize="16sp"
            app:drawableEndCompat="@drawable/ic_arrow_big"
            app:drawableTint="@color/color_text_dark"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <View
            android:id="@+id/view2"
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/color_divider"
            app:layout_constraintBottom_toBottomOf="@+id/tvAddAddress"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tvAddAddress" />

        <TextView
            android:id="@+id/tvShippingAddress"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:background="?attr/selectableItemBackground"
            android:clickable="true"
            android:focusable="true"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="Shipping Addresses"
            android:textColor="@color/color_text_dark"
            android:textSize="16sp"
            app:drawableEndCompat="@drawable/ic_arrow_big"
            app:drawableTint="@color/color_text_dark"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tvAddAddress" />

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:background="@color/color_divider"
            app:layout_constraintBottom_toBottomOf="@+id/tvShippingAddress"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tvShippingAddress" />

        <TextView
            android:id="@+id/tvBillingAddress"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:background="?attr/selectableItemBackground"
            android:clickable="true"
            android:focusable="true"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="Billing Addresses"
            android:textColor="@color/color_text_dark"
            android:textSize="16sp"
            app:drawableEndCompat="@drawable/ic_arrow_big"
            app:drawableTint="@color/color_text_dark"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/tvShippingAddress" />

    </androidx.constraintlayout.widget.ConstraintLayout>

图片

点击第一项

点击第二个项目

单击第三项

Answer 1

你的边框“粗得多”，因为我认为你在那里有两个卡片视图。

我会不会将内部项目设为 Cardview。您可以使用带有 CardView 或任何 ViewGroup 的圆形外部边框和带有圆角的背景。

are/could/should 中的项目是普通的 TextViews，其“可绘制端”设置为公开 triangle/arrow/caret（随便你说）。

您可以使每个项目成为一个 ConstraintLayout 并具有两个单独的小部件（一个 TextView 和一个 Image View）以进行更精细的控制。

更新

根据你的最终设计，我做了一些修改。

编辑器中的效果如下：

不使用不需要CardView的关键是给替换布局（ConstraintLayout）一个背景圆角。

为此，创建一个 Drawable（在 res/drawable 文件夹中），我将此示例称为“rounded_background.xml”。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <stroke android:width="1dp" android:color="@android:color/darker_gray" />

    <corners
        android:bottomLeftRadius="5dp"
        android:bottomRightRadius="5dp"
        android:topLeftRadius="5dp"
        android:topRightRadius="5dp" />

</shape>

随意调整。

然后，我将您的布局修改得更“扁平”一些。

因为您希望每个单独的项目都可以点击并拥有自己的“波纹边界”您可以将 Text/Images 包装在它们自己的 ConstraintLayout 中。

因此版本 1 看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/rounded_background">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayoutGroupAndRippleEffectOne"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:text="Meine Bestellungen"
            android:textSize="16sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:layout_marginEnd="16dp"
            android:contentDescription="@null"
            android:src="@android:drawable/ic_input_add"
            app:layout_constraintBottom_toBottomOf="@+id/textView"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/textView"
            app:tint="@android:color/darker_gray" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <View
        android:id="@+id/vBorderOne"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/constraintLayoutGroupAndRippleEffectOne" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayoutGroupAndRippleEffectTwo"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/vBorderOne">

        <TextView
            android:id="@+id/textViewTwo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:text="Spar-Abo-Artikel"
            android:textSize="16sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:layout_marginEnd="16dp"
            android:contentDescription="@null"
            android:src="@android:drawable/ic_input_add"
            app:layout_constraintBottom_toBottomOf="@+id/textViewTwo"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/textViewTwo"
            app:tint="@android:color/darker_gray" />

    </androidx.constraintlayout.widget.ConstraintLayout>

    <View
        android:id="@+id/vBorderTwo"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/constraintLayoutGroupAndRippleEffectTwo" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayoutGroupAndRippleEffectThree"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="?attr/selectableItemBackground"
        android:clickable="true"
        android:focusable="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/vBorderTwo">

        <TextView
            android:id="@+id/textViewThree"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:text="Adressen"
            android:textSize="16sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:layout_width="16dp"
            android:layout_height="16dp"
            android:layout_marginEnd="16dp"
            android:contentDescription="@null"
            android:src="@android:drawable/ic_input_add"
            app:layout_constraintBottom_toBottomOf="@+id/textViewThree"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@+id/textViewThree"
            app:tint="@android:color/darker_gray" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

（注意：我用“android”中的 colors/icons 替换了您所有的本地内容。

这里的层级是：

CL
 CL1
  TV + IV
 DIVIDER
 CL2
  TV + IV
 DIVIDER
 CL3
  TV + IV
CL

如果您不需要修改 ImageView（或为与实际文本视图不同的实际图像视图提供特殊点击...您可以进一步将其扁平化为类似

的内容

CL
  TV1
  DIVIDER
  TV2
  DIVIDER
  TV3
CL

更像是：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="@drawable/rounded_background">

    <TextView
        android:id="@+id/textViewOne"
        android:foreground="?attr/selectableItemBackground"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:text="Meine Bestellungen"
        android:textSize="16sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:drawableTint="@android:color/darker_gray"
        app:drawableEndCompat="@android:drawable/ic_input_add" />

    <View
        android:id="@+id/vBorderOne"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textViewOne" />

    <TextView
        android:id="@+id/textViewTwo"
        android:foreground="?attr/selectableItemBackground"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:text="Spar-Abo-Artikel"
        android:textSize="16sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/vBorderOne"
        app:drawableTint="@android:color/darker_gray"
        app:drawableEndCompat="@android:drawable/ic_input_add" />

    <View
        android:id="@+id/vBorderTwo"
        android:layout_width="0dp"
        android:layout_height="1dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/textViewTwo" />

    <TextView
        android:id="@+id/textViewThree"
        android:foreground="?attr/selectableItemBackground"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:text="Adressen"
        android:textSize="16sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/vBorderTwo"
        app:drawableTint="@android:color/darker_gray"
        app:drawableEndCompat="@android:drawable/ic_input_add" />

</androidx.constraintlayout.widget.ConstraintLayout>

看起来像：

我没玩margins/paddings/etc。但你明白了。

从只有一堆平面视图的意义上说，这是“更好”的。

老实说，TextView 图像 (drawableEnd/Start/Top/Bottom) 的可定制性比常规 ImageView 差很多，但如果您只需要一个图标，它可以为您工作。

希望对您有所帮助。

这个 android ui 元素叫什么？

What is this android ui element called?

android

android-xml

material-components-android

编辑：完成XML布局

图片

更新