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

【问题标题】：ConstraintLayout: how to have a view be half the screen width and centered?ConstraintLayout：如何让视图为屏幕宽度的一半并居中？
【发布时间】：2017-08-12 16:06:04
【问题描述】：

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

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

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

原始问题
我想实现一个视图大小为屏幕大小一半并水平居中的布局。

类似这样的：|--view--|

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

还有更好的方法吗？

【问题讨论】：

好吧，正如我在问题中提到的使用 xml 和 3 个视图的解决方案，我想你会足够聪明地推断出“更好的方式”意味着“更少的代码”而不是 3 行 xml。我猜错了，我会改进我的下一个问题。尝试回答。

标签： android android-constraintlayout

【解决方案1】：

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

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

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>

【讨论】：

你知道为什么他们没有像 Apple 在 iOS 和 Mac 上那样实现完整的约束布局吗？应该没那么难……
首先，这并不容易，所以除非你愿意自己去实现，否则不要说“应该不会太难”之类的话；去谷歌工作，去做吧。其次，如果你有 AutoLayout 的经验，你应该知道它对用户来说有多么困难（并将继续如此）；即使是有经验的用户也需要花费大量时间来完全理解它（如果有的话），更重要的是，在日常实践中，AutoLayout 可能非常难以调试，尤其是在布局复杂的情况下。 CL 在某些方面比 AL 做得更好，反之亦然。
测试版永远不会出来？
@MartinMarconcini 我很乐意实现它，因为它很容易。 Cl 没有比 AL 更好，或者可能只是计算布局的速度。它是一个简单的方程列表，可以转换为可以轻松求解的矩阵。

【解决方案2】：

截至**ConstraintLayout1.1.0-beta1**，您可以使用percent来定义widths & heights。

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

这会将width 定义为屏幕宽度的 40%。将此与百分比的指南相结合，您可以创建所需的任何基于百分比的布局。

【讨论】：

ty，但问题是视图的宽度正好是屏幕宽度的一半。顺便说一句，您可以在示例中使用“parent”而不是“@+id/activity_main”。
好的，但是如果我不能使用 beta 组件怎么办？
谢谢！正如developer.android.com/reference/android/support/constraint/… 中所写，“layout_constraintWidth_percent 和layout_constraintHeight_percent 将把这个维度的大小设置为父维度的百分比”。因此，您应该将布局包装在父 ConstraintLayout 中。如果您希望布局占据屏幕的一部分，那将无济于事。
不错的解决方案。非常感谢。

【解决方案3】：

试试这个垂直分割

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

【讨论】：

【解决方案4】：

使用 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'
}

【讨论】：

【解决方案5】：

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。这不适用于所有手机的屏幕尺寸。

【讨论】：

Ty，但它没有回答“视图大小必须是屏幕大小的一半”的问题。它必须是精确的半屏宽度。该视图不是文本视图。
尝试将您的解决方案与<View android:background="#ff0000" /> 一起使用：此视图是否使用屏幕宽度的一半？没有:)
我不想使用 java，因为它在更改设备方向时不起作用。
我通过结合许多答案和解决方案以及我自己的脑力和 20 分钟的时间来搜索这些东西发现了这一点。顺便说一句，如果它起作用，请投票。此外，我分享的 JAVA 代码在更改方向时也完全按照您想要的方式工作。
这个问题要求一种比公开的更简单的解决方案。你的更复杂。