簡介:
-
Flex是 Flexible Box 的縮寫,意爲「彈性佈局」,
-
在前端css樣式中應用甚爲廣泛,之前做過React-Native和微信小程序,頁面佈局大多使用flex彈性佈局,可以在不同屏幕尺寸上提供一致的佈局結構,
可以簡便、完整、響應式地實現各種頁面佈局
今天爲大家打開Android移動端的flex佈局大門–FlexboxLayout,在android中我們經常所見的標籤、流式佈局等都可以用FlexboxLayout來實現。
引入:
github : google / flexbox-layout
implementation 'com.google.android:flexbox:2.0.1'
//未用AndroidX
//implementation 'com.google.android:flexbox:1.0.0'
FlexboxLayout主要5大布局屬性,分別是flexDirection,flexWrap,justifyContent ,alignItems ,alignContent
flexDirection : 主軸方向
flex-direction 屬性決定主軸的方向(即內部子元素的排列方向)。
-
row(默認值):水平顯示,起點在左端
-
row_reverse:水平顯示,起點在右端,與row相反的順序
-
column:垂直顯示,起點在頂部
-
column_reverse:垂直顯示,起點在底部,與column相反的順序
xml中使用app:flexDirection=“row”,代碼中使用flexboxLayout.setFlexDirection(FlexDirection.ROW)
flexWrap :是否換行
flexWrap 決定是否換行
-
nowrap(默認值):不換行
-
wrap:按正常方向換行,第一行在上方
-
wrap_reverse:按反方向換行,第一行在下方
xml中使用app:flexWrap=“nowrap”,代碼中使用flexboxLayout.setFlexWrap(FlexWrap.NOWRAP)
justifyContent :主軸對齊
justifyContent決定元素在主軸上的對齊方式
justify
英 [ˈdʒʌstɪfaɪ]
美 [ˈdʒʌstɪfaɪ]
v. 證明…正確(或正當、有理); 對…作出解釋; 爲…辯解(或辯護); 調整使全行排滿; 使每行排齊; 使齊行;
-
flex_start(默認值):主軸方向起點對齊
-
flex_end:主軸方向終點對齊
-
center: 主軸方向居中對齊
-
space_between:主軸方向兩端對齊,元素之間的間隔都相等。
-
space-around:每個元素兩側的間隔相等。所以,元素之間的間隔比元素與佈局邊框的間隔大一倍。
xml中使用app:justifyContent=“flex_start”,代碼中使用flexboxLayout.setJustifyContent(JustifyContent.FLEX_START)
注意這裏是 主軸方向 上的對齊方式即flexDirection屬性,例如主軸如果是row水平方向的,那麼center屬性就是水平居中,如果是column,那麼就是垂直方向居中。
alignItems : 交叉軸對齊
alignItems決定元素在交叉軸方向上的對齊方式,「交叉軸」 我理解的就是 與主軸交叉垂直的方向,比如主軸是水平的,那麼交叉軸就是垂直方向的
-
stretch(默認值):交叉軸方向佔滿整個父佈局。
-
flex_start交叉軸的起點對齊
-
flex_end交叉軸的終點對齊。
-
center交叉軸的居中對齊
-
baseline元素第一行文字的基線對齊
alignContent : 多根軸線對齊
alignContent決定了多根軸線的對齊方式。如果項目只有一根軸線,該屬性不起作用。
-
stretch(默認值):軸線佔滿整個交叉軸。
-
flex_start 交叉軸方向起點對齊
-
flex_end 交叉軸方向終點對齊
-
center 交叉軸方向居中對齊
-
space_between 交叉軸方向兩端對齊,元素之間的間隔都相等
-
space_around 每個元素兩側的間隔相等。所以,元素之間的間隔比元素與佈局邊框的間隔大一倍
alignContent是在多行的情況下起作用。也就是控制多行,如果子元素只有一行,則不起作用。
justifyContent設置主軸方向的對齊方式,
alignContent是設置交叉軸方向的對齊方式。
例如元素是水平方向換行,justifyContent設置center屬性就是水平居中,alignContent設置center屬性就是垂直居中。
測試:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:orientation="vertical">
<com.google.android.flexbox.FlexboxLayout
android:id="@+id/flexboxLayout"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="@android:color/black">
<TextView
android:id="@+id/tv0"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@android:color/holo_purple"
android:gravity="center"
android:text="tv0"
android:textColor="#ffffff" />
<TextView
android:id="@+id/tv1"
android:layout_width="80dp"
android:layout_height="40dp"
android:background="#fd0202"
android:gravity="center"
android:text="tv1"
android:textColor="#ffffff" />
<TextView
android:id="@+id/tv2"
android:layout_width="50dp"
android:layout_height="90dp"
android:background="@android:color/holo_green_light"
android:gravity="center"
android:text="tv2"
android:textColor="#ffffff" />
<TextView
android:id="@+id/tv3"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#38fd02"
android:gravity="center"
android:text="tv3"
android:textColor="#ffffff" />
<TextView
android:id="@+id/tv4"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="#02bafd"
android:gravity="center"
android:text="tv4"
android:textColor="#ffffff" />
<TextView
android:id="@+id/tv5"
android:layout_width="30dp"
android:layout_height="80dp"
android:background="#020afd"
android:gravity="center"
android:text="tv5"
android:textColor="#ffffff" />
<TextView
android:id="@+id/tv6"
android:layout_width="60dp"
android:layout_height="60dp"
android:background="@android:color/holo_orange_light"
android:gravity="center"
android:text="tv6"
android:textColor="#ffffff" />
<TextView
android:id="@+id/tv7"
android:layout_width="40dp"
android:layout_height="70dp"
android:background="#00ffff"
android:gravity="center"
android:text="tv7"
android:textColor="#ffffff" />
<TextView
android:id="@+id/tv8"
android:layout_width="100dp"
android:layout_height="40dp"
android:background="#ff6699"
android:gravity="center"
android:text="tv8"
android:textColor="#ffffff" />
<TextView
android:id="@+id/tv9"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@android:color/holo_red_light"
android:gravity="center"
android:text="tv9"
android:textColor="#ffffff" />
</com.google.android.flexbox.FlexboxLayout>
<TextView
android:id="@+id/flexDirection0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="flexDirection: 主軸方向" />
<!-- flexDirection -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:id="@+id/flexDirection1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#ff00ff"
android:gravity="center"
android:text="ROW"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/flexDirection2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#8BC34A"
android:gravity="center"
android:text="ROW_REVERSE"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/flexDirection3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#00BCD4"
android:gravity="center"
android:text="COLUMN"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/flexDirection4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#F44336"
android:gravity="center"
android:text="COLUMN_REVERSE"
android:textColor="@android:color/white" />
</LinearLayout>
<TextView
android:id="@+id/flexWrap0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="flexWrap: 是否換行" />
<!-- flexWrap -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:id="@+id/flexWrap1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="NOWRAP"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/flexWrap2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/colorAccent"
android:gravity="center"
android:text="WRAP"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/flexWrap3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#03A9F4"
android:gravity="center"
android:text="WRAP_REVERSE"
android:textColor="@android:color/white" />
</LinearLayout>
<TextView
android:id="@+id/justifyContent0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="justifyContent: 主軸對齊" />
<!-- justifyContent -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:id="@+id/justifyContent1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FF5722"
android:gravity="center"
android:text="FLEX_START"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/justifyContent2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#8BC34A"
android:gravity="center"
android:text="FLEX_END"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/justifyContent3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#009688"
android:gravity="center"
android:text="CENTER"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/justifyContent4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="SPACE_BETWEEN"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/justifyContent5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/colorAccent"
android:gravity="center"
android:text="SPACE_AROUND"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/justifyContent6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#3F51B5"
android:gravity="center"
android:text="SPACE_EVENLY"
android:textColor="@android:color/white" />
</LinearLayout>
<TextView
android:id="@+id/alignItems0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="alignItems: 交叉軸對齊" />
<!-- alignItems -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:id="@+id/alignItems1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#E91E63"
android:gravity="center"
android:text="FLEX_START"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/alignItems2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/colorAccent"
android:gravity="center"
android:text="FLEX_END"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/alignItems3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#52405E"
android:gravity="center"
android:text="CENTER"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/alignItems4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#509E20"
android:gravity="center"
android:text="BASELINE"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/alignItems5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#E91E63"
android:gravity="center"
android:text="STRETCH"
android:textColor="@android:color/white" />
</LinearLayout>
<TextView
android:id="@+id/alignContent0"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="alignContent: 多根軸線對齊" />
<!-- alignContent -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp">
<TextView
android:id="@+id/alignContent1"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#FF5722"
android:gravity="center"
android:text="FLEX_START"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/alignContent2"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/colorAccent"
android:gravity="center"
android:text="FLEX_END"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/alignContent3"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#03A9F4"
android:gravity="center"
android:text="CENTER"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/alignContent4"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/colorPrimary"
android:gravity="center"
android:text="SPACE_AROUND"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/alignContent5"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#03091E"
android:gravity="center"
android:text="SPACE_BETWEEN"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/alignContent6"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@color/colorAccent"
android:gravity="center"
android:text="STRETCH"
android:textColor="@android:color/white" />
</LinearLayout>
</LinearLayout>
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.test2)
//flexDirection
flexDirection0.text = "FlexDirection : " + flexboxLayout.flexDirection
flexDirection1.setOnClickListener {
flexboxLayout.flexDirection = FlexDirection.ROW //默認
flexDirection0.text = "FlexDirection.ROW"
}
flexDirection2.setOnClickListener {
flexboxLayout.flexDirection = FlexDirection.ROW_REVERSE
flexDirection0.text = "FlexDirection.ROW_REVERSE"
}
flexDirection3.setOnClickListener {
flexboxLayout.flexDirection = FlexDirection.COLUMN
flexDirection0.text = "FlexDirection.COLUMN"
}
flexDirection4.setOnClickListener {
flexboxLayout.flexDirection = FlexDirection.COLUMN_REVERSE
flexDirection0.text = "FlexDirection.COLUMN_REVERSE"
}
//flexWrap
flexWrap0.text = "FlexWrap : " + flexboxLayout.flexWrap
flexWrap1.setOnClickListener {
flexboxLayout.flexWrap = FlexWrap.NOWRAP //默認
flexWrap0.text = "FlexWrap.NOWRAP"
}
flexWrap2.setOnClickListener {
flexboxLayout.flexWrap = FlexWrap.WRAP
flexWrap0.text = "FlexWrap.WRAP"
}
flexWrap3.setOnClickListener {
flexboxLayout.flexWrap = FlexWrap.WRAP_REVERSE
flexWrap0.text = "FlexWrap.WRAP_REVERSE"
}
//justifyContent
justifyContent0.text = "JustifyContent: " + flexboxLayout.justifyContent
justifyContent1.setOnClickListener {
flexboxLayout.justifyContent = JustifyContent.FLEX_START //默認
justifyContent0.text = "JustifyContent.FLEX_START"
}
justifyContent2.setOnClickListener {
flexboxLayout.justifyContent = JustifyContent.FLEX_END
justifyContent0.text = "JustifyContent.FLEX_END"
}
justifyContent3.setOnClickListener {
flexboxLayout.justifyContent = JustifyContent.CENTER
justifyContent0.text = "JustifyContent.CENTER"
}
justifyContent4.setOnClickListener {
flexboxLayout.justifyContent = JustifyContent.SPACE_BETWEEN
justifyContent0.text = "JustifyContent.SPACE_BETWEEN"
}
justifyContent5.setOnClickListener {
flexboxLayout.justifyContent = JustifyContent.SPACE_AROUND
justifyContent0.text = "JustifyContent.SPACE_AROUND"
}
justifyContent6.setOnClickListener {
flexboxLayout.justifyContent = JustifyContent.SPACE_EVENLY
justifyContent0.text = "JustifyContent.SPACE_EVENLY"
}
//alignItems
alignItems0.text = "AlignItems: " + flexboxLayout.alignItems
alignItems1.setOnClickListener {
flexboxLayout.alignItems = AlignItems.FLEX_START //默認
alignItems0.text = "AlignItems.FLEX_START"
}
alignItems2.setOnClickListener {
flexboxLayout.alignItems = AlignItems.FLEX_END
alignItems0.text = "AlignItems.FLEX_END"
}
alignItems3.setOnClickListener {
flexboxLayout.alignItems = AlignItems.CENTER
alignItems0.text = "AlignItems.CENTER"
}
alignItems4.setOnClickListener {
flexboxLayout.alignItems = AlignItems.BASELINE
alignItems0.text = "AlignItems.BASELINE"
}
alignItems5.setOnClickListener {
flexboxLayout.alignItems = AlignItems.STRETCH
alignItems0.text = "AlignItems.STRETCH"
}
//alignContent
alignContent0.text = "AlignContent: " + flexboxLayout.alignContent
alignContent1.setOnClickListener {
flexboxLayout.alignContent = AlignContent.FLEX_START //默認
alignContent0.text = "AlignContent.FLEX_START"
}
alignContent2.setOnClickListener {
flexboxLayout.alignContent = AlignContent.FLEX_END
alignContent0.text = "AlignContent.FLEX_END"
}
alignContent3.setOnClickListener {
flexboxLayout.alignContent = AlignContent.CENTER
alignContent0.text = "AlignContent.CENTER"
}
alignContent4.setOnClickListener {
flexboxLayout.alignContent = AlignContent.SPACE_AROUND
alignContent0.text = "AlignContent.SPACE_AROUND"
}
alignContent5.setOnClickListener {
flexboxLayout.alignContent = AlignContent.SPACE_BETWEEN
alignContent0.text = "AlignContent.SPACE_BETWEEN"
}
alignContent6.setOnClickListener {
flexboxLayout.alignContent = AlignContent.STRETCH
alignContent0.text = "AlignContent.STRETCH"
}
}
}
效果圖:
默認
換行
flexDirection 切換