官方自適應新布局ConstraintLayout

寫在前面的話:

谷歌在2016年自己研發的類似于IOS約束的布局,可以很好的完成自定義的布局控件的適配,現如今2K甚至是4K屏的出現,導致很多手機應用的開發受到適配上的限制,但ConstraintLayout就是為簡化手機適配,減少程序員使用dimens文件造成app體積增大以及程序員自己代碼量的增多。現市面上的博文都是根據 “拖拉彈拽” 的方式來使用ConstraintLayout,而真正意義上的程序員是不需要鼠標進行操作的,所以本篇文章用通俗易懂的方式,列出代碼相關的屬性,來探究此布局的用法。

1、ConstraintLayout詳解:

1.1、ConstrainLayout基本理解:
在日常開發過程中我們總會碰到一個名叫RelativeLayout布局,它就是我們ConstrainLayout理解的重大核心,我們可以就將ConstraintLayout理解為可自適應,多功能的RelativeLayout。
1.2、ConstrainLayout中,子view的布局方式:
在相對布局里面,我們經常做的事情就是使用這樣的屬性:“android:layout_alignParentXXX”,這里XXX有常見的bottom,top,left,right,分別配置子item對于RelativeLayout的里面的位置。而ConstrainLayout里面將此類型的屬性升級為自帶的“app:layout_constraintXXXtoXXX”屬性,這里方便記錄便自己錄入了一個表格:

RelativeLayout與ConstraintLayout子控件對父控件相同功能的屬性列舉.png
根據這表格我們可以清楚的看到ConstraintLayout與RelativeLayout的相似性,我們完全可以用理解RelativeLayout的方式來理解我們的ConstraintLayout。

2、ConstraintLayout下子view屬性詳解:

這個詳細可以參考谷歌官方API文檔,這里貼上鏈接:https://developer.android.google.cn/reference/android/support/constraint/package-summary.html
這里博主簡單的抽取其中比較重要以及經常使用的屬性:
2.1、方位屬性
從上面的四大屬性的衍生,于是有以下圖示:

基礎view的邊緣說明.png
根據view的邊緣屬性,我們在ConstraintLayout中我們兩個子view的相關性如以下圖示:
兩子view在ContraintLayout中對應關系.png

2.2、子view坐標系
無論從哪個方面來說,坐標系是理解一個view在viewgroup上的一個比較準確的方式。說到這里,我們還記得LinearLayout的weightSum屬性嗎?它能很好的適配線性布局下的某個子控件,在ConstraintLayout中我們也有相類似的子view屬性,來達到這樣的布局適配效果,其展示方式如圖所示:
子view坐標系建立.png
根據這樣的屬性,我們可以完全了解子View在ConstraintLayout里面所處的left與top權重,構成一個以view開始繪制的點的坐標系,這樣就很好的實現了子view的整體權重適配。

2.3、適配屬性之goneMargin
本屬性比較特殊,是一個自定義控制的屬性,即如圖所示:

goneMargin的效果.png
這里選取了最常見的直觀效果,還有很多類似屬性如“layout_goneMarginRight,layout_goneMarginTop等”各位看官們可以自行測試實踐。

2.4、寬高比適配
在ConstraintLayout中,子view可以根據自己的屬性來顯示自定義的方式。“android:layout_width”,"android:layout_height"這兩個屬性很關鍵,在設置為"warp_content"時,子view會根據屏幕的尺寸,適配全部屏幕。而當設置為"0dp"的時候,就是為自定義weight的時候,這和LinearLayout使用weight進行適配相同。以下就是關于設置0dp的時候的說明圖:

子view寬高比適配.png

這里的“layout_constraintDimensionRatio”是個特殊的屬性,在這里指明的"W,1:2"<w一定大寫>的值,是明確指代類似圖上的margin與view本身的1/2的比例值,如果沒有寫對于父控件的相關約束屬性,那么就是兩邊的margin疊加起來,子view就往某一邊伸縮。同樣,限定值為"H, 1:2"是Height變化伸縮的效果。這樣一個子view就會根據ConstraintLayout本身而去完成比例適配,相當方便。

結尾:以上就是我花一天的時間去研究的新控件相關的屬性,關于此控件還有很多種屬性值得研究,期待后期研究深入了,寫一個補充的文章,現在ConstraintLayout版本也才1.0.2,我相信谷歌在之后還會改善此控件的源碼來更方便我們開發者使用。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容