定義
ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way
? ? 在官文的定義中移剪,ConstraintLayout雖說是約束布局诺核,但卻能提供更為靈活的布局方式顾孽〈犹伲基于組件間的約束實現(xiàn)的布局靈活性,是此次ConstraintLayout不同于其他布局的特質(zhì)與飛躍守屉。
基本內(nèi)容
? 1) ?Relative Positioning?
? ? ? ConstraintLayout集成了RelativeLayout和LinearLayout的布局效果惑艇,Relative Positioning是類似RelativeLayout的布局方式。不同組件間可以通過添加垂直方向和水平方向的Constraint胸梆,實現(xiàn)定位效果敦捧。?
? ? ?丶 垂直方向Constraint?
? ? ? ? ?- 可添加屬性 : Left , Right, Start, End
? ? ?丶 水平方向Constraint
? ? ? ? - 可添加屬性 : Top, Bottom, Baseline
可視化Demo :
? ? ? ? - 將鼠標(biāo)懸浮于上下左右邊的中點時须板,會出現(xiàn)閃爍綠點碰镜,拖拽鼠標(biāo)到指定組件邊,從而添加Constraint.
? ? ? - 當(dāng)組件添加水平方向的Constraint于父組件時习瑰,此組件會處于水平中央位置绪颖。? ? ? ? ?
? ? ? ?- 添加限制的邊,再次將鼠標(biāo)懸浮于邊中點,會出現(xiàn)閃爍紅點柠横,點擊紅點可刪除之前添加的Constraint. ? ??
? ? ? ?- 同理窃款,不同獨立組件間可用相同方式添加/刪除Constraint.
代碼Demo:
? ? ? - ? 范式: ... app : layout_constraintX_toYOf = "widgetID/widgetName" ?...
? ? ? ? ? ? ? ? ? ? ? ?將組件的X邊添加Constraint到指定組件的Y邊
? ? ? - ?可用屬性
? ? ? ? ? ?丶 水平方向
? ? ? ? ? ? ? ? >layout_constraintLeft_toLeftOf ? ? ? ? ? ? ?>layout_constraintLeft_toRightOf
? ? ? ? ? ? ? ?>layout_constraintRight_toRightOf ? ? ? ? ?>layout_constraintRight_toLeftOf
? ? ? ? ? ? ? ?>layout_constraintStart_toStartOf ? ? ? ? ? >layout_constraintStart_toEndOf
? ? ? ? ? ? ? >layout_constraintEnd_toEndOf ? ? ? ? ? ? ? >layout_constraintEnd_toStartOf
? ? ? ? ? ?丶垂直方向
? ? ? ? ? ? ? ?>layout_constraintTop_toTopOf ? ? ? ? ? ? ? ?>layout_constraintTop_toBottomOf?
? ? ? ? ? ? ? ?>layout_constraintBottom_toBottomOf ? >layout_constraintBottom_toTopOf
? ? ? ? ? ? ? >layout_constraintBaseline_toBaselineOf
? ? ? - ?如上例子水平方向添加限制后,生成代碼如下
2) Margins
? ? margin值是用于設(shè)置已添加Constraint組件間的空隙牍氛。 ? ?
?可視化Demo?
? ? ?- 添加Constraint后晨继,點擊組件,右側(cè)屬性欄出現(xiàn)搬俊,見屬性欄上方?
? ? ? ?上下左右的數(shù)字是組件邊與另一組件邊添加Constraint后的margin值紊扬,可在框內(nèi)點擊修改margin值
? ?代碼Demo
? ? ? ? - 范式:... android:layout_marginX = "..dp" ...
? ? ? ? - ?可用屬性?
? ? ? ? ? ? ? >layout_marginLeft ? ? ? ? ?>layout_marginRight
? ? ? ? ? ? ? ? ? ? ? ?>layout_marginTop ? ? ? ? ? ?>layout_marginBottom
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? >layout_marginStart ? ? ? ? ? >layout_marginEnd
? ? ? ?- 圖x(上例)生成的代碼如下
3)Bias
? ? ? ?Bias,偏移之意唉擂,用于設(shè)置組件在水平方向和垂直方向說處位置的偏移度餐屎。當(dāng)水平/垂直方向,即組件左右邊/上下邊均添加Constraint時,默認(rèn)處于目的組件的水平/垂直中央位置玩祟。
?可視化Demo:
? ? ? ?- 見 2)中圖x ?
? ? ? ?- 以水平方向為例腹缩,當(dāng)左右邊都添加constraint時,圖x-紅3處的小圓圈空扎,即是源組件相對于目的組件的相對偏移度藏鹊。默認(rèn)為50,即居中。
? ? ? ?- 可拖動圓圈修改bias值
? 代碼Demo:
? ? ? ? ? - 范式 : ... app: layout_constraintX_bias = "0.x" ...
? ? ? ? ? - ?可用屬性
? ? ? ? ? ? ?>layout_constraintHorizontal_bias?
? ? ? ? ? ? ?>layout_constraintVertical_bias
? ? ? ? ?- 注意?
? ? ? ? ? ? bias值转锈,水平方向是left所占比例伙判,垂直方向是top所占比例 ,0 ?< bias值 < 1.0
? ? ? ? ?- 圖y生成代碼如下
4)Demensions Constraints
? ? ? ?丶 minWidth, ?minHeight
? ? ? ? ? ?設(shè)置組件的最小寬高黑忱。屬性優(yōu)先級高于宴抚,layout_width, layout_height,即當(dāng)ConstraintLayout會優(yōu)先滿足minWidth, minHeight的屬性甫煞。
? ? ? ?丶 layoutWidth, layoutHeight
? ? ? ? ? ?>可用精確的dp數(shù)設(shè)置
? ? ? ? ? ?>可用wrap_content自動計算
? ? ? ? ? ?>0dp菇曲,效果與match_constraint相同(代碼中無法識別match_contraint,與官文有出入抚吠,原因未知常潮,但可用match_parent實現(xiàn)填充效果)
? ? ? ?Demo 略 ...
5) Ratio
? ? Ratio用于設(shè)置組件寬高比例,需注意楷力,Ratio生效的前提是 layout_width喊式,layout_height中有一個設(shè)為 0dp,不能為match_parent
? 代碼Demo:
? ? ? ?- 范式 :... app: layout_constraintDimensionRatio = "width : height" ...
? ? ? ?- 代碼示例萧朝,實現(xiàn)組件 ?寬:高--2:1
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??簡要如上岔留,詳見官文
https://developer.android.com/reference/android/support/constraint/ConstraintLayout.html