这个android ui元素叫什么？答案

【问题标题】：What is this android ui element called?这个android ui元素叫什么？
【发布时间】：2021-08-09 09:50:53
【问题描述】：

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

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

<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>

图片

点击第一项

点击第二个项目

点击第三项

【问题讨论】：

这只是一个简单的视图组，带有自定义可绘制对象和带有drawableEnd 的TextView，因为没有高程，所以不需要使用CardView。
你不需要在那里做太多嵌套......要么使用内部带有 TextViews 的单个垂直线性布局（使用 drawableEnd），要么使用 ConstraintLayout 并添加 Textviews（以及可选的 imageViews 作为好吧，如果您需要对图像进行更多控制）。如果需要，您可以使用 cardView，但 CardView 的唯一子项应该是 1 个 ConstraintLayout 或 1 个 LinearLayout...不需要/不需要其他 viewGroup。
你的困惑让我有点困惑（看看我做了什么？）。每个小部件/视图，无论它是什么，都可以是“可点击的”并具有您所称的“动画”（波纹）。 ViewGroup（ConstraintLayout、LinearLayout 等）只是“可以分组更多视图的视图”，但它们本身也是视图，因此，如果您愿意，也可以“点击” .话虽如此，如果您希望每个项目都是可点击的，则需要像通常那样为每个项目分配一个 Click Listener，而不管它们具有哪个级别的嵌套。这对你有意义吗？
我相信clickable 默认情况下也是如此，或者至少如果您分配了一个点击侦听器，则不需要添加它。可聚焦很好，特别是如果您正在处理辅助功能并希望“屏幕阅读器”能够聚焦项目（通过 TalkBack 阅读其contentDescription）。
将点击监听器（和前景）分配给您在那里的 ConstraintLayouts，而不是整个 cardView。

标签： android android-xml material-components-android

【解决方案1】：

你的边框“更厚”，因为我认为你有两个卡片视图。

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

里面的项目是/可以/应该是普通的 TextViews，其“可绘制末端”设置为显示三角形/箭头/插入符号（你可以命名）。

您可以将每个项目设为一个 ConstraintLayout，并拥有两个单独的小部件（一个 TextView 和一个 Image View），以实现更精细的控制。

更新

根据您的最终设计，我做了一些更改。

这是它在编辑器中的外观：

不使用unededCardView的关键是给替换布局（一个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>

随意调整。

然后，我将您的 Layout 修改为更“扁平化”。

因为您希望每个单独的项目都是可点击的并且有自己的“波纹边界”您可以将文本/图像包装在它们自己的 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”中的颜色/图标替换了你所有的本地内容）。

这里的层次结构是：

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>

看起来像：

我没有使用边距/填充/等。但你明白了。

从某种意义上说，这“更好”，因为您只有一堆平面视图。

老实说，TextView 图像（drawableEnd/Start/Top/Bottom）的可定制性远低于常规 ImageView，但如果您只需要一个图标，它就可以为您工作。

希望对你有帮助。

【讨论】：

这种方法是否可以点击卡片视图中的项目？例如“Meine Bestellung”和“Spar-Abo-Artikel”应该是可点击的
绝对有可能。为每个项目提供其“Id”并使用 Viewbinding（或 findViewById）获取它们的引用。
好的，我会尝试你的方法并发布代码
你说的动画是什么意思？涟漪效应？
使用android:foreground="?android:attr/selectableItemBackground" 在需要它的视图上实现。