FlexboxLayout真的好用?<1>

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)致他的高度要寫死。而且分割線存在也讓這個布局更加難以理解和編寫

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末隙姿,一起剝皮案震驚了整個濱河市梅垄,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌输玷,老刑警劉巖队丝,帶你破解...
    沈念sama閱讀 219,427評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異饲嗽,居然都是意外死亡炭玫,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,551評論 3 395
  • 文/潘曉璐 我一進(jìn)店門貌虾,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人裙犹,你說我怎么就攤上這事尽狠∠魏” “怎么了?”我有些...
    開封第一講書人閱讀 165,747評論 0 356
  • 文/不壞的土叔 我叫張陵袄膏,是天一觀的道長践图。 經(jīng)常有香客問我,道長沉馆,這世上最難降的妖魔是什么码党? 我笑而不...
    開封第一講書人閱讀 58,939評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮斥黑,結(jié)果婚禮上揖盘,老公的妹妹穿的比我還像新娘。我一直安慰自己锌奴,他們只是感情好兽狭,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,955評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著鹿蜀,像睡著了一般箕慧。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上茴恰,一...
    開封第一講書人閱讀 51,737評論 1 305
  • 那天颠焦,我揣著相機(jī)與錄音,去河邊找鬼往枣。 笑死蒸健,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的婉商。 我是一名探鬼主播似忧,決...
    沈念sama閱讀 40,448評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼丈秩!你這毒婦竟也來了盯捌?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,352評論 0 276
  • 序言:老撾萬榮一對情侶失蹤蘑秽,失蹤者是張志新(化名)和其女友劉穎饺著,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體肠牲,經(jīng)...
    沈念sama閱讀 45,834評論 1 317
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡幼衰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,992評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了缀雳。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片渡嚣。...
    茶點(diǎn)故事閱讀 40,133評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出识椰,到底是詐尸還是另有隱情绝葡,我是刑警寧澤,帶...
    沈念sama閱讀 35,815評論 5 346
  • 正文 年R本政府宣布腹鹉,位于F島的核電站藏畅,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏功咒。R本人自食惡果不足惜愉阎,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,477評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望力奋。 院中可真熱鬧榜旦,春花似錦、人聲如沸刊侯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,022評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽滨彻。三九已至藕届,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間亭饵,已是汗流浹背休偶。 一陣腳步聲響...
    開封第一講書人閱讀 33,147評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留辜羊,地道東北人踏兜。 一個月前我還...
    沈念sama閱讀 48,398評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像八秃,于是被迫代替她去往敵國和親碱妆。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,077評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,185評論 25 707
  • 今天昔驱,剛涉足社會不久的弟弟問我疹尾,他想賺錢,要高薪骤肛,想辭掉現(xiàn)在這個份工作纳本,不怕辛苦,找一份高薪的工作……(其實(shí)他正處...
    龍兒煙閱讀 289評論 0 0
  • 很多時候巾腕,我們抱怨一件事情無法完成是因為缺乏某種既定因素面睛。這些因素或紛繁復(fù)雜或簡單平凡,然而卻會成為阻礙我們前進(jìn)的...
    木每木木閱讀 259評論 0 0
  • 我最近后知后覺地沉迷“舉重妖精金福珠”無法自拔啊啊啊回铛!老夫的少女心死灰復(fù)燃并熊熊燃燒著啊啊肮纷肌!我的小姐姐茵肃!我的南朋...
    喂喂Wiing閱讀 819評論 2 1
  • 每個人都不同腔长,都在亮著,光很弱验残,但抬頭就看得到捞附。
    毛煜翔閱讀 189評論 0 1