如何在横屏模式下实现如下所示的布局对齐？

嘿，我懂你现在的处境——横屏模式下想让「添加新任务」区域和任务列表并排展示，但目前你的代码里它乖乖待在列表下方，完全不是你想要的样子。别慌，咱们用ConstraintLayout的约束就能轻松搞定这个布局问题！

问题根源 #

你当前的布局约束应该是把「添加新任务」区域的顶部和任务列表的底部做了绑定，导致不管屏幕方向如何，它都会跟在列表下方。要实现横屏并排，咱们需要调整两个区域的横向约束，让它们在水平方向上相邻排列。

修改后的完整布局代码 #

下面是调整后的ConstraintLayout示例，假设你的任务列表是RecyclerView，添加区域是一个包含输入框和按钮的容器：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    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">

    <!-- 任务列表区域：占横屏宽度的60% -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/taskList"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintWidth_percent="0.6"
        tools:listitem="@layout/item_task"/>

    <!-- 添加新任务区域：占横屏宽度的40%，紧挨着任务列表右侧 -->
    <LinearLayout
        android:id="@+id/addTaskContainer"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:padding="16dp"
        android:background="#f5f5f5"
        app:layout_constraintStart_toEndOf="@id/taskList"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintWidth_percent="0.4">

        <!-- 这里替换成你实际的添加任务UI元素 -->
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="输入新任务内容"
            android:padding="12dp"/>

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="添加任务"
            android:layout_gravity="end"
            android:layout_marginTop="12dp"
            android:paddingHorizontal="24dp"/>
    </LinearLayout>

</android.support.constraint.ConstraintLayout>

关键调整点 #

• 两个区域都设置android:layout_width="0dp"，配合app:layout_constraintWidth_percent属性按比例分配横屏宽度（你可以根据需求调整百分比数值）
• 任务列表的app:layout_constraintStart_toStartOf="parent"让它从屏幕左侧开始，添加区域的app:layout_constraintStart_toEndOf="@id/taskList"让它紧挨着任务列表的右侧
• 两个区域都设置app:layout_constraintTop_toTopOf="parent"和app:layout_constraintBottom_toBottomOf="parent"，保证它们的高度充满整个屏幕

兼容竖屏布局（可选） #

如果你想让竖屏时回到原来的上下布局，可以创建res/layout-land/目录，把上面的并排布局代码放在这个目录下的布局文件里；原来的res/layout/目录保留你最初的上下布局代码。这样系统会自动根据屏幕方向加载对应的布局，完美适配横竖屏！

这样调整后，横屏模式下就能实现你想要的并排效果啦！如果还有细节需要微调，比如间距、背景色或者比例，直接修改对应的属性参数就行~

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