Android ConstraintLayout布局设计视图正常但手机端内容显示异常

问题原因 #

1. 约束逻辑依赖固定数值，适配性极差
   你当前所有组件的定位都依赖固定的layout_marginBottom数值，同时给多数文字类组件设置了固定宽高。Android Studio设计视图的预览设备尺寸是固定的，和你实机的屏幕尺寸、像素密度、显示比例不一致，固定数值在实机上会直接导致组件位置偏移、超出屏幕边界，自然无法展示完整内容。
2. 根布局不支持滚动
   你给ConstraintLayout设置了android:scrollbars="vertical"属性，但ConstraintLayout本身不支持滚动，该属性仅对ScrollView等可滚动容器生效，内容超出屏幕高度时无法上下滑动查看，进一步导致内容显示不全。
3. 样式配置不统一
   部分TextView单独设置了textAppearance属性，其余文字组件未做统一配置，再加上实机运行的主题和设计视图预览的主题可能存在差异，就会出现文字样式和设计效果不一致的问题；固定宽高的文字组件也会因为系统字体大小调整、文字长度适配问题出现截断、变形。

解决方案 #

• 更换可滚动根容器：将根布局替换为NestedScrollView包裹ConstraintLayout，ConstraintLayout的layout_height设置为wrap_content，保证内容超出屏幕时可滚动查看完整内容。
• 改为相对约束定位：删除所有固定的layout_marginBottom定位逻辑，改用组件之间的相对约束实现布局，比如输入框和对应标签对齐、下一组组件约束在上一组组件的下方，保证所有设备上组件的相对位置一致。
• 优化组件尺寸配置：文字类组件（TextView、EditText、Button）不要设置固定宽高，宽度用0dp（即match_constraint）配合约束实现自适应，高度统一用wrap_content，避免文字被截断。
• 统一文字样式：在styles.xml中自定义全局统一的文字样式，所有文字组件都引用该样式，同时确认Android Studio预览时选择的主题和Activity绑定的主题完全一致，避免主题差异导致的样式错乱。
• 适配多尺寸屏幕：可以使用Guideline做百分比定位，不同屏幕尺寸的边距统一放在dimens.xml中配置，进一步提升多设备适配效果。

优化后的布局示例片段 #

<?xml version="1.0" encoding="utf-8"?>
<androidx.core.widget.NestedScrollView
    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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/siba"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingVertical="16dp">

        <!-- 顶部logo区域 -->
        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="113dp"
            android:layout_height="74dp"
            android:src="@drawable/ic_launcher"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <!-- 语言选择区域 -->
        <TextView
            android:id="@+id/textView12"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Languages"
            android:textColor="@color/black"
            android:layout_marginEnd="12dp"
            app:layout_constraintBottom_toBottomOf="@id/imageView3"
            app:layout_constraintEnd_toStartOf="@+id/spinner"
            app:layout_constraintTop_toTopOf="@id/imageView3" />

        <Spinner
            android:id="@+id/spinner"
            android:layout_width="45dp"
            android:layout_height="45dp"
            android:spinnerMode="dropdown"
            android:layout_marginEnd="24dp"
            app:layout_constraintBottom_toBottomOf="@id/imageView3"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="@id/imageView3" />

        <!-- BMI标题 -->
        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/bmi"
            android:layout_marginTop="24dp"
            android:layout_marginEnd="24dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toBottomOf="@id/imageView3" />

        <!-- 体重输入组 -->
        <TextView
            android:id="@+id/text1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/ibiro"
            android:textColor="@color/black"
            android:layout_marginStart="32dp"
            android:layout_marginTop="32dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/textView3" />

        <EditText
            android:id="@+id/editTextNumber3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:ems="10"
            android:hint="@string/kgs"
            android:importantForAutofill="no"
            android:inputType="number|text"
            android:layout_marginHorizontal="32dp"
            app:layout_constraintBottom_toBottomOf="@id/text1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/text1"
            app:layout_constraintTop_toTopOf="@id/text1" />
        
        <!-- 其余组件按照相同的相对约束逻辑依次编写即可 -->

    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.core.widget.NestedScrollView>

内容的提问来源于stack exchange，提问作者MUGWANEZA MANZI Audace