我想使用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功能。
由于
答案 0 :(得分:3)
我将发布一个带有指南的实现:
<?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>
答案 1 :(得分:2)
将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的水平约束,以决定是否对齐左侧,中间或右侧。)