通过 ConstraintLayout 在两个维度上使用比率来显示 3 个相同大小的正方形
Using ratios on both dimensions with ConstraintLayout to display 3 squares of same size
我想使用 ConstraintLayout 显示 3 个相同尺寸的正方形。正方形的大小必须是屏幕高度的 1/3。我想知道如何使用 ConstraintLayout 来做到这一点。
我从这段代码开始：
<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">
<View
android:id="@+id/view1"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/view2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintVertical_chainStyle="spread"
android:background="#ff0000" />
<View
android:id="@+id/view2"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/view1"
app:layout_constraintBottom_toTopOf="@+id/view3"
app:layout_constraintLeft_toLeftOf="parent"
android:background="#00ff00" />
<View
android:id="@+id/view3"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/view2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#0000ff" />
</android.support.constraint.ConstraintLayout>
使用此代码我得到了所需的高度，但我想使用 ConstraintLayout Ratio 功能将宽度限制为 1:1
我试过这个代码：
<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">
<View
android:id="@+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/view2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintDimensionRatio="W,1:1"
android:background="#ff0000" />
<View
android:id="@+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/view1"
app:layout_constraintBottom_toTopOf="@+id/view3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintDimensionRatio="W,1:1"
android:background="#00ff00" />
<View
android:id="@+id/view3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/view2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintDimensionRatio="W,1:1"
android:background="#0000ff" />
</android.support.constraint.ConstraintLayout>
我该如何解决这些限制并正确显示 3 个相同大小的正方形？我只想尽可能使用 ConstraintLayout 功能。
谢谢
将 View2 和 View3 的水平边距与 View1 而不是 Parent 对齐：
<View
android:id="@+id/view1"
android:background="#ff0000"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/view2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintHorizontal_chainStyle="spread"/>
<View
android:id="@+id/view2"
android:background="#00ff00"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintTop_toBottomOf="@id/view1"
app:layout_constraintBottom_toTopOf="@id/view3"
app:layout_constraintLeft_toLeftOf="@id/view1"
app:layout_constraintRight_toRightOf="@id/view1"
app:layout_constraintDimensionRatio="1:1"/>
<View
android:id="@+id/view3"
android:background="#0000ff"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintTop_toBottomOf="@id/view2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="@id/view1"
app:layout_constraintRight_toRightOf="@id/view1"
app:layout_constraintDimensionRatio="1:1"/>
请注意，View2 和 View3 的 layout_constraintLeft_toLeftOf 和 layout_constraintRight_toRightOf 设置为 @id/view1 而不是 parent。
（我添加了layout_constraintHorizontal_chainStyle="spread"让链条水平居中。你可以改变View1的水平约束来决定左对齐、居中还是右对齐。）
我将 post 实施指南：
<?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:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="0dp">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline1"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.33"/>
<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.66"/>
<TextView
android:id="@+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff0000"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintBottom_toTopOf="@+id/guideline1"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
app:layout_constraintDimensionRatio="1:1"/>
<TextView
android:id="@+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#00ff00"
app:layout_constraintTop_toBottomOf="@id/guideline1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintVertical_bias="0.5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintBottom_toTopOf="@id/guideline2"
app:layout_constraintDimensionRatio="1:1"/>
<TextView
android:id="@+id/view3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#0000ff"
app:layout_constraintTop_toBottomOf="@id/guideline2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintVertical_bias="0.5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"/>
</android.support.constraint.ConstraintLayout>
我想使用 ConstraintLayout 显示 3 个相同尺寸的正方形。正方形的大小必须是屏幕高度的 1/3。我想知道如何使用 ConstraintLayout 来做到这一点。
我从这段代码开始：
<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">
<View
android:id="@+id/view1"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/view2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintVertical_chainStyle="spread"
android:background="#ff0000" />
<View
android:id="@+id/view2"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/view1"
app:layout_constraintBottom_toTopOf="@+id/view3"
app:layout_constraintLeft_toLeftOf="parent"
android:background="#00ff00" />
<View
android:id="@+id/view3"
android:layout_width="wrap_content"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/view2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
android:background="#0000ff" />
</android.support.constraint.ConstraintLayout>
使用此代码我得到了所需的高度，但我想使用 ConstraintLayout Ratio 功能将宽度限制为 1:1
我试过这个代码：
<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">
<View
android:id="@+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/view2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintDimensionRatio="W,1:1"
android:background="#ff0000" />
<View
android:id="@+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/view1"
app:layout_constraintBottom_toTopOf="@+id/view3"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintDimensionRatio="W,1:1"
android:background="#00ff00" />
<View
android:id="@+id/view3"
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintTop_toBottomOf="@id/view2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintDimensionRatio="W,1:1"
android:background="#0000ff" />
</android.support.constraint.ConstraintLayout>
我该如何解决这些限制并正确显示 3 个相同大小的正方形？我只想尽可能使用 ConstraintLayout 功能。
谢谢
将 View2 和 View3 的水平边距与 View1 而不是 Parent 对齐：
<View
android:id="@+id/view1"
android:background="#ff0000"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/view2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintDimensionRatio="1:1"
app:layout_constraintVertical_chainStyle="spread"
app:layout_constraintHorizontal_chainStyle="spread"/>
<View
android:id="@+id/view2"
android:background="#00ff00"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintTop_toBottomOf="@id/view1"
app:layout_constraintBottom_toTopOf="@id/view3"
app:layout_constraintLeft_toLeftOf="@id/view1"
app:layout_constraintRight_toRightOf="@id/view1"
app:layout_constraintDimensionRatio="1:1"/>
<View
android:id="@+id/view3"
android:background="#0000ff"
android:layout_height="0dp"
android:layout_width="0dp"
app:layout_constraintTop_toBottomOf="@id/view2"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="@id/view1"
app:layout_constraintRight_toRightOf="@id/view1"
app:layout_constraintDimensionRatio="1:1"/>
请注意，View2 和 View3 的 layout_constraintLeft_toLeftOf 和 layout_constraintRight_toRightOf 设置为 @id/view1 而不是 parent。
（我添加了layout_constraintHorizontal_chainStyle="spread"让链条水平居中。你可以改变View1的水平约束来决定左对齐、居中还是右对齐。）
我将 post 实施指南：
<?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:layout_editor_absoluteY="81dp"
tools:layout_editor_absoluteX="0dp">
<android.support.constraint.Guideline
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/guideline1"
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.33"/>
<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.66"/>
<TextView
android:id="@+id/view1"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#ff0000"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintBottom_toTopOf="@+id/guideline1"
android:layout_marginBottom="0dp"
android:layout_marginLeft="0dp"
app:layout_constraintDimensionRatio="1:1"/>
<TextView
android:id="@+id/view2"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#00ff00"
app:layout_constraintTop_toBottomOf="@id/guideline1"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintVertical_bias="0.5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintBottom_toTopOf="@id/guideline2"
app:layout_constraintDimensionRatio="1:1"/>
<TextView
android:id="@+id/view3"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#0000ff"
app:layout_constraintTop_toBottomOf="@id/guideline2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintVertical_bias="0.5"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintDimensionRatio="1:1"/>
</android.support.constraint.ConstraintLayout>