ConstraintLayout：基于百分比的尺寸答案

【问题标题】：ConstraintLayout: percentage based dimensionsConstraintLayout：基于百分比的尺寸
【发布时间】：2017-12-12 07:04:05
【问题描述】：

我可以在约束布局中使用水平和垂直偏差根据屏幕尺寸设置 UI 元素的位置。

但是 UI 元素的宽度和高度并没有根据屏幕大小而改变，所以看起来仍然不完美。

那么我怎样才能做到这一点呢？

下面是我的源代码：

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

    tools:context="com.satizh.android.constraintlayouttest.MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="125dp"
        android:layout_height="47dp"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginTop="0dp"
        android:layout_weight="68"
        android:text="5%V30%H"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.050000012" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        android:layout_marginTop="0dp"
        app:layout_constraintTop_toBottomOf="@+id/button"
        android:layout_marginRight="0dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginLeft="0dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintHorizontal_bias="0.915"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="0dp"
        app:layout_constraintVertical_bias="0.138" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.14" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline2"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.05" />

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

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

</android.support.constraint.ConstraintLayout>

我创建了一些指南（百分比），以便我们可以根据屏幕猜测 UI 按钮在旋转设备时的实际外观。这是更好理解的 gif。

【问题讨论】：

How to make ConstraintLayout work with percentage values?的可能重复

标签： android android-layout android-view android-constraintlayout

【解决方案1】：

如果您希望按钮占据两条准线之间的所有水平空间，则使其宽度为 0dp，并将按钮的左右边缘限制为适当的准线。

<Button
    android:layout_width="0dp"
    app:layout_constraintStart_toEndOf="@id/guideline3"
    app:layout_constraintEnd_toStartOf="@id/guideline4"
    ... />

你会得到肖像的输出：

这对于风景：

为了解决垂直空间问题，将高度设置为 0dp 并将约束按钮的顶部和底部边缘设置为适当的准则。

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

    tools:context="com.satizh.android.constraintlayouttest.MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"

        android:layout_marginTop="0dp"
        android:layout_weight="68"
        android:text="5%V30%H"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        app:layout_constraintLeft_toLeftOf="@+id/guideline3"
        app:layout_constraintRight_toLeftOf="@+id/guideline4"
        app:layout_constraintTop_toTopOf="@+id/guideline2" />

    <Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="0dp"
        android:layout_marginRight="0dp"
        android:layout_marginTop="0dp"
        android:text="box"
        app:layout_constraintBottom_toTopOf="@+id/guideline8"
        app:layout_constraintLeft_toLeftOf="@+id/guideline5"
        app:layout_constraintRight_toLeftOf="@+id/guideline6"
        app:layout_constraintTop_toTopOf="@+id/guideline7"
        app:layout_constraintHorizontal_bias="0.0" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.17" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline2"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.05" />

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

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

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

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

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline7"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.2994129" />

    <android.support.constraint.Guideline
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/guideline8"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.42" />

</android.support.constraint.ConstraintLayout>

对应的输出：

【讨论】：

在不使用指南的情况下还有其他方法吗？您的解决方案有效，并且对于高度我做了类似的方法（将高度 dp 设置为 0 并使用指南）现在很好地看到垂直和水平但它使用指南。我提供的指南只是为了解释问题，但如果有任何其他方法可以帮助解决水平和垂直偏差，我会很高兴。
感谢您的回答。我是 android 开发的新手，所以我不确定哪一种是好的方法（偏见或指导方针）。你怎么看？
如果您需要将视图定位在屏幕上的确切百分比位置 - Guidelines 很好。
太好了。非常感谢阿兹别克语。我不得不编辑答案以适合这个问题。随时查看。

【解决方案2】：

您似乎忘记为按钮设置约束

android:layout_constraintLeft_toRightOf="@+id/guidelineX"

而不是父母

您也可以单击小圆圈并将它们拖动到布局视图中的指南

【讨论】：