ConstraintLayout：如何让视图成为屏幕宽度的一半并居中？

Question

TL;DR
视图宽度必须正好是屏幕的一半，并且居中。使用 ConstraintLayout.

请注意，视图没有任何内部宽度。

<View android:background="#ff0000" ... />

原题
我想实现一个布局，其中视图大小是屏幕大小的一半，并且水平居中。

像这样：|--view--|

我找不到任何使用 ConstraintLayout 的方法。我发现最好的是在分别位于最左和最右的 2 个假视图上使用 app:layout_constraintHorizontal_weight="1"，并在我的视图上使用 app:layout_constraintHorizontal_weight="1.5"。

有更好的方法吗？

Answer 1

Result

你要做的是：
只需将此添加到您的 XML

    <View
        android:id="@+id/viewV1"
        android:layout_height="match_parent"
        android:background="#ff0000"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_width="match_parent"
        />

这在您的 java 中。
首先导入这些。

    import android.graphics.Point;
    import android.support.constraint.ConstraintLayout;
    import android.view.Display;
    import android.view.View;

然后将这些行添加到 java 文件的 onCreate 函数中。

    Display display = getWindowManager().getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);
    int width1 = size.x;
    //int height = size.y;
    View v =  findViewById(R.id.viewV1);        
    ConstraintLayout.MarginLayoutParams params = (ConstraintLayout.MarginLayoutParams) v.getLayoutParams();
    params.width = width1/2; params.leftMargin = width1/4; params.rightMargin = width1/4;
    v.setLayoutParams(params);

您也可以使用此方法设置高度。是的，无论屏幕大小如何，此视图都使用屏幕宽度的一半。

因为您不想通过 java 进行操作。将此添加到您的 XML.

<android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline5"
        app:layout_constraintGuide_begin="411dp"
        android:orientation="vertical"
         />

通过选择此选项，将此参考线移至屏幕末尾并记下此值 app:layout_constraintGuide_begin="411dp"。现在无论值是多少，这都是您的屏幕宽度。

将 marginStart 和 marginEnd 添加到您的视图中作为 411/4 dp。（计算这个值，XML不会那样做）。
这将使您的视图居中，半宽作为父视图。

请记住，并非每个屏幕都是 411dp。这不适用于所有 phone 的屏幕尺寸。

Answer 2

从**ConstraintLayout1.1.0-beta1**开始，可以使用percent来定义widths & heights.

android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".4"

这会将 width 定义为 屏幕宽度的 40% 。将此与指南的百分比组合允许您创建任何您想要的基于 百分比的布局。

Answer 3

在测试版中，您可以使用百分比宽度。如果您不能使用测试版，您可以使用两条垂直参考线：一条在屏幕宽度的 25% 处，一条在屏幕宽度的 75% 处。宽度为 0dp 的视图将被限制在这两个准则之间。此设置将为您提供屏幕宽度为 1/2 且居中的视图。

下面的XML演示了这两种方式；一个使用 ConstraintLayout 测试版，第二个使用当前生产版本中可用的功能。

XML布局

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main_inference"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <View
        android:id="@+id/viewTop"
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginTop="16dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="percent"
        app:layout_constraintWidth_percent="0.5" />


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

    <View
        android:layout_width="0dp"
        android:layout_height="100dp"
        android:layout_marginTop="16dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintEnd_toStartOf="@id/guidelineRight"
        app:layout_constraintStart_toEndOf="@id/guidelineLeft"
        app:layout_constraintTop_toBottomOf="@id/viewTop" />

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

</android.support.constraint.ConstraintLayout>

Answer 4

试试这个垂直分割

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

        <android.support.constraint.ConstraintLayout
            android:id="@+id/clPart1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@color/white"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintHorizontal_chainStyle="spread"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/clPart2">


        </android.support.constraint.ConstraintLayout>

        <android.support.constraint.ConstraintLayout
            android:id="@+id/clPart2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="@color/black"
            android:visibility="visible"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toRightOf="@+id/clPart1"
            app:layout_constraintRight_toRightOf="parent">


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

Answer 5

使用 ConstraintLayout，您可以像这样在屏幕中居中显示一个视图：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF0000"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".5"></LinearLayout>

</android.support.constraint.ConstraintLayout>

将您的 gradle 更新为最新版本的 ConstraintLayout：

dependencies {
...
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

ConstraintLayout：如何让视图成为屏幕宽度的一半并居中？

ConstraintLayout: how to have a view be half the screen width and centered?

android

android-constraintlayout