FlexboxLayout出來已經(jīng)很久啦堂油,大家對他的用法應(yīng)該了解的也差不多啦闺骚!如果有不了解的可以看看《Google 開源的 Android 排版庫:FlexboxLayout》和《Flex 布局教程:語法篇》這兩篇文章然后結(jié)合源代碼和例子來分析,今天我這里要說的是一些使用過程中遇到的問題和個人想法麻削!
開始使用前我們需要在build.gradle添加依賴包
dependencies {
compile 'com.google.android:flexbox:0.2.2'
}
需要注意的是我們的V7包的版本需要是23.3.0以上蒸痹,否則會導(dǎo)致編譯出錯 eg:
compile 'com.android.support:appcompat-v7:23.3.0'
好了,現(xiàn)在可以在布局文件中使用了呛哟!
正所謂適合自己的才是好的叠荠,F(xiàn)lexboxLayout的出現(xiàn)并不是去取代LinearLayout或RelativeLayout,而是為了在一些復(fù)雜的布局中簡化他的嵌套層次扫责,比如我們來看個例子榛鼎,
RelativeLayout編寫
<RelativeLayout android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/iv_ad_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ad1"/>
<View
android:id="@+id/line_1"
android:layout_width="1px"
android:layout_height="match_parent"
android:layout_alignBottom="@id/iv_ad_1"
android:layout_toRightOf="@id/iv_ad_1"
android:background="@android:color/darker_gray"/>
<ImageView
android:id="@+id/iv_ad_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/line_1"
android:src="@mipmap/ad2"/>
<View
android:id="@+id/line_2"
android:layout_width="match_parent"
android:layout_height="1px"
android:layout_below="@id/iv_ad_2"
android:layout_toRightOf="@id/line_1"
android:background="@android:color/darker_gray"/>
<ImageView
android:id="@+id/iv_ad_3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/line_2"
android:layout_toRightOf="@id/line_1"
android:src="@mipmap/ad3"/>
<View
android:id="@+id/line_3"
android:layout_width="1px"
android:layout_height="match_parent"
android:layout_alignBottom="@id/iv_ad_1"
android:layout_below="@id/line_2"
android:layout_toRightOf="@id/iv_ad_3"
android:background="@android:color/darker_gray"/>
<ImageView
android:id="@+id/iv_ad_4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/line_2"
android:layout_toRightOf="@id/line_3"
android:src="@mipmap/ad4"/>
</RelativeLayout>
LinearLayout編寫
<LinearLayout android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ad1"/>
<View android:layout_width="1px"
android:layout_height="match_parent"
android:background="@android:color/darker_gray"/>
</LinearLayout>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ad2"/>
<View android:layout_width="match_parent"
android:layout_height="1px"
android:background="@android:color/darker_gray"/>
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ad3"/>
<View android:layout_width="1px"
android:layout_height="match_parent"
android:background="@android:color/darker_gray"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ad4"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
FlexboxLayout
<com.google.android.flexbox.FlexboxLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="190dp"
android:orientation="vertical"
app:flexWrap="nowrap">
<com.google.android.flexbox.FlexboxLayout android:layout_width="wrap_content"
android:layout_height="match_parent"
app:layout_flexShrink="0">
<ImageView android:layout_width="wrap_content"
android:layout_height="match_parent"
android:src="@mipmap/ad1"
/>
<View android:layout_width="1px"
android:layout_height="match_parent"
android:background="@android:color/darker_gray"/>
</com.google.android.flexbox.FlexboxLayout>
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:alignItems="flex_start"
app:flexWrap="wrap">
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ad2"
app:layout_flexBasisPercent="100%"/>
<View android:layout_width="match_parent"
android:layout_height="1px"
android:background="@android:color/darker_gray"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ad3"
app:layout_flexBasisPercent="50%"/>
<View android:layout_width="1px"
android:layout_height="wrap_content"
android:background="@android:color/darker_gray"/>
<ImageView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ad4"
app:layout_flexBasisPercent="49%"/>
</com.google.android.flexbox.FlexboxLayout>
</com.google.android.flexbox.FlexboxLayout>
總結(jié)
LinearLayout:在這個布局時,很直觀鳖孤,布局起來得心應(yīng)手者娱,不過他的嵌套太深,最底層的ImageView已經(jīng)被嵌套了3層苏揣,這對于android布局是有限制的缺點(diǎn)來說是很被動的
RelativeLayout:只有一層嵌套黄鳍,比較直觀,但是由于是相對平匈,所以里面id定義就必不可少了框沟,而且你的相對論要了解一點(diǎn)。而最近Google推薦的DataBinding貌似對已Id的定義已經(jīng)不在關(guān)注啦增炭!
FlexboxLayout:這個嵌套到不多忍燥,尼瑪里面的分割線導(dǎo)致他的高度要寫死。而且分割線存在也讓這個布局更加難以理解和編寫