對(duì)于學(xué)習(xí)React Native或者前端的同學(xué)肯定對(duì)Flexbox 的有所了解朵你,因?yàn)檫@是前端領(lǐng)域CSS的一種布局方案,現(xiàn)在google也開源了類似前端Flexbox的項(xiàng)目叫Flexboxlayout外恕,這樣android也可以用Flexboxlayout實(shí)現(xiàn)類似前端Flexbox的布局。
首先Flexboxlayout有5大布局屬性分別是flexDirection,flexWrap,justifyContent ,alignItems ,alignContent,這5個(gè)布局屬性又對(duì)應(yīng)著不同參數(shù)以實(shí)現(xiàn)不用的布局效果篱蝇。具體如下:
1.flexDirection 屬性決定主軸的方向(即項(xiàng)目的排列方向)催式。
對(duì)應(yīng)的參數(shù)和效果圖如下:
- row(默認(rèn)值):主軸為水平方向,起點(diǎn)在左端呜舒。
- row-reverse:主軸為水平方向锭汛,起點(diǎn)在右端。
- column:主軸為垂直方向袭蝗,起點(diǎn)在上沿唤殴。
- column-reverse:主軸為垂直方向,起點(diǎn)在下沿到腥。
實(shí)例代碼如下,而我們要改的是app:flexDirection
來實(shí)現(xiàn)不同的效果朵逝。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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="match_parent">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexDirection="row_reverse">
<TextView
android:id="@+id/textview1"
android:layout_width="match_parent"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color1"
android:text="textview1"/>
<TextView
android:id="@+id/textview2"
android:layout_width="match_parent"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color2"
android:text="textview2"/>
<TextView
android:id="@+id/textview3"
android:layout_width="match_parent"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color3"
android:text="textview3"/>
<TextView
android:id="@+id/textview4"
android:layout_width="match_parent"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color4"
android:text="textview4"/>
<TextView
android:id="@+id/textview5"
android:layout_width="match_parent"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color5"
android:text="textview5"/>
<TextView
android:id="@+id/textview6"
android:layout_width="match_parent"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color5"
android:text="textview6"/>
</com.google.android.flexbox.FlexboxLayout>
</RelativeLayout>
1.當(dāng)flexDirecition的參數(shù)為column時(shí),即app:flexDirection="column":
2.當(dāng)flexDirecition的參數(shù)為column_reverse時(shí),即app:flexDirection="column_reverse":
3.當(dāng)flexDirecition的參數(shù)為row時(shí),即app:flexDirection="row":
4.當(dāng)flexDirecition的參數(shù)為row_reverse時(shí),即app:flexDirection="row_reverse":
2.flexWrap在默認(rèn)情況下 Flex 跟 LinearLayout 一樣,都是不帶換行排列的乡范,但是flexWrap屬性可以支持換行排列配名。對(duì)應(yīng)的參數(shù)和效果圖如下:
- nowrap:不換行
- wrap:按正常方向換行
- wrap-reverse:按反方向換行
實(shí)例代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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="match_parent">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexWrap="wrap">
<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color1"
android:text="textview1"/>
<TextView
android:id="@+id/textview2"
android:layout_width="100dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color2"
android:text="textview2"/>
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color3"
android:text="textview3"/>
<TextView
android:id="@+id/textview4"
android:layout_width="150dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color4"
android:text="textview4"/>
<TextView
android:id="@+id/textview5"
android:layout_width="100dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color5"
android:text="textview5"/>
<TextView
android:id="@+id/textview6"
android:layout_width="80dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color5"
android:text="textview6"/>
</com.google.android.flexbox.FlexboxLayout>
</RelativeLayout>
我們通過修改app:flexWrap="wrap"
來實(shí)現(xiàn)不同的效果
1.當(dāng)flexWrap的參數(shù)為wrap時(shí),即app:flexWrap="wrap":
2.當(dāng)flexWrap的參數(shù)為nowrap時(shí),即app:flexWrap="nowrap":
3.當(dāng)flexWrap的參數(shù)為wrap_reverse時(shí),即app:flexWrap="wrap_reverse":
3.justifyContent屬性定義了項(xiàng)目在主軸上的對(duì)齊方式〗荆看解釋有點(diǎn)含糊渠脉,沒關(guān)系,待會(huì)效果圖一目了然瓶佳,justifyContent對(duì)應(yīng)的參數(shù)和含義如下:
- flex_start(默認(rèn)值):左對(duì)齊
- flex-end:右對(duì)齊
- center: 居中
- space-between:兩端對(duì)齊芋膘,項(xiàng)目之間的間隔都相等
- space-around:每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以霸饲,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍索赏。
實(shí)例代碼如下
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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="match_parent">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:justifyContent="flex_start">
<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color1"
android:text="textview1"/>
<TextView
android:id="@+id/textview2"
android:layout_width="100dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color2"
android:text="textview2"/>
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color3"
android:text="textview3"/>
</com.google.android.flexbox.FlexboxLayout>
</RelativeLayout>
1.當(dāng)justifyContent的參數(shù)為flex_start時(shí),即app:justifyContent="flex_start":
2.當(dāng)justifyContent的參數(shù)為flex_end時(shí),即app:justifyContent="flex_end":
3.當(dāng)justifyContent的參數(shù)為center時(shí),即app:justifyContent="center":
4.當(dāng)justifyContent的參數(shù)為space_around時(shí),即app:justifyContent="space_around":
5.當(dāng)justifyContent的參數(shù)為space-between時(shí),即app:justifyContent="space-between":
4.alignItems屬性定義項(xiàng)目在副軸軸上如何對(duì)齊。(一般默認(rèn)一般默認(rèn)情況下贴彼,主軸是從左往右的直線,而對(duì)應(yīng)的副軸就是從上忘下)埃儿,alignItems對(duì)應(yīng)的參數(shù)和含義如下:
- flex-start:交叉軸的起點(diǎn)對(duì)齊器仗。
- flex-end:交叉軸的終點(diǎn)對(duì)齊。
- center:交叉軸的中點(diǎn)對(duì)齊。
- baseline: 項(xiàng)目的第一行文字的基線對(duì)齊精钮。
- stretch(默認(rèn)值):如果項(xiàng)目未設(shè)置高度或設(shè)為auto威鹿,將占滿整個(gè)容器的高度。
實(shí)例代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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="match_parent">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignItems="flex_start">
<TextView
android:id="@+id/textview1"
android:layout_width="80dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color1"
android:text="textview1"/>
<TextView
android:id="@+id/textview2"
android:layout_width="100dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color2"
android:text="textview2"/>
<TextView
android:id="@+id/textview3"
android:layout_width="80dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color3"
android:text="textview3"/>
</com.google.android.flexbox.FlexboxLayout>
</RelativeLayout>
1.當(dāng)alignItems的參數(shù)為stretch時(shí),即app:alignItems="stretch":
2.當(dāng)alignItems的參數(shù)為flex_start時(shí),即app:alignItems="flex_start":
3.當(dāng)alignItems的參數(shù)為flex_end時(shí),即app:alignItems="flex_end":
4.當(dāng)alignItems的參數(shù)為center時(shí),即app:alignItems="center":
5.當(dāng)alignItems的參數(shù)為baseline時(shí),即app:alignItems="baseline":
5.alignContent屬性定義了多根軸線的對(duì)齊方式轨香。如果項(xiàng)目只有一根軸線忽你,該屬性不起作用,其屬性如下:
- flex-start:與交叉軸的起點(diǎn)對(duì)齊臂容。
- flex-end:與交叉軸的終點(diǎn)對(duì)齊科雳。
- center:與交叉軸的中點(diǎn)對(duì)齊。
- space-between:與交叉軸兩端對(duì)齊脓杉,軸線之間的間隔平均分布
- space-around:每根軸線兩側(cè)的間隔都相等糟秘。所以,軸線之間的間隔比軸線與邊框的間隔大一倍.
- stretch(默認(rèn)值):軸線占滿整個(gè)交叉軸球散。
實(shí)例代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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="match_parent">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexbox_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:flexWrap="wrap"
app:alignContent="flex_start">
<TextView
android:id="@+id/textview1"
android:layout_width="50dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color1"
android:text="textview1"/>
<TextView
android:id="@+id/textview2"
android:layout_width="100dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color2"
android:text="textview2"/>
<TextView
android:id="@+id/textview3"
android:layout_width="90dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color3"
android:text="textview3"/>
<TextView
android:id="@+id/textview4"
android:layout_width="60dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color1"
android:text="textview4"/>
<TextView
android:id="@+id/textview5"
android:layout_width="100dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color2"
android:text="textview5"/>
<TextView
android:id="@+id/textview6"
android:layout_width="90dp"
android:layout_height="80dp"
android:gravity="center"
android:background="@color/color3"
android:text="textview6"/>
</com.google.android.flexbox.FlexboxLayout>
</RelativeLayout>
1.當(dāng)alignContent的參數(shù)為stretch時(shí),即app:alignContent="stretch":
2.當(dāng)alignContent的參數(shù)為flex_start時(shí),即app:alignContent="flex_start":
3.當(dāng)alignContent的參數(shù)為flex_end時(shí),即app:alignContent="flex_end":
4.當(dāng)alignContent的參數(shù)為center時(shí),即app:alignContent="center":
5.當(dāng)alignContent的參數(shù)為space_around時(shí),即app:alignContent="space_around":
6.當(dāng)alignContent的參數(shù)為space_between時(shí),即app:alignContent="space_between":
除了這些主要屬性之外尿赚,還有其他的屬性:
- layout_flexGrow(表示元素的權(quán)重屬性)
<com.google.android.flexbox.FlexboxLayout
android:layout_width="300dp"
android:layout_height="wrap_content">
<TextView
android:layout_width="0dp"
android:layout_height="48dp"
android:background="@color/color1"
app:layout_flexGrow="2"/>
<TextView
android:layout_width="0dp"
android:layout_height="48dp"
android:background="@color/color2"
app:layout_flexGrow="1"/>
</com.google.android.flexbox.FlexboxLayout>
2.layout_flexShrink(表示空間不足時(shí)子控件的縮放比例,0表示不縮放)
<com.google.android.flexbox.FlexboxLayout
android:layout_width="300dp"
android:layout_height="wrap_content">
<TextView
id="@+id/text1"
android:layout_width="400dp"
android:layout_height="48dp"
app:layout_flexShrink="2"
android:background="@color/color1"/>
<TextView
id="@+id/text2"
app:layout_flexShrink="1"
android:layout_width="300dp"
android:layout_height="48dp"
android:background="@color/color2"/>
</com.google.android.flexbox.FlexboxLayout>
總的300dp因?yàn)閷挾炔蛔憬堆撸詔ext1就縮小原來的三分之二凌净,text2縮小為原來的三分之一。
3.layout_order(可以控制排列的順序屋讶,負(fù)值在前冰寻,正值災(zāi)后,按照從小到大的順序依次排列)
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="100dp"
android:layout_height="48dp"
app:layout_order="2"
android:text="color1"
android:gravity="center"
android:background="@color/color1"/>
<TextView
android:layout_width="100dp"
android:layout_height="48dp"
app:layout_order="1"
android:text="color2"
android:gravity="center"
android:background="@color/color2"/>
</com.google.android.flexbox.FlexboxLayout>
4.layout_flexBasisPercent(屬性定義了在分配多余空間之前丑婿,子元素占據(jù)的main size主軸空間性雄,瀏覽器根據(jù)這個(gè)屬性,計(jì)算主軸是否有多余空間羹奉。它的默認(rèn)值為auto秒旋,即子元素的本來大小。)
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexWrap="wrap">
<TextView
android:id="@+id/flexbox"
android:layout_width="100dp"
android:layout_height="100dp"
android:text="text1"
android:gravity="center"
android:background="@color/color1"/>
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:text="text2"
android:gravity="center"
app:layout_flexBasisPercent="50%"
android:background="@color/color2"/>
</com.google.android.flexbox.FlexboxLayout>
5.layout_alignSelf(屬性允許單個(gè)子元素有與其他子元素不一樣的對(duì)齊方式诀拭,可覆蓋 alignItems 屬性迁筛。默認(rèn)值為auto,表示繼承父元素的 alignItems 屬性耕挨,如果沒有父元素细卧,則等同于stretch。),其參數(shù)如下:
- auto (default)
- flex_start
- flex_end
- center
- baseline
- stretch
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignItems="flex_start">
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:text="text1"
android:gravity="center"
android:background="@color/color1"/>
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:text="text2"
android:gravity="center"
app:layout_alignSelf="center"
android:background="@color/color2"/>
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:text="text2"
android:gravity="center"
android:background="@color/color3"/>
</com.google.android.flexbox.FlexboxLayout>
最后就是FlexboxLayoutManager筒占,這也是最新FlexBoxLayout新出的功能贪庙,以前我們用流式布局的時(shí)候大部分不自己實(shí)現(xiàn)的話都是用第三方的庫實(shí)現(xiàn),現(xiàn)在有了這個(gè)就可以輕松的實(shí)現(xiàn)流式布局翰苫,并FlexboxLayoutManager
就像LinearLayoutManager等那樣可以用RecyclerView加載止邮,即可以不用一次全部加載又可以輕松加載多條數(shù)據(jù)这橙。使用FlexboxLayoutManager很簡(jiǎn)單,跟一般的布局控制器沒有區(qū)別导披,實(shí)例代碼如下:
RecyclerView recycler_view=......
FlexboxLayoutManager flexboxLayoutManager=new
FlexboxLayoutManager(this);
flexboxLayoutManager.setFlexWrap(FlexWrap.WRAP);
recycler_view.setLayoutManager(flexboxLayoutManager);
mainAdapter=new MainAdapter(this);
recycler_view.setAdapter(mainAdapter);
我們通過FlexboxLayoutManager就可以設(shè)置FlexBoxLayout的各種屬性屈扎,而上面的MainAdapter就是和普通的Adapter沒區(qū)別。