使用ConstraintLayout绘制的按钮为何与自定义键盘视图重叠？

核心问题原因 #

• 按钮布局存在冗余嵌套，父布局高度小于子按钮高度，导致内容溢出
• 根布局中按钮容器与键盘容器未添加正确的垂直约束，且键盘容器设置了match_parent高度直接占满全屏，必然覆盖上层控件
• 键盘容器内部的4个LinearLayout全部设置match_parent高度，垂直排布下也会出现内部重叠问题

无需替换ConstraintLayout，按以下步骤修改即可 #

1. 优化按钮布局，删除冗余嵌套，调整父布局高度 #

原代码嵌套了两层相同作用的ConstraintLayout，且父布局固定30dp高度小于子按钮的50dp高度，修改后代码如下：

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/functional_buttons"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <Button
        android:id="@+id/connect"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="connect"
        android:minHeight="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/send"/>

    <Button
        android:id="@+id/send"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="send"
        android:minHeight="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/receive"
        app:layout_constraintLeft_toRightOf="@+id/connect" />

    <Button
        android:id="@+id/receive"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="receive"
        android:minHeight="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/send" />

</androidx.constraintlayout.widget.ConstraintLayout>

2. 修正根布局的约束关系 #

假设你的根布局是ConstraintLayout，给按钮容器和键盘容器添加垂直方向的约束，键盘高度改为0dp（即match_constraint）占满按钮下方的剩余空间，参考代码如下：

<!-- 根ConstraintLayout代码示例 -->
<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">

    <!-- 上面修改后的按钮容器 -->
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/functional_buttons"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <!-- 三个按钮的代码 -->

    </androidx.constraintlayout.widget.ConstraintLayout>

    <!-- 键盘容器，添加约束在按钮下方，高度设为0dp占满剩余空间 -->
    <com.example.magickeyboard.View.MyKeyboardContainer
        android:id="@+id/keyboard_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="vertical"
        app:layout_constraintTop_toBottomOf="@+id/functional_buttons"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent">

        <!-- 内部LinearLayout代码 -->

    </com.example.magickeyboard.View.MyKeyboardContainer>

</androidx.constraintlayout.widget.ConstraintLayout>

3. 修正键盘容器内部的LinearLayout高度 #

你当前内部四个LinearLayout都设了match_parent高度，垂直排布下会全部重叠，要实现四个行平分键盘高度，修改为如下代码：

<com.example.magickeyboard.View.MyKeyboardContainer
    android:id="@+id/keyboard_container"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:orientation="vertical"
    app:layout_constraintTop_toBottomOf="@+id/functional_buttons"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent">

    <LinearLayout
        android:id="@+id/linear_container_1"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal" />

    <LinearLayout
        android:id="@+id/linear_container_2"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"/>

    <LinearLayout
        android:id="@+id/linear_container_3"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"/>

    <LinearLayout
        android:id="@+id/linear_container_4"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"/>

</com.example.magickeyboard.View.MyKeyboardContainer>

修改完成后即可实现按钮在顶部、键盘占满下方剩余空间的效果，不会出现重叠问题。

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