ConstraintLayout 學習筆記

如何閱讀 xml 屬性

與 Relativelayout 不同掖桦,ConstrainLayout 的屬性需要同時說明需要怎么操作自己與目標控件达舒,例如:layout_constraintLeft_toLeftOf 指自身左邊緣與目標控件左邊緣對齊

從此 match_parent 是故人

ConstraintLayout 里不再使用 match_parent疲憋,想要鋪滿屏幕俘种,只能設(shè)置寬度為 0使鹅,并添加左右邊緣與父容器的約束茎用。(** 想要實現(xiàn) match_parent的效果遣总,切記要設(shè)置該方向大小為 0dp **)

android:layout_width="0dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

穿了馬甲的 LinearLayout

線性布局的 weight 屬性可以輕松實現(xiàn)等分操作。在 ConstraintLayout 里你也可以實現(xiàn)類似的功能:

app:layout_constraintHorizontal_bias=".3" //數(shù)值范圍:0~1

如果控件已約束了左右邊緣且定義了 bias 為 0.3轨功,則意味著控件與左邊緣的距離占控件左右邊緣間距的 30%旭斥,如圖:

bias

甚至想要實現(xiàn) LinearLayout 的 weight=1 等分操作(例如水平方向上等分)也很簡單,每個相鄰控件互為約束并設(shè)置 width=0dp 即可古涧。這樣其實就組成了鏈(chaining)垂券。

像上面說到的,設(shè)置 width=0羡滑,且控件之間兩兩互相約束菇爪,即可實現(xiàn)水平方向等分卒暂。此時還可以給控件設(shè)置 layout_constraintHorizontal_weight 屬性,該屬性與 LinearLayout 中的 weight 類似娄帖。

鏈條頭部的屬性

水平鏈的最左邊也祠,垂直鏈的最上邊稱之為頭部,鏈的頭部可以設(shè)置鏈的屬性:

app:layout_constraintHorizontal_chainStyle="spread" 

app:layout_constraintVertical_chainStyle="packed"

  • spread 默認屬性近速,平均分布
  • spread_inside 首尾無間距
  • packed 控件間無間距诈嘿,可以同時搭配 layout_constraintHorizontal_bias 屬性控制與父容器的間距

各屬性值的樣式如下:

各屬性樣式
各屬性樣式

厲害了,還能設(shè)寬高比

app:layout_constraintDimensionRatio="1:1" //寬:高

該屬性起作用的前提是寬或高至少有一個設(shè)為 0dp削葱,設(shè)為 0dp 的邊即為隨比例縮放的邊奖亚。
舉個栗子:

 <TextView
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="1:1"/>

該文本框在隨著內(nèi)容文字的增加,寬度會越來越大析砸,一旦設(shè)定了寬高比為1昔字,則在寬度增大時高度也會等比增大,一直保持在寬高比1:1首繁。

寬高比還有另外的妙用作郭,比如一個控件左右邊緣已存在與父容器約束,且同時將寬高都設(shè)為 0dp弦疮,便得到水平方向上鋪滿屏幕的效果夹攒,如圖:

寬高均設(shè)為0

指示線 Guideline

指示線不會被繪制到 UI 中,所以放心大膽地用胁塞。Guideline 的一些屬性:

  <android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline"
    app:layout_constraintGuide_percent="0.5" //設(shè)置位置比例
    android:orientation="vertical"/> //不注明該屬性咏尝,則默認是水平方向


    app:layout_constraintGuide_begin="30dp" //設(shè)置與頭部邊距
    app:layout_constraintGuide_end="30dp" // 設(shè)置與尾部邊距

其他

  • layout_goneMarginLeft 屬性,當有約束關(guān)系的控件被置為 gone 狀態(tài)時啸罢,可以通過設(shè)置該屬性來控制間距

動畫

[譯]Constraint Layout 動畫 |動態(tài) Constraint |用 Java 實現(xiàn)的 UI(這到底是什么)[第三部分]

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末编检,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子扰才,更是在濱河造成了極大的恐慌允懂,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,265評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件训桶,死亡現(xiàn)場離奇詭異累驮,居然都是意外死亡酣倾,警方通過查閱死者的電腦和手機舵揭,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,078評論 2 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來躁锡,“玉大人午绳,你說我怎么就攤上這事∮持” “怎么了拦焚?”我有些...
    開封第一講書人閱讀 156,852評論 0 347
  • 文/不壞的土叔 我叫張陵蜡坊,是天一觀的道長。 經(jīng)常有香客問我赎败,道長秕衙,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,408評論 1 283
  • 正文 為了忘掉前任僵刮,我火速辦了婚禮据忘,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘搞糕。我一直安慰自己勇吊,他們只是感情好,可當我...
    茶點故事閱讀 65,445評論 5 384
  • 文/花漫 我一把揭開白布窍仰。 她就那樣靜靜地躺著汉规,像睡著了一般。 火紅的嫁衣襯著肌膚如雪驹吮。 梳的紋絲不亂的頭發(fā)上针史,一...
    開封第一講書人閱讀 49,772評論 1 290
  • 那天,我揣著相機與錄音碟狞,去河邊找鬼悟民。 笑死,一個胖子當著我的面吹牛篷就,可吹牛的內(nèi)容都是我干的射亏。 我是一名探鬼主播,決...
    沈念sama閱讀 38,921評論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼竭业,長吁一口氣:“原來是場噩夢啊……” “哼智润!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起未辆,我...
    開封第一講書人閱讀 37,688評論 0 266
  • 序言:老撾萬榮一對情侶失蹤窟绷,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后咐柜,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體兼蜈,經(jīng)...
    沈念sama閱讀 44,130評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,467評論 2 325
  • 正文 我和宋清朗相戀三年拙友,在試婚紗的時候發(fā)現(xiàn)自己被綠了为狸。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,617評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡遗契,死狀恐怖辐棒,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤漾根,帶...
    沈念sama閱讀 34,276評論 4 329
  • 正文 年R本政府宣布泰涂,位于F島的核電站,受9級特大地震影響辐怕,放射性物質(zhì)發(fā)生泄漏逼蒙。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,882評論 3 312
  • 文/蒙蒙 一寄疏、第九天 我趴在偏房一處隱蔽的房頂上張望其做。 院中可真熱鬧,春花似錦赁还、人聲如沸妖泄。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,740評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蹈胡。三九已至,卻和暖如春朋蔫,著一層夾襖步出監(jiān)牢的瞬間罚渐,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,967評論 1 265
  • 我被黑心中介騙來泰國打工驯妄, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留荷并,地道東北人。 一個月前我還...
    沈念sama閱讀 46,315評論 2 360
  • 正文 我出身青樓青扔,卻偏偏與公主長得像源织,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子微猖,可洞房花燭夜當晚...
    茶點故事閱讀 43,486評論 2 348

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