constraintlayout2.0
ConstraintLayout2.0新增了一個helper類, 里面為我們定義了兩個便于開發(fā)的類, Flow和Layer, 懷著激動的心情,來看看吧~
Flow (VirtualLayout)
某個開發(fā)需求的UI樣式
解釋: 開發(fā)過程中,我們最碰到的可能是這種UI樣式, 在個人中心或者哪兒, 要擺上這么多個icon,文字等, 傳統(tǒng)的寫法, 用Relative, 或者Linear都會嵌套, 復(fù)制很多無腦的代碼, 在2.0中,我們使用一個簡單的view就可以一步搞定, 再也不用想著怎么擺放的相互布局啦
上代碼:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.constraint.helper.Flow
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:flow_wrapMode="aligned"
android:padding="20.0dp"
android:layout_width="0dp"
app:flow_verticalGap="20.0dp"
app:flow_horizontalGap="20.0dp"
app:constraint_referenced_ids="tv1,tv2,tv3,tv4,tv5"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tv1"
android:text="Hello World!"
style="@style/text_stytle"/>
<TextView
android:id="@+id/tv4"
android:text="Hello World!"
style="@style/text_stytle"/>
<TextView
android:id="@+id/tv2"
android:text="Hello World!"
style="@style/text_stytle"/>
<TextView
android:id="@+id/tv3"
android:text="Hello World!"
style="@style/text_stytle"/>
<TextView
android:id="@+id/tv5"
android:text="Hello World!"
style="@style/text_stytle"/>
</android.support.constraint.ConstraintLayout>
寫出來的效果
image.png
關(guān)鍵的一個屬性: app:flow_wrapMode
有三個值, 分別是none, aligned,chain
none:把a(bǔ)pp:constraint_referenced_ids組成一天鏈?zhǔn)? 一直向后排序, 元素比較少,界面較為簡單時可以使用
none
aligned: 以對齊的方式, 自動折行排序, 上面代碼就是使用的這種方式
aligned
chain: 自動折行, 但是不會對齊
chain
優(yōu)勢:
- 減少布局的嵌套, flow和排序的view是在統(tǒng)一層級view, 不需要嵌套分分搞定
- 減少了排列view之間布局的相互位置依賴關(guān)系, 可以隨意變換位置, 只需要更改app:constraint_referenced_ids中的順序即可
- 設(shè)置padding, 背景等, 和viewgroup具有相同的屬性功能
補(bǔ)充: 近期發(fā)現(xiàn)一個問題, 當(dāng)元素的寬度不是固定大小時, wrap_content的情況下, 不管是使用哪種方式,元素之間的間隔無法做到相同, 所以感覺這個屬性只有在固定寬度時使用較佳
未完待續(xù) ~~~~
