您当前的位置: 首页 >  android

Kevin-Dev

暂无认证

  • 0浏览

    0关注

    544博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

【Android -- 开源库】FlexboxLayout 可伸缩布局

Kevin-Dev 发布时间:2019-12-05 16:08:47 ,浏览量:0

在这里插入图片描述

一、简介

本篇文章就介绍一下它的用法和最新版添加的一些特性(支持集成RecyclerView)。 Github地址:https://github.com/google/flexbox-layout 。

FlexboxLayout is a library project which brings the similar capabilities of CSS Flexible Box Layout Module to Android. 意思是:FlexboxLayout是一个Android平台上与CSS的 Flexible box 布局模块 有相似功能的库。Flexbox 是CSS 的一种布局方案,可以简单、快捷的实现复杂布局。

FlexboxLayout 可以理解成一个高级版的 LinearLayout,因为两个布局都把子 view 按顺序排列。两者之间最大的差别在于 FlexboxLayout 具有换行的特性。

二、属性

1. flexDirection flexDirection 属性决定了主轴的方向,即FlexboxLayout里子Item的排列方向,有以下四种取值:

  • row (default): 默认值,主轴为水平方向,从左到右。
  • row_reverse:主轴为水平方向,起点在有端,从右到左。
  • column:主轴为竖直方向,起点在上端,从上到下。
  • column_reverse:主轴为竖直方向,起点在下端,从下往上。 在这里插入图片描述

2. flexWrap flexWrap 这个属性决定Flex 容器是单行还是多行,并且决定副轴(与主轴垂直的轴)的方向。可能有以下3个值:

  • noWrap: 不换行,一行显示完子元素。
  • wrap: 按正常方向换行。
  • wrap_reverse: 按反方向换行。

3. justifyContent justifyContent 属性控制元素主轴方向上的对齐方式,有以下5种取值:

  • flex_start (default): 默认值,左对齐
  • flex_end: 右对齐
  • center: 居中对齐
  • space_between: 两端对齐,中间间隔相同
  • space_around: 每个元素到两侧的距离相等。

4. alignItems alignItems 属性控制元素在副轴方向的对齐方式,有以下5种取值:

  • stretch (default) :默认值,如果item没有设置高度,则充满容器高度。
  • flex_start:顶端对齐
  • flex_end:底部对齐
  • center:居中对齐
  • baseline:第一行内容的的基线对齐。

5. alignContent alignContent 属性控制多根轴线的对齐方式(也就是控制多行,如果子元素只有一行,则不起作用),可能有一下6种取值:

  • stretch (default): 默认值,充满交叉轴的高度(测试发现,需要alignItems 的值也为stretch 才有效)。
  • flex_start: 与交叉轴起点对齐。
  • flex_end: 与交叉轴终点对齐。
  • center: 与交叉轴居中对齐。
  • space_between: 交叉轴两端对齐,中间间隔相等。
  • space_around: 到交叉轴两端的距离相等。

6. showDividerHorizontal showDividerHorizontal 控制显示水平方向的分割线,值为none | beginning | middle | end其中的一个或者多个。

7. dividerDrawableHorizontal dividerDrawableHorizontal 设置Flex 轴线之间水平方向的分割线。

8. showDividerVertical showDividerVertical 控制显示垂直方向的分割线,值为none | beginning | middle | end其中的一个或者多个。

9. dividerDrawableVertical dividerDrawableVertical 设置子元素垂直方向的分割线。

10. showDivider showDivider 控制显示水平和垂直方向的分割线,值为none | beginning | middle | end其中的一个或者多个。

11. dividerDrawable dividerDrawable 设置水平和垂直方向的分割线,但是注意,如果同时和其他属性使用,比如为 Flex 轴、子元素设置了justifyContent=“space_around” 、alignContent=“space_between” 等等。可能会看到意料不到的空间,因此应该避免和这些值同时使用。

三、使用

1. 效果图 在这里插入图片描述 2. 添加依赖

dependencies {
    implementation 'com.google.android.flexbox:flexbox:3.0.0'
}

3. 布局文件




    
    
    
    
    
    
    
    
    
    
    
    

当然,你可以在代码中向 FlexboxLayout 布局动态添加子元素,代码如下:

mFlexboxLayout = (FlexboxLayout) findViewById(R.id.flexbox_layout);
        
        // 通过代码向FlexboxLayout添加View
        TextView textView = new TextView(this);
        textView.setBackground(getResources().getDrawable(R.drawable.label_bg_shape));
        textView.setText("Test  Label");
        textView.setGravity(Gravity.CENTER);
        textView.setPadding(30,0,30,0);
        textView.setTextColor(getResources().getColor(R.color.text_color));
        mFlexboxLayout.addView(textView);
        //通过FlexboxLayout.LayoutParams 设置子元素支持的属性
        ViewGroup.LayoutParams params = textView.getLayoutParams();
        if(params instanceof FlexboxLayout.LayoutParams){
            FlexboxLayout.LayoutParams layoutParams = (FlexboxLayout.LayoutParams) params;
            layoutParams.setFlexBasisPercent(0.5f);
        }
四、与 RecyclerView 的结合

1. 添加依赖

dependencies {
    implementation 'com.google.android.flexbox:flexbox:3.0.0'
}

2. 使用 FlexboxLayoutManager 代替 LinearLayoutManager ,如下:

FlexboxLayoutManager manager = new FlexboxLayoutManager();
 //设置主轴排列方式
 manager.setFlexDirection(FlexDirection.ROW);
 //设置是否换行
 manager.setFlexWrap(FlexWrap.WRAP);
 manager.setAlignItems(AlignItems.STRETCH);

3. 在 Adapter 里设置 flexGrow :

ImageView mImageView =  rvBaseViewHolder.getImageView(R.id.image_src);
       mImageView .setImageResource(mData);

        ViewGroup.LayoutParams lp = mImageView.getLayoutParams();
        if (lp instanceof FlexboxLayoutManager.LayoutParams) {
            FlexboxLayoutManager.LayoutParams flexboxLp =
                    (FlexboxLayoutManager.LayoutParams) mImageView.getLayoutParams();
            flexboxLp.setFlexGrow(1.0f);
        }

4. 效果图 在这里插入图片描述

关注
打赏
1658837700
查看更多评论
立即登录/注册

微信扫码登录

0.0701s