DialogFragment中ConstraintLayout适配窗口尺寸问题求助

我明白你遇到的问题——用ConstraintLayout做的筛选对话框在预览里显示正常，可一设置窗口宽度为屏幕的75%就乱了，而且还要考虑后续添加更多元素，得让布局能自适应窗口尺寸对吧？

先说说为啥会乱：你的布局里用了不少固定dp值的margin（比如checkbox_title的100dp左margin），还有固定高度的guideline，当窗口宽度突然变窄，这些固定值就会和百分比约束（比如中间的垂直guideline）冲突，导致元素挤压、错位。要解决这个问题，核心就是把所有布局约束改成相对位置依赖，而不是固定数值。

下面是具体的调整方案：

1. 替换固定margin为相对guideline约束 #

把布局里的固定左margin（比如100dp）换成百分比guideline，这样窗口缩小时，元素的相对位置会自动适配：

<!-- 添加左侧百分比guideline，替代固定margin -->
<android.support.constraint.Guideline
    android:id="@+id/guideline_left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.15" /> <!-- 占窗口宽度的15% -->

<!-- 修改checkbox_title的约束，去掉固定margin，对齐左侧guideline -->
<CheckBox
    android:id="@+id/checkbox_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="4dp"
    android:layout_marginTop="16dp"
    android:checked="true"
    app:layout_constraintEnd_toStartOf="@+id/search_by_title"
    app:layout_constraintHorizontal_chainStyle="spread_inside"
    app:layout_constraintStart_toStartOf="@+id/guideline_left" <!-- 这里修改为对齐guideline -->
    app:layout_constraintTop_toTopOf="parent" />

同样，把checkbox_publisher的固定左margin也换成对齐这个左侧guideline，而不是100dp。

2. 优化水平元素组的约束范围 #

左边的“标题”组和右边的“作者”组，要确保它们不会因为窗口变窄而互相挤压：

• 让左侧组的TextView（search_by_title）的end约束到中间的垂直guideline，这样左边组不会超过窗口中线：

<TextView
    android:id="@+id/search_by_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="4dp"
    android:layout_marginTop="22dp"
    android:text="Titolo"
    app:layout_constraintEnd_toStartOf="@+id/guideline_vertical_centered" <!-- 添加这个约束 -->
    app:layout_constraintStart_toEndOf="@+id/checkbox_title"
    app:layout_constraintTop_toTopOf="parent" />

• 右边的“作者”组的TextView，也可以约束到父容器的end并加上适当margin，避免贴边。

3. 调整窗口尺寸的设置时机 #

你原来在onResume()里设置窗口尺寸，可能布局已经初始化完成，导致ConstraintLayout没来得及重新计算约束。建议把窗口设置移到onStart()或者onCreateDialog()里：

@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    Dialog dialog = super.onCreateDialog(savedInstanceState);
    // 提前设置窗口居中，初始化属性
    dialog.getWindow().setGravity(Gravity.CENTER);
    return dialog;
}

@Override
public void onStart() {
    super.onStart();
    Window window = getDialog().getWindow();
    if (window != null) {
        Point size = new Point();
        Display display = window.getWindowManager().getDefaultDisplay();
        display.getSize(size);
        int targetWidth = (int) (size.x * 0.75);
        // 设置窗口宽高，高度自适应内容
        window.setLayout(targetWidth, WindowManager.LayoutParams.WRAP_CONTENT);
    }
}

4. 把固定高度的guideline换成百分比 #

布局里的guideline7用了固定的64dp高度，换成百分比后，在不同高度的窗口里位置会更合理：

<android.support.constraint.Guideline
    android:id="@+id/guideline7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.2" /> <!-- 占窗口高度的20%，替代固定64dp -->

5. 后续添加元素的适配建议 #

以后加新的筛选选项时，遵循这两个原则：

• 所有元素的位置都依赖guideline、父容器或其他元素，不要用固定dp的margin/padding；
• 如果需要元素自适应宽度，把宽度设为0dp（match_constraint），然后用start和end约束来控制范围，比如：

<EditText
    android:id="@+id/new_filter_input"
    android:layout_width="0dp" <!-- 自适应宽度 -->
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:layout_marginEnd="8dp"
    app:layout_constraintStart_toStartOf="@+id/guideline_left"
    app:layout_constraintEnd_toEndOf="@+id/guideline_vertical_centered"
    app:layout_constraintTop_toBottomOf="@+id/checkbox_publisher" />

按照这些方法调整后，你的ConstraintLayout就能完美适配窗口尺寸变化，后续加元素也不会再出现布局错乱的问题了。

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