使用ConstraintLayout自定义DialogFragment

问题描述 投票：3回答：3

我正在构建一个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>

在预览上看起来像这样：

enter image description here

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

    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();

结果如下：

enter image description here

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

android android-dialogfragment android-constraintlayout
3个回答
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>

删除为对话框大小，重力等编写的所有内容

2
投票

看起来您希望布局中的控件在布局的中心组合在一起。事实上，您的视图与具有较大边距的容器的大小等相关联，从而阻止其正确调整大小。最好将控件组织在一起并轻轻地将组绑定到容器上。

这是另一种查看组织控件的方法。视频显示了当ConstraintLayout的大小发生变化时控件如何改变设计器中的位置。我认为这与您所寻找的一致。

enter image description here

<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>
0
投票
    @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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.