Android Studio 3.1.2：设计界面与设备运行效果不符及布局切换求助

一、先搞定ConstraintLayout的显示问题 #

兄弟，你这个情况100%是没给按钮加正确的约束！ConstraintLayout的核心就是「约束关系」，如果控件没有设置足够的水平/垂直约束，它就会默认跑到左上角，而且两个按钮如果没设置相互的位置约束，会直接重叠在一起，所以你只看到了第二个（它盖在第一个上面了）。

给你一个能正常显示的示例代码，直接替换你的xml就行：

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

    <!-- 第一个按钮：屏幕水平居中，垂直方向居中偏上 -->
    <Button
        android:id="@+id/btn_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一个按钮"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@+id/btn_second"
        app:layout_constraintVertical_bias="0.4"/> <!-- 调整垂直位置的偏移，0.5就是正中间 -->

    <!-- 第二个按钮：水平居中，在第一个按钮的下方，和第一个按钮保持间距 -->
    <Button
        android:id="@+id/btn_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二个按钮"
        android:layout_marginTop="16dp" <!-- 和上方按钮的间距 -->
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btn_first"/>

</androidx.constraintlayout.widget.ConstraintLayout>

关键知识点：

• 每个控件至少要设置水平方向的左右约束（比如和父布局左右对齐）、垂直方向的上下约束（比如和父布局/其他控件关联）
• 用app:layout_constraintTop_toBottomOf来让第二个按钮贴在第一个按钮的下方
• android:layout_marginTop用来控制两个按钮之间的间距

二、切换到RelativeLayout的方法 #

如果你暂时觉得ConstraintLayout有点复杂，想换成RelativeLayout也很简单，步骤如下：

1. 把根布局的标签从androidx.constraintlayout.widget.ConstraintLayout改成RelativeLayout
2. 去掉所有app:layout_constraintXXX的属性，换成RelativeLayout专属的布局属性

直接给你写好的RelativeLayout示例代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 第一个按钮：屏幕水平居中，垂直方向居中偏上 -->
    <Button
        android:id="@+id/btn_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第一个按钮"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/btn_second"
        android:layout_marginBottom="16dp"/>

    <!-- 第二个按钮：屏幕水平+垂直居中 -->
    <Button
        android:id="@+id/btn_second"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="第二个按钮"
        android:layout_centerInParent="true"/>

</RelativeLayout>

RelativeLayout常用属性说明：

• android:layout_centerInParent：让控件在父布局正中央
• android:layout_centerHorizontal="true"：水平方向居中
• android:layout_above="@id/xxx"：放在指定控件的上方
• android:layout_below="@id/xxx"：放在指定控件的下方

如果还有不清楚的地方，随时问哈！

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