ConstraintLayout

2020-12-22  本文已影响0人  小号_134e

基础知识

1. Relative positioning相对定位

layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf
layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

总结：layout_constraintA_toB 参数为目标id或者parent

A当前控件，B目标控件,A控件的哪一侧（上下左右）与B控件的哪一侧（上下左右）对齐

例如layout_constraintLeft_toLeftOf 控件A的左侧和控件B的左侧对齐
例如layout_constraintTop_toBottomOf 控件A的顶部和控件B的底部侧对齐

注意，如果当前控件的layout_height或者layout_width值为match_parent，约束会失效，改为0dp即可

2. Margins

【1】基础信息

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
注意，值必须为正数或者0，使用Dimension

【2】当被依赖控件隐藏View.GONE时，下面的几个属性生效

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

当约束目标控件可见性设为View.GONE时，启用该属性，代码示例如下

正常显示,图1
<androidx.constraintlayout.widget.ConstraintLayout
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="@color/mainBkg">
​
   <TextView
   android:id="@+id/view"
   android:layout_width="200dp"
   android:layout_height="200dp"
   android:layout_marginStart="50dp"
   android:layout_marginTop="100dp"
   android:background="#fff"
   android:gravity="center"
   android:text="目标控件"
   android:visibility="visible"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toTopOf="parent" />
​
   <TextView
   android:layout_width="50dp"
   android:layout_height="50dp"
   android:layout_marginStart="20dp"
   android:layout_marginTop="20dp"
   android:background="#123"
   android:gravity="center"
   android:text="当前控件"
   android:textColor="#fff"
   app:layout_constraintStart_toEndOf="@id/view"
   app:layout_constraintTop_toTopOf="@id/view"
   app:layout_goneMarginStart="100dp"
   app:layout_goneMarginTop="200dp" />
  ​
 </androidx.constraintlayout.widget.ConstraintLayout>
图1
隐藏目标控件后android:visibility="gone"
图2

3. Centering positioning中心定位和偏差

当控件左侧与父控件左侧对齐，右侧与父控件右侧对齐时app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"，除非控件大小和父控件大小一致，否侧会在约束方向上（此时为横向）居中显示，同理纵向也是一样

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">

    <Button
        android:text="居中"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
居中

偏移量

当控件在父控件中居中显示或某方向居中显示时，使用bias属性调整控件偏移位置
layout_constraintHorizontal_bias layout_constraintVertical_bias，方向为从上到下，从左到右，如果layout_constraintHorizontal_bias设为1，位于父控件最右侧，layout_constraintVertical_bias设为1，位于控件最底部
取值范围float，0-1，如果大于1会显示不全，默认0.5
如图，目标控件原本居中显示，设置偏移量后位置改变

偏移

4. Circular positioning圆形定位

您可以以一定角度和距离将一个小部件中心相对于另一个小部件中心进行约束。
layout_constraintCircle 定位控件ID
layout_constraintCircleRadius两个控件中心点之间的距离
layout_constraintCircleAngle角度，取值范围0-360的整数

官方截图

5. Visibility behavior可见性处理

与其他layout的区别在于

6. Dimension constraints尺寸约束

6.1 为ContraintLayout这只最大最小宽高

当ContraintLayout宽高设为WRAP_CONTENT时可以设置最大最小宽高

6.2 设置控件宽高

设置android:layout_width,android:layout_height
参数：

6.3 强制约束

当控件设为WRAP_CONTENT时，添加约束尺寸是不生效的，想要生效，需要添加如下属性

6.4 MATCH_CONSTRAINT

7. Chains 链条

在同一个轴上（水平或垂直），两个或两个以上控件首尾双向连接，则将视为链条。链条由链条头（最左侧或左上方View）设置的属性控制
上一篇 下一篇

猜你喜欢

热点阅读