ConstraintLayout：基于百分比的尺寸

Question

我可以使用约束布局中的水平和垂直偏差基于屏幕尺寸设置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。

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

对应的输出：