FlexboxLayout幫助您完成聰明的UI佈局

去年我們在 Google I/O 上釋出了 ConstraintLayout，使得您在構建複雜佈局的同時能夠讓檢視層級得到精簡。它在 Android Studio 的 Visual Layout Editor 中也同樣可以使用。 

與此同時，我們開源了 FlexboxLayout，使得 Android 裡的 CSS Flexible Layout 模組也能擁有同樣強大的功能。下面我們介紹幾個例子來說明一下 FlexboxLayout 的得力之處。FlexboxLayout 可以理解為高階的 LinearLayout ，因為這兩個佈局都將其子檢視按序排列。二者之間的重要差異在於 FlexboxLayout 具有 “換行” 的特性。 

這意味著，如果您加入 flexWrap=“wrap" 屬性，且當前行中剩餘空間不夠的話，FlexboxLayout 就會將檢視放進新行中，如下圖所示：

一種佈局適配各種螢幕尺寸

鑑於這一特性，讓我們想象一個場景：您想要按序放置檢視，但當可用空間改變時（由於不同的裝置、螢幕方向更改或由於進入多視窗模式導致的介面重繪等因素），便不得不把它們移動到新行。

△ Nexus 5X 裝置：縱向檢視

△ Nexus 5X 裝置：橫向檢視

△ Pixel C 裝置：多視窗模式，分隔線在左邊

△ Pixel C 裝置：多視窗模式，分隔線在中間

△ Pixel C 裝置：多視窗模式，分隔線在右邊

如果您使用傳統的 LinearLayout 或 RelativeLayout 等佈局方式，需要定義多個 DP-bucket 佈局（例如 layout-600dp，layout-720dp，layout-1020dp）來處理各種螢幕尺寸。但上面的對話方塊只使用了一個 FlexboxLayout 就實現了。 

這個示例使用了上面提到的 flexWrap=“wrap" 屬性：

這樣子檢視會自動換到新行，而不會從父級容器中溢位，如下圖所示：

另外一個需要強調的做法就是將 layout_flexGrow 屬性設定到一個獨立的子項上。這有助於在有可用空間剩餘時優化最終佈局的觀感。layout_flexGrow 屬性的運作原理類似於 LinearLayout 中的 layout_weight 屬性。這意味著 FlexboxLayout 將根據 layout_flexGrow 設定的值，為同一行中的每個子項分配剩餘空間 。 

在下面的示例中，它假設每個子項的 layout_flexGrow 屬性的值設為 1，那麼剩餘空間將均勻分配到每個子項。 

與 RecyclerView 結合使用

FlexboxLayout 的另一個優點是，它可以與 RecyclerView 結合使用。隨著最新 alpha 版的釋出，新版 Flexbox 佈局管理器對 RecyclerView 佈局管理器進行了擴充套件，現在您可以用更高效利用記憶體的方式，在可滾動容器中使用 Flexbox 的功能。 

請注意，您現在仍然可以使用 ScrollView 結合 FlexboxLayout 的方式在可滾動容器中實現 flexbox 功能。但是，如果佈局中包含的專案數量過大，您可能會遭遇一些故障，甚至出現記憶體不足的情況。因為 FlexboxLayout 在使用者進行滾動操作導致檢視被移出螢幕時不會考慮到檢視迴圈。

一個真實的案例，與 RecyclerView 結合使用對於 Google Photos 、News 這些應用來說十分重要，因為它們都需要處理大量專案，並且專案的種類非常繁多。

在 FlexboxLayout  儲存庫裡有這麼一個示例，RecyclerView 中顯示的每個影象的寬度都不相同，但是通過將 flexWrap 配置設定為 wrap： 

並將每個子項的 flexGrow 設為正值：（如您所見，您可以通過 Flexbox佈局管理器 和  Flexbox 佈局管理器的 LayoutParams 為子項配置屬性，而非從 xml 配置它） 

△ 然後，您便可以看到，無論螢幕方向如何變化，每個影象都恰到好處地鑲嵌在佈局內。

想親自動手試試？

您可以馬上點選 “閱讀原文” 檢視有關其他屬性的完整文件，以根據您的需要構建靈活的佈局。我們非常樂意聽取您的反饋，如果您發現任何問題或想要我們實現一些新功能，歡迎您隨時在 GitHub 上向我們提出來。 

推薦閱讀：

首發 | Google Play 開發者 FAQ 第一期

我們在GDC上公佈了一些好訊息

全新發布頁面讓您自信掌控應用上架和更新

領取《出海寶典》，邁出成功出海的第一步!

3.17 Google Doodle: 2017 年聖帕特里克節