如何使用MaterialCardView实现基础布局？代码问题排查

首先，你的核心问题出在RelativeLayout中按钮卡片没有设置任何定位约束，导致它默认会贴在布局的左上角（顶部），和你预期的布局结构脱节。另外还有几个小细节也会影响显示效果，我帮你逐一梳理：

你当前代码的主要问题 #

• 按钮卡片无定位规则：MaterialCardView没有添加RelativeLayout的定位属性（比如layout_above、layout_alignParentTop等），所以它会默认占据布局顶部，和底部的文本控件可能出现重叠或者布局混乱。
• 字体尺寸过小：10sp和6sp的文字在绝大多数设备上都难以辨认，不符合Android的字体设计规范，建议调整到14sp以上。
• LinearLayout缺少高度约束：内部的LinearLayout没有设置合理的高度属性，导致按钮卡片的高度只包裹内容，可能不符合你想要的填充效果。

修正后的代码示例 #

假设你想要的布局是：按钮卡片占据顶部到标题区域的空间，标题和登录文本固定在底部，可以这样修改：

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

    <!-- Main title -->
    <TextView
        android:id="@+id/MainTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="110dp"
        android:gravity="center"
        android:singleLine="true"
        android:text="Title"
        android:textSize="16sp" <!-- 调整为合理可读大小 -->
        android:textStyle="bold" />

    <!-- Login message -->
    <TextView
        android:id="@+id/LoginText" <!-- 添加id方便依赖定位 -->
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/MainTitle" <!-- 依赖标题定位，避免硬编码margin -->
        android:layout_marginBottom="20dp"
        android:gravity="center"
        android:singleLine="true"
        android:text="Login as"
        android:textSize="14sp" <!-- 调整为合理可读大小 -->
        android:textStyle="bold" />

    <!-- Buttons -->
    <com.google.android.material.card.MaterialCardView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/LoginText" <!-- 让卡片在登录文本上方，填充剩余空间 -->
        android:layout_margin="16dp" <!-- 添加margin避免贴边 -->
        app:cardCornerRadius="5dp"
        app:cardElevation="2dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" <!-- 让线性布局填充卡片高度 -->
            android:orientation="vertical"
            android:layout_margin="1dp"
            android:gravity="center"> <!-- 可选：让按钮居中显示 -->

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="button 1" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp" <!-- 按钮之间添加间距提升美观度 -->
                android:text="button 2" />
        </LinearLayout>
    </com.google.android.material.card.MaterialCardView>

</RelativeLayout>

关键修改点说明 #

1. 给按钮卡片添加layout_above="@id/LoginText"：让卡片固定在登录文本的上方，自动填充顶部到登录文本之间的空间，避免硬编码margin导致的适配问题。
2. 登录文本依赖标题定位：用layout_above="@id/MainTitle"替代硬编码的layout_marginBottom，让两个文本控件的相对位置更稳定，适配不同屏幕尺寸。
3. 调整字体大小：把文本尺寸改成14sp和16sp，符合Android的可读性要求。
4. 优化按钮区域布局：让内部LinearLayout填充卡片高度，可选添加gravity="center"让按钮居中，同时给按钮之间添加间距提升美观度。

如果你想要的是其他布局结构（比如按钮卡片在顶部，标题在底部），只需要调整RelativeLayout的定位属性即可——记住，RelativeLayout的核心是通过控件之间的依赖关系来确定位置，一定要给每个控件明确的定位规则，不然很容易出现布局错乱。

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