Android UI 高效实现带Button和TextView的居中圆角矩形布局

你用ConstraintLayout搭配CardView的思路是可行的，补充以下细节优化即可，不需要额外调整整体结构：

• 优先使用MaterialCardView替代原生CardView，可直接配置圆角、阴影参数，无需额外自定义背景drawable
• 蓝色矩形区域和其上方元素的布局逻辑，按以下两种场景选择实现方式即可：
  • 如果蓝色区域不需要做点击、动画等交互，直接给外层ConstraintLayout设置layer-list类型的自定义背景，把蓝色条作为背景的一部分，布局层级最少
  • 如果蓝色区域需要响应交互，直接把蓝色区域作为单独View放在布局最底层，顶部约束到父布局顶部，其上方的其他元素直接约束在该View的顶部即可
• CardView内部的TextView、Button直接按设计稿约束位置即可，记得给CardView设置合适的内边距避免内容贴边，按钮可以添加app:layout_constrainedWidth="true"属性避免文本过长超出布局边界

核心布局代码示例 #

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginHorizontal="16dp">

    <!-- 蓝色顶部条 -->
    <View
        android:id="@+id/blue_bar"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:background="@color/design_default_color_primary"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 蓝色矩形上方的其他元素 -->
    <TextView
        android:id="@+id/top_element"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/white"
        android:text="上方其他内容"
        app:layout_constraintBottom_toTopOf="@id/card"
        app:layout_constraintStart_toStartOf="@id/blue_bar"
        app:layout_constraintTop_toTopOf="@id/blue_bar" />

    <com.google.android.material.card.MaterialCardView
        android:id="@+id/card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="12dp"
        app:cardElevation="4dp"
        app:layout_constraintTop_toBottomOf="@id/top_element"
        app:layout_constraintTop_margin="12dp">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:padding="16dp">

            <TextView
                android:id="@+id/content_tv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:text="卡片内展示的文本内容"
                app:layout_constraintEnd_toStartOf="@id/action_btn"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <Button
                android:id="@+id/action_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="操作按钮"
                app:layout_constrainedWidth="true"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

        </androidx.constraintlayout.widget.ConstraintLayout>
    </com.google.android.material.card.MaterialCardView>

</androidx.constraintlayout.widget.ConstraintLayout>

内容的提问来源于stack exchange，提问作者Ramesh Pasupuleti