带有 ConstraintLayout 的自定义 DialogFragment

Question

我正在构建一个 DialogFragment 用于显示用户可以应用的一些过滤器。 这是我要构建的自定义视图的布局：

<?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">

<android.support.constraint.Guideline
    android:id="@+id/guideline_vertical_centered"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5" />

<CheckBox
    android:id="@+id/checkbox_title"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="4dp"
    android:layout_marginStart="100dp"
    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="parent"
    app:layout_constraintTop_toTopOf="parent" />

<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_constraintStart_toEndOf="@+id/checkbox_title"
    app:layout_constraintTop_toTopOf="parent" />

<CheckBox
    android:id="@+id/checkbox_author"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:layout_marginTop="16dp"
    android:checked="true"
    app:layout_constraintStart_toEndOf="@+id/guideline_vertical_centered"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="4dp"
    android:layout_marginTop="22dp"
    android:text="Autore"
    app:layout_constraintStart_toEndOf="@+id/checkbox_author"
    app:layout_constraintTop_toTopOf="parent" />

<CheckBox
    android:id="@+id/checkbox_publisher"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="100dp"
    android:checked="true"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/guideline7" />

<TextView
    android:id="@+id/textView4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="4dp"
    android:layout_marginTop="6dp"
    android:text="Editore"
    app:layout_constraintStart_toEndOf="@+id/checkbox_publisher"
    app:layout_constraintTop_toTopOf="@+id/guideline7" />

<CheckBox
    android:id="@+id/checkbox_tags"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="16dp"
    android:checked="true"
    app:layout_constraintStart_toEndOf="@+id/guideline_vertical_centered"
    app:layout_constraintTop_toBottomOf="@+id/guideline7" />

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="4dp"
    android:layout_marginTop="6dp"
    android:text="Tags"
    app:layout_constraintStart_toEndOf="@+id/checkbox_tags"
    app:layout_constraintTop_toTopOf="@+id/guideline7" />

<android.support.constraint.Guideline
    android:id="@+id/guideline7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="64dp"
    app:layout_constraintStart_toStartOf="parent" />


</android.support.constraint.ConstraintLayout>

预览图如下：

但是，由于我不希望对话框填满整个屏幕，所以我这样设置它的大小：

    Window window = getDialog().getWindow();
    Point size = new Point();
    Display display = window.getWindowManager().getDefaultDisplay();
    display.getSize(size);
    window.setLayout((int) (size.x * 0.75), WindowManager.LayoutParams.WRAP_CONTENT);
    window.setGravity(Gravity.CENTER);
    super.onResume();

结果如下：

所以我的问题是：如何使用约束布局，然后使其约束缩放到窗口的尺寸？
我知道对于我添加约束布局的元素是不必要的，但我计划添加更多具有非固定布局的元素。
提前谢谢大家！

Answer 1

只是一个技巧。您可以通过父节点包装您的对话框布局，并可以设置ConstraintLayout 宽度和高度wrap_content。 通过这种方式还可以设置background color、对话框margin、gravity。

只需用这个替换你的对话框布局。

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorTransparentGray"
    android:gravity="center"
    android:padding="20dp">

    <android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <android.support.constraint.Guideline
            android:id="@+id/guideline_vertical_centered"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.5" />

        <CheckBox
            android:id="@+id/checkbox_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="4dp"
            android:layout_marginStart="100dp"
            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="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <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_constraintStart_toEndOf="@+id/checkbox_title"
            app:layout_constraintTop_toTopOf="parent" />

        <CheckBox
            android:id="@+id/checkbox_author"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:layout_marginTop="16dp"
            android:checked="true"
            app:layout_constraintStart_toEndOf="@+id/guideline_vertical_centered"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:layout_marginTop="22dp"
            android:text="Autore"
            app:layout_constraintStart_toEndOf="@+id/checkbox_author"
            app:layout_constraintTop_toTopOf="parent" />

        <CheckBox
            android:id="@+id/checkbox_publisher"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="100dp"
            android:checked="true"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@+id/guideline7" />

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:layout_marginTop="6dp"
            android:text="Editore"
            app:layout_constraintStart_toEndOf="@+id/checkbox_publisher"
            app:layout_constraintTop_toTopOf="@+id/guideline7" />

        <CheckBox
            android:id="@+id/checkbox_tags"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="16dp"
            android:checked="true"
            app:layout_constraintStart_toEndOf="@+id/guideline_vertical_centered"
            app:layout_constraintTop_toBottomOf="@+id/guideline7" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="4dp"
            android:layout_marginTop="6dp"
            android:text="Tags"
            app:layout_constraintStart_toEndOf="@+id/checkbox_tags"
            app:layout_constraintTop_toTopOf="@+id/guideline7" />

        <android.support.constraint.Guideline
            android:id="@+id/guideline7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_begin="64dp"
            app:layout_constraintStart_toStartOf="parent" />


    </android.support.constraint.ConstraintLayout>
</LinearLayout>

删除所有为对话框大小、重力等而写的内容。

Answer 2

您似乎希望布局中的控件在布局的中心组合在一起。就目前的情况而言，您的视图与具有大边距的容器的大小相关，这会阻止它正确调整大小。最好将控件彼此组织起来，并将组轻轻地绑定到容器。

这是组织控件的另一种方式。该视频显示了控件如何随着ConstraintLayout 的大小变化而在设计器中更改位置。我认为这符合您的要求。

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <CheckBox
        android:id="@+id/checkbox_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        app:layout_constraintBottom_toTopOf="@+id/checkbox_publisher"
        app:layout_constraintEnd_toStartOf="@+id/search_by_title"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/search_by_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="Titolo"
        app:layout_constraintBottom_toBottomOf="@+id/checkbox_title"
        app:layout_constraintEnd_toStartOf="@+id/checkbox_author"
        app:layout_constraintStart_toEndOf="@+id/checkbox_title"
        app:layout_constraintTop_toTopOf="@+id/checkbox_title" />

    <CheckBox
        android:id="@+id/checkbox_author"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:checked="true"
        app:layout_constraintEnd_toStartOf="@+id/textView"
        app:layout_constraintStart_toEndOf="@+id/search_by_title"
        app:layout_constraintTop_toTopOf="@+id/checkbox_title" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Autore"
        app:layout_constraintBottom_toBottomOf="@+id/checkbox_author"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/checkbox_author"
        app:layout_constraintTop_toTopOf="@+id/checkbox_author" />

    <CheckBox
        android:id="@+id/checkbox_publisher"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:checked="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="@+id/checkbox_title"
        app:layout_constraintTop_toBottomOf="@+id/checkbox_title" />

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Editore"
        app:layout_constraintBottom_toBottomOf="@+id/checkbox_publisher"
        app:layout_constraintStart_toStartOf="@+id/search_by_title"
        app:layout_constraintTop_toTopOf="@+id/checkbox_publisher" />

    <CheckBox
        android:id="@+id/checkbox_tags"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:checked="true"
        app:layout_constraintStart_toStartOf="@id/checkbox_author"
        app:layout_constraintTop_toTopOf="@+id/checkbox_publisher" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Tags"
        app:layout_constraintBottom_toBottomOf="@+id/checkbox_tags"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toTopOf="@+id/checkbox_tags" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="64dp"
        app:layout_constraintStart_toStartOf="parent" />

</android.support.constraint.ConstraintLayout>

Answer 3

    @NonNull
@Override
public Dialog onCreateDialog(Bundle savedInstanceState) {
    Dialog dialog = super.onCreateDialog(savedInstanceState);
    dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
    dialog.getWindow().setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
    dialog.getWindow().setLayout(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    dialog.setCanceledOnTouchOutside(false);
    dialog.setContentView(R.layout.yourlayout);
    return dialog;
}

此解决方案是执行此操作的最佳方式。您不需要覆盖onCreateView()。确保您的约束布局的高度和宽度都为wrap_content。 match_parent 不适用于对话框，它会自动设置为 wrap-content。因此，您的布局在预览窗口中可能看起来不错，因为您使用了match_parent，但是当您在对话框中使用它时，它显示为一条粗垂直线。因此，将您的布局设计为在预览中看起来正确，高度和宽度为wrap_content