我想使用 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 功能。
谢谢
最佳答案
我将发布带有指南的实现:
<?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>
关于android - 通过 ConstraintLayout 在两个维度上使用比率来显示 3 个相同大小的正方形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43156840/