ConstraintLayout父布局垂直居中无重叠及中线对齐实现咨询

核心调整思路 #

要实现需求同时避免旋转后重叠异常，需要做3处核心修改：

• 将外层ConstraintLayout的高度从wrap_content改为match_parent，确保可以基于整个屏幕高度做中线对齐
• 新增一条水平方向的50%位置基准线，作为Home按钮和Btn3按钮间隙的居中锚点
• 移除包裹按钮的LinearLayout，直接用ConstraintLayout约束单个按钮，避免嵌套布局导致的居中失效和挤压问题

关键实现步骤 #

1. 新增居中基准线
   在ConstraintLayout中添加如下中线参考线：

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/center_horizontal_line"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.5" />

2. 调整按钮约束
   删除原来的button_layout容器，将4个按钮直接放在ConstraintLayout下：

• Btn1的底部约束到Home按钮的顶部，间距保持32px
• Home按钮的底部约束到中线参考线，底部边距设为16px
• Btn3的顶部约束到中线参考线，顶部边距设为16px
• Admin按钮的顶部约束到Btn3的底部，间距保持32px
• 给所有按钮添加app:layout_constrainedWidth="true"和minHeight属性，防止旋转后挤压变形

3. 调整logo区域约束
   修改logo_layout的约束，避免和按钮区域重叠，同时添加app:layout_constrainedHeight="true"，高度不足时优先保证按钮区域显示不重叠。

完整修改后代码 #

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:background="#ff303030"
    tools:ignore="HardcodedText">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guide_logo_end"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.98" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/guide_logo_top"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.02" />
            
        <!-- 新增中线参考线 -->
        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/center_horizontal_line"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.5" />

        <LinearLayout
            android:id="@+id/logo_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:orientation="vertical"
            app:layout_constrainedHeight="true"
            app:layout_constraintEnd_toEndOf="@id/guide_logo_end"
            app:layout_constraintTop_toTopOf="@id/guide_logo_top"
            app:layout_constraintBottom_toTopOf="@id/enable_disable_btn1"
            app:layout_constraintBottom_margin="16dp">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/logo_small" />

            <TextView
                android:id="@+id/version_header"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="20px"
                android:text="virtual console"
                android:textColor="#ffffff"
                android:textSize="34px" />

            <TextView
                android:id="@+id/version_number"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginTop="10px"
                android:textColor="#909090"
                android:textSize="28px"
                tools:text="x.x.xx.xxxx" />

        </LinearLayout>

        <!-- 按钮直接约束，移除LinearLayout包裹 -->
        <Button
            android:id="@+id/enable_disable_btn1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:minHeight="48dp"
            android:background="@drawable/full_day_selector"
            android:gravity="center"
            android:text="Btn1"
            android:textSize="50sp"
            app:layout_constrainedHeight="true"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toTopOf="@id/demo_home"
            app:layout_constraintBottom_margin="32px"/>

        <Button
            android:id="@+id/demo_home"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:minHeight="48dp"
            android:background="@drawable/full_day_selector"
            android:gravity="center"
            android:text="Home"
            android:textSize="50sp"
            app:layout_constrainedHeight="true"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toTopOf="@id/center_horizontal_line"
            app:layout_constraintBottom_margin="16px"/>

        <Button
            android:id="@+id/demo_btn3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:minHeight="48dp"
            android:background="@drawable/full_day_selector"
            android:gravity="center"
            android:text="Btn3"
            android:textSize="50sp"
            app:layout_constrainedHeight="true"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/center_horizontal_line"
            app:layout_constraintTop_margin="16px"/>

        <Button
            android:id="@+id/demo_admin"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:minHeight="48dp"
            android:background="@drawable/full_day_selector"
            android:gravity="center"
            android:text="Admin"
            android:textSize="50sp"
            app:layout_constrainedHeight="true"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/demo_btn3"
            app:layout_constraintTop_margin="32px"/>

    </androidx.constraintlayout.widget.ConstraintLayout>
</RelativeLayout>

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