Android FlexboxLayout流式布局
FlexBoxLayout是为Android带来了与 CSS Flexible Box Layout(CSS 弹性盒子)类似性能的库。
一:增加依赖
如果迁徙的AndroidX中
dependencies {
implementation 'com.google.android:flexbox:2.0.1'
}
否则:
dependencies {
implementation 'com.google.android:flexbox:1.0.0'
}
二:实例:
布局增加:
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexWrap="wrap">
<TextView
style="@style/TextStyle"
android:text="你真的这样的世界吗"/>
<TextView
style="@style/TextStyle"
android:text="你真的理解中国吗" />
<TextView
style="@style/TextStyle"
android:text="你真的理解你本人吗"/>
<TextView
style="@style/TextStyle"
android:text="你理解你的父母吗" />
<TextView
style="@style/TextStyle"
android:text="你..." />
<TextView
style="@style/TextStyle"
android:text="我...." />
<TextView
style="@style/TextStyle"
android:text="他...." />
</com.google.android.flexbox.FlexboxLayout>
TextStyle 布局格调
<style name="TextStyle">
<item name="android:layout_margin">5dp</item>
<item name="android:layout_width">wrap_content</item>
<item name="android:layout_height">wrap_content</item>
<item name="android:background">@drawable/shape_border</item>
<item name="android:ellipsize">end</item>
<item name="android:maxLines">1</item>
<item name="android:padding">8dp</item>
<item name="android:textColor">@android:color/black</item>
在drawable下创立shape_border.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<corners android:radius="12dp"/>
<stroke android:color="@color/red" android:width="2dp"/>
</shape>
三、FlexboxLayout属性介绍
- app:flexWrap=”nowrap”//该属性示意是否换行和换行的方向
flexWrap属性一共有三个枚举值,别离是nowrap、wrap和wrap_reverse
nowrap:单行显示,不换行,默认就是这个属性。
wrap:当内容超过一行时,主动换行。
wrap_reverse :反向换行(下一行内容在以后行之上) - app:flexDirection=”column”//主轴方向按竖直(列)方向排版。成果:
column_reverse : 主轴方向按竖直(列)方向反向排版(从下向上)。
row : 主轴方向按程度(行)方向排版,默认就是这个属性
row_reverse : 主轴方向按程度(行)方向反向排版 - app:justifyContent=”flex_start”
对于这个属性,官网有一段阐明:
<!-- Omitting flex-flow property since it's reflected in the parent flex container. Set the flexDirection and/or flexWrap to the parent flex container explicitly if you want to use the flex-flow similar way to the web. -->
作用是管制元素在主轴上的对齐形式,须要配合flexDirection或flexWrap属性来应用。
看一下源码,可见app:justifyContent属性有flex_start、flex_end、center、space_between、space_around和space_evenly6个枚举值。
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:flexWrap="wrap"
app:flexDirection="row"
app:justifyContent="flex_end">
app:flexDirection 得是row 是column 没成果
flex_start: 左对齐,默认值。
flex_end : 右对齐。
center:居中对齐。
space_between: 两端对齐。
space_around : 扩散对齐。
space_evenly:子元素在一行内均匀分布空间。
4.app:alignItems=”stretch”//该属性示意元素在每条轴线上的对齐形式。
留神:如果设置了alignContent,且值不为stretch,那么该属性生效。
咱们扭转每一子View的布局Padding 看看成果
<TextView
style="@style/TextStyle"
android:text="你真的这样的世界吗"
android:padding="10dp"/>
<TextView
style="@style/TextStyle"
android:text="你真的理解中国吗"
android:padding="20dp"/>
<TextView
style="@style/TextStyle"
android:text="你真的理解你本人吗"
android:padding="5dp"/>
<TextView
style="@style/TextStyle"
android:text="你理解你的父母吗"
android:padding="15dp"/>
app:alignItems属性有flex_start、flex_end、center、baseline和stretch
stretch: 默认值,如果子元素未设置高度,则沾满父布局高度。
flex_start :顶端对齐
flex_end :底端对齐。
center : 居中对齐。
baseline :依照第一个元素的基线对齐。
上面这张图片能够很直观的表白这个属性的作用
- app:alignContent=”stretch”//该属性示意每条轴线在整个布局中的对齐形式。
app:alignContent属性有flex_start、flex_end、center、space_between、space_around和stretch6个枚举值。
stretch:默认值,轴线占满整个父布局。
flex_start:顶部对齐所有轴线
flex_end:底部对齐所有轴线。
center:居中对齐所有轴线。
space_between:两端对齐所有轴线。
space_around:扩散对齐所有轴线。
6.dividerDrawable (reference)//程度和竖直方向分割线。
- dividerDrawableHorizontal / dividerDrawableVertical (reference)//程度/竖直方向分割线。
-
app:showDivider=”middle”//显示程度和竖直方向分割线形式。
<com.google.android.flexbox.FlexboxLayout android:layout_width="match_parent" android:layout_height="wrap_content" app:flexWrap="wrap" app:flexDirection="row" app:alignItems="flex_start" app:dividerDrawable="@color/red" app:showDivider="middle">
9.app:layout_order=”2″//指定子元素排序优先级,值越小越排在后面,默认值为1。设置值类型为float。
<TextView
style="@style/TextStyle"
android:text="你真的这样的世界吗"
android:padding="10dp"
app:layout_order="2"
/>
这样的话这样一条就排到最初去了
- app:layout_flexShrink=”0″
子元素缩放比例,如果设置了换行(flexWrap=“wrap或wrap_reverse”)则该属性有效。
设置值类型为float,0示意不缩放,数值越大,缩放比例越大,默认为1,负值有效。 - app:layout_flexGrow=”0″
调配同一轴线残余控件所占权重,默认值为0,示意不参加调配。用法相似于LinearLayout的weight,不过weight调配的是整个父布局控件,而layout_flexGrow调配的是同一行/列的残余空间。
四:与RecyclerView配合应用
public class FourActivity extends AppCompatActivity {
private RecyclerView recycler;
private FlexAdapter flexAdapter;
private List<String> mDatas=new ArrayList<>();
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_four_one);
initData();
recycler= findViewById(R.id.recycler);
FlexboxLayoutManager manager=new FlexboxLayoutManager(this);
//设置主轴排列形式
manager.setFlexDirection(FlexDirection.ROW);
//设置是否换行
manager.setFlexWrap(FlexWrap.WRAP);
//manager.setAlignItems(AlignItems.FLEX_END);
recycler.setLayoutManager(manager);
flexAdapter=new FlexAdapter(this,mDatas);
recycler.setAdapter(flexAdapter);
}
private void initData() {
mDatas.add("我真的ok");
mDatas.add("你好世界");
mDatas.add("世界");
mDatas.add("你是一个AAA什么");
mDatas.add("我真的AAAok");
mDatas.add("你好世界AAA");
mDatas.add("世界AAA");
mDatas.add("你是一个什么AAA");
}
}
FlexboxLayoutManager 能够替换其余布局管理器实现流式布局
因为RecyclerView 的一些个性,Flexbox 的一些属性在FlexboxLayoutManager中没有实现,上面是FlexboxLayout和FlexboxLayoutManager反对的属性的比照:
END:螃蟹在剥我的壳,笔记本在写我。漫天的我落在枫叶上雪花上。而你在想我。