ConstraintLayout

  • 引入constraint-layout

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    allprojects {
    repositories {
    jcenter()
    maven {
    url 'https://maven.google.com'
    }
    }
    }

    compile 'com.android.support.constraint:constraint-layout:1.1.0-beta5'
  • 属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    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
    属性的值有两种,一种是同层级组件ID,还有就是parent,当值为parent时即是相对于父布局进行定位
  • 偏移设置为0~1之间的值,需要设置上面的水平或垂直相对位置,相应属性:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    layout_constraintHorizontal_bias // 水平偏移
    layout_constraintVertical_bias // 垂直偏移

    设置一个float值,表示宽高比
    app:layout_constraintDimensionRatio="2"

    使用比值
    app:layout_constraintDimensionRatio="16:9"
    或者
    app:layout_constraintDimensionRatio="w,16:9"
    app:layout_constraintDimensionRatio="h,16:9"
    这种方式,如果没有前缀就代表是宽高比,如果加了前缀H代表比值的第一个数字是高度,W是宽度
  • add chain

  • autoconnect

    • guideline 距parent默认margin是16dp
    • change margin,adjust bias,达到铺满屏幕效果,不能用match_parent,设置0dp->match_constraint
    • 设置基线约束
    • packtool 铺满view所在方向的可用空间
    • Infer Constraints tool 通过计算,给所有元素增加约束,而AutoConnect只针对selected element to the element’s parent.
    • 设置View比例
    • 设置Barrier,修改barrier direction
      1
      Barriers start with their barrierDirection set to left. Make sure you update your barrierDirection to right or end.
    • 添加chains,设置margin为0
      1
      2
      3
      4
      The modes are, in order:
      Packed: The elements are packed together, as shown above.
      Spread: The elements are spread out over the available space.
      Spread inside: Similar to Spread, but the endpoints of the chain are not spread out.
willkernel wechat
关注微信公众号
帅哥美女们,请赐予我力量吧!