谷歌推出Android 響應式布局控件 FlexboxLayout -彈性盒子模型

今天github 排行榜上突然出現了 谷歌最新推出的Android 最新控件FlexboxLayout 。

FlexboxLayout究竟是什麼東西呢？

fexbox 也稱為彈性盒子模型 或伸縮盒子模型，廣泛用於前端開發，做過前端 web 的都知道Bootstrap 中有一套強大的 CSS Grid網格樣式。Bootstrap 的出現 大大提高了前端開發的效率，並且引領了響應式布局、跨平台開發的潮流。

FlexboxLayout 就是類似於 bootstrap 中的Grid柵格系統但又不相同的強大控件,其實更接近於前端開發中彈性布局

（flexible box）模塊（目前是w3c候選的推薦）的一個布局控件。

用人話說，就是內容排列可以自動伸縮的彈性控件

先上幾張谷歌示例程序的截圖

FlexboxLayout 的出現有可能對Android 屏幕適配產生重大的影響。這種布局方式更加靈活。我們看一下 他的基本用法

<com.google.android.flexbox.flexboxlayout 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:id="@+id/flexbox_layout" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" app:flexwrap="wrap" app:alignitems="flex_start" app:aligncontent="flex_start" app:flexdirection="column" app:justifycontent="flex_end" tools:showin="@layout/activity_main"> <textview android:id="@+id/textview1" android:layout_width="@dimen/flex_item_length2" android:layout_height="@dimen/flex_item_length" android:text="@string/one" style="@style/FlexItem"> <textview android:id="@+id/textview2" android:layout_width="@dimen/flex_item_length3" android:layout_height="@dimen/flex_item_length" android:text="@string/two" style="@style/FlexItem"> <textview android:id="@+id/textview3" android:layout_width="@dimen/flex_item_length" android:layout_height="@dimen/flex_item_length" android:text="@string/three" style="@style/FlexItem"> </textview></textview></textview></com.google.android.flexbox.flexboxlayout>

從代碼中我們可以發現 這個控件多出了幾個屬性

app:flexWrap="wrap" // 子控件是否自動換行

app:alignItems="flex_start" // 子控件在其所在行/列中的對齊方式

app:alignContent="flex_start" //內容的對齊方式 從頭對齊還是從尾對齊

app:flexDirection="column" //子控件排列方式，是列或行（可倒序排列）

app:justifyContent="flex_end" //子控件行列時的對齊方式，中間或兩端

從谷歌提示的示例來看 FlexboxLayout 非常強大， 更多優點還要大家去發現