ConstraintLayout筆錄

定義

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值

圖x

? ?代碼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值


圖y

? 代碼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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市检柬,隨后出現(xiàn)的幾起案子献联,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,386評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件里逆,死亡現(xiàn)場離奇詭異进胯,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)原押,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,142評論 3 394
  • 文/潘曉璐 我一進(jìn)店門胁镐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人诸衔,你說我怎么就攤上這事希停。” “怎么了署隘?”我有些...
    開封第一講書人閱讀 164,704評論 0 353
  • 文/不壞的土叔 我叫張陵宠能,是天一觀的道長。 經(jīng)常有香客問我磁餐,道長违崇,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,702評論 1 294
  • 正文 為了忘掉前任诊霹,我火速辦了婚禮羞延,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘脾还。我一直安慰自己伴箩,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,716評論 6 392
  • 文/花漫 我一把揭開白布鄙漏。 她就那樣靜靜地躺著嗤谚,像睡著了一般。 火紅的嫁衣襯著肌膚如雪怔蚌。 梳的紋絲不亂的頭發(fā)上巩步,一...
    開封第一講書人閱讀 51,573評論 1 305
  • 那天,我揣著相機(jī)與錄音桦踊,去河邊找鬼椅野。 笑死,一個胖子當(dāng)著我的面吹牛籍胯,可吹牛的內(nèi)容都是我干的竟闪。 我是一名探鬼主播,決...
    沈念sama閱讀 40,314評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼杖狼,長吁一口氣:“原來是場噩夢啊……” “哼炼蛤!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起本刽,我...
    開封第一講書人閱讀 39,230評論 0 276
  • 序言:老撾萬榮一對情侶失蹤鲸湃,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后子寓,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體暗挑,經(jīng)...
    沈念sama閱讀 45,680評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,873評論 3 336
  • 正文 我和宋清朗相戀三年斜友,在試婚紗的時候發(fā)現(xiàn)自己被綠了炸裆。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,991評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡鲜屏,死狀恐怖烹看,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情洛史,我是刑警寧澤惯殊,帶...
    沈念sama閱讀 35,706評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站也殖,受9級特大地震影響土思,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜忆嗜,卻給世界環(huán)境...
    茶點故事閱讀 41,329評論 3 330
  • 文/蒙蒙 一己儒、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧捆毫,春花似錦闪湾、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,910評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至濒憋,卻和暖如春娘纷,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背跋炕。 一陣腳步聲響...
    開封第一講書人閱讀 33,038評論 1 270
  • 我被黑心中介騙來泰國打工赖晶, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人辐烂。 一個月前我還...
    沈念sama閱讀 48,158評論 3 370
  • 正文 我出身青樓遏插,卻偏偏與公主長得像,于是被迫代替她去往敵國和親纠修。 傳聞我的和親對象是個殘疾皇子胳嘲,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,941評論 2 355

推薦閱讀更多精彩內(nèi)容