美文网首页
ConstraintLayout

ConstraintLayout

作者: 甜牛奶苦咖啡 | 来源:发表于2017-10-13 22:43 被阅读34次

介绍:ConstraintLayout是2016年Google I/O大会上推出的一种新的布局方式。android  studio 2.3 默认的根布局就是ConstraintLayout。

https://developer.android.google.cn/reference/android/support/constraint/ConstraintLayout.html

优点:1.较使用XML的方式,更合适使用可视化的方式来编写布局。2.有效地解决布局嵌套过多的问题,ConstraintLayout使用约束的方式来指定各个控件的位置和关系的,它有点类似于RelativeLayout,但比RelativeLayout要更强大。

一,使用1:https://github.com/xitu/gold-miner/blob/master/TODO/constraint-layout-hell.md

宽 0dp 说明宽应当被别的约束控制

app:layout_constraintLeft_toRightOf=”@+id/listingImageView” 在这里我指定了渲染的顺序。把我(当前的 TextView)的左边缘放在 ImageView(@+id/listingImageView) 的右边。

app:layout_constraintRight_toRightOf=”parent” 在这里我指定了渲染的顺序。让我(当前的 TextView)的右边缘和父组件的右边对齐。现在,我的宽度就是从 ImageView 的右边到父组件右边这么多了。这就是为什么我们将宽度设为 0dp。

app:layout_constraintTop_toTopOf=”parent” 在这里我指定了渲染的顺序。把我(当前的 TextView)的上边缘和父组件的上边缘对齐。

这里没有 match_parent 属性,就算你用了也没用。你必须使用 parent 属性。

二,使用2:https://github.com/xitu/gold-miner/blob/master/TODO/constraint-layout-concepts-hell-tips-tricks-part-2.md

1. MATCH_PARENT 不起作用

2. 居中对齐视图 (水平, 垂直, 在父视图中心):

3. 水平/垂直偏移  app:layout_constraintHorizontal_bias=“”  app:layout_constraintVertical_bias=”″  取值区间是 0,0.1 .. 1。

4. 管理图片视图的比例  app:layout_constraintDimensionRatio="4:3"

5.Guideline 用作分隔 UI 的辅助工具   orientation: 水平, 垂直 // 分隔屏幕的方式,layout_constraintGuide_percent: 0, 0.1 .. 1 // 屏幕的全部大小表示为 1.0 ,layout_constraintGuide_begin: 200dp // 通过 dp 值来表示放置 Guidelines 的位置。最终,Guidelines 永远不会绘制到 UI 界面中。

6.在 ConstraintLayout 中实现 LinearLayout 

7.chaining style  对于 chaining style 来说,有一个新的属性layout_constraintHorizontal_chainStyle (layout_constraintVertical_chainStyle)我们能给这个属性设置五种值。

Spread Chain, Spread Inside Chain, Packed Chain, Packed Chain with Bias 以及 Weighted Chain

Spread Chain是默认的样式

Spread Inside Chain 链头和尾部的视图都自动地依附到了父容器的左右两边。

Packed Chain  所有的视图连在一起,并且水平居中

Packed Chain with Bias  所有的视图连在一起,并存在偏移量

layout_constraintHorizontal_weight  与LinearLayout的weight类似

8. 隐藏视图后,布局遭到破坏    app:layout_goneMargin

Android性能优化之布局优化:http://www.cnblogs.com/hoolay/p/6248514.html

相关文章

网友评论

      本文标题:ConstraintLayout

      本文链接:https://www.haomeiwen.com/subject/zztzyxtx.html