ConstraintLayout - 3. 摆放位置

2019-11-14  本文已影响0人  VittaWang
1. 添加约束(Add or remove a constraint)

① 每个view至少有两个约束。横向和纵向至少有一个。
② 横向约束只能指向横向的锚点。
③ 每个约束句柄只能应用于一个约束。但是一个约束锚点可以设置多个约束。

2. 相对位置

以下相当于ReleativeLayout的位置;可以约束到parent、其他view、guideLine、Barrier

<!--alignment-->
layout_constraintLeft_toLeftOf  
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintBottom_toBottomOf
<!--right-->
layout_constraintLeft_toRightOf
<!--left-->
layout_constraintRight_toLeftOf
<!--below-->
layout_constraintTop_toBottomOf
<!--above-->
layout_constraintBottom_toTopOf
3. 文本视图基线BaseLine对齐
app:layout_constraintBaseline_toBaselineOf="@+id/textView2"
<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView2"
    app:layout_constraintBottom_toTopOf="@+id/constraintLayout"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<TextView
    android:id="@+id/textView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TextView3"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/textView2"
    app:layout_constraintBaseline_toBaselineOf="@+id/textView2"/>
BaseLine对齐 GuideLine约束
4. GuideLine约束

对用户不可见,视图可以约束到此线上。

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintGuide_percent="0.5"/>

layout_constraintGuide_percent 按照parent比例设置引导线的位置(0-1)
layout_constraintGuide_begin layout_constraintGuide_end 按照dp偏移距离设置引导线位置

5. Barrier约束

跟GuideLine类似是不可见的,视图可以约束到此线上。但是barrier不能设置自己的position,屏障的位置基于屏障其中包含的视图位置。当你想约束一个view在一系列的view一边而不是一个单独的view一边时,屏障是非常好用的。
屏障内的视图可以约束到屏障上。屏障内可以添加GuideLine。

C在A和B的右边 C在A和B的右边
androidx.constraintlayout.widget.Barrier
barrierDirection right / left
constraint_referenced_ids
<Button
    android:id="@+id/button2"
    android:layout_width="120dp"
    android:layout_height="wrap_content"
    android:layout_marginBottom="16dp"
    android:text="A"
    app:layout_constraintBottom_toTopOf="@+id/button3"
    app:layout_constraintStart_toStartOf="parent" />

<Button
    android:id="@+id/button3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="4dp"
    android:layout_marginBottom="64dp"
    android:text="B"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="right"
    app:barrierAllowsGoneWidgets="true"
    app:constraint_referenced_ids="button3,button2"/>

<Button
    android:id="@+id/button4"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="24dp"
    android:layout_marginBottom="64dp"
    android:text="C"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toEndOf="@+id/barrier4" />
6. 调整约束偏差(Adjust the constraint bias)

如果设置了相反方向的约束(opposing constraints),约束线会变得弯曲向弹簧一样,代表双向对抗的力。
约束偏差可以调整两边力的大小比例;

双向对抗的力(居中0.5) 位置按比例偏移(0.2)
layout_constraintHorizontal_bias
layout_constraintVertical_bias
<ImageView
    android:id="@+id/imageView"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_marginTop="140dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.2"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:srcCompat="@android:drawable/screen_background_dark_transparent" />
上一篇下一篇

猜你喜欢

热点阅读