ConstraintLayout：基于百分比的维度
ConstraintLayout: percentage based dimensions
我可以使用约束布局中的水平和垂直偏移，根据屏幕大小设置 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。
您似乎忘记为按钮 apparently
设置约束
android:layout_constraintLeft_toRightOf="@+id/guidelineX"
而不是parent
您也可以点击小圆圈并将它们拖到布局视图中的辅助线
如果您希望按钮占据两条参考线之间的所有水平space，则将其宽度设置为0dp，并将按钮的左右边缘约束到适当的参考线。
<Button
android:layout_width="0dp"
app:layout_constraintStart_toEndOf="@id/guideline3"
app:layout_constraintEnd_toStartOf="@id/guideline4"
... />
您将获得此肖像输出：
这是横向的：
为了解决垂直问题 space，使高度 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>
对应输出：
我可以使用约束布局中的水平和垂直偏移，根据屏幕大小设置 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。
您似乎忘记为按钮 apparently
设置约束android:layout_constraintLeft_toRightOf="@+id/guidelineX"
而不是parent
您也可以点击小圆圈并将它们拖到布局视图中的辅助线
如果您希望按钮占据两条参考线之间的所有水平space，则将其宽度设置为0dp，并将按钮的左右边缘约束到适当的参考线。
<Button
android:layout_width="0dp"
app:layout_constraintStart_toEndOf="@id/guideline3"
app:layout_constraintEnd_toStartOf="@id/guideline4"
... />
您将获得此肖像输出：
这是横向的：
为了解决垂直问题 space，使高度 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>
对应输出：