关于android:Android-FlexboxLayout流式布局

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属性介绍

  1. app:flexWrap=”nowrap”//该属性示意是否换行和换行的方向
    flexWrap属性一共有三个枚举值,别离是nowrap、wrap和wrap_reverse
    nowrap:单行显示,不换行,默认就是这个属性。
    wrap:当内容超过一行时,主动换行。
    wrap_reverse :反向换行(下一行内容在以后行之上)
  2. app:flexDirection=”column”//主轴方向按竖直(列)方向排版。成果:

    column_reverse : 主轴方向按竖直(列)方向反向排版(从下向上)。
    row : 主轴方向按程度(行)方向排版,默认就是这个属性
    row_reverse : 主轴方向按程度(行)方向反向排版
  3. 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 :依照第一个元素的基线对齐。
上面这张图片能够很直观的表白这个属性的作用

  1. 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)//程度和竖直方向分割线。

  1. dividerDrawableHorizontal / dividerDrawableVertical (reference)//程度/竖直方向分割线。
  2. 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"
            />

这样的话这样一条就排到最初去了

  1. app:layout_flexShrink=”0″
    子元素缩放比例,如果设置了换行(flexWrap=“wrap或wrap_reverse”)则该属性有效。
    设置值类型为float,0示意不缩放,数值越大,缩放比例越大,默认为1,负值有效。
  2. 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:螃蟹在剥我的壳,笔记本在写我。漫天的我落在枫叶上雪花上。而你在想我。

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据