使用ConstraintLayout自定义DialogFragment

时间:2018-05-11 16:15:48

标签: android android-dialogfragment android-constraintlayout

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

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

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

只是一个黑客。您可以通过父节点包装对话框布局,并可以设置ConstraintLayout宽度和高度wrap_content。 通过这种方式,您还可以设置background color,对话框margingravity

只需用此替换对话框布局。

<?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 :(得分: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_contentmatch_parent不适用于对话框,它会自动设置为自动换行内容。因此可能会因为您使用match_parent而在预览窗口中使布局看起来很好,但是在对话框中使用时却显示为垂直的粗线。因此,将您的布局设计为在预览中看起来正确,高度和宽度为wrap_content