Android 流式布局实现方式

唐诺

已于 2023-06-07 17:22:39 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： android 流式布局 Flow FlexboxLayout

于 2023-06-07 17:21:11 首次发布

本文链接：https://blog.youkuaiyun.com/zhijiandedaima/article/details/131091940

自定义view 专栏收录该内容

54 篇文章

订阅专栏

文章介绍了三种在Android中实现流式布局的方法：1)使用FlexboxLayout，通过设置flexWrap和flexDirection属性实现；2)结合RecyclerView和FlexboxLayoutManager，调整布局方向和对齐方式；3)利用ConstraintLayout的Flow特性，设置约束和间隔来创建流式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android 流式布局实现方式

1、FlexboxLayout

FlexboxLayout是Google开源的一个强大的控件，直接继承ViewGroup。

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

<com.google.android.flexbox.FlexboxLayout
    android:id="@+id/fl_content"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

var flContent = findViewById<FlexboxLayout>(R.id.fl_content)
        flContent.flexWrap = FlexWrap.WRAP
        flContent.flexDirection = FlexDirection.ROW
        map.keys?.forEach {
            flContent.layoutInflate(R.layout.item_filter).apply {
                var tvName = this.findViewById<TextView>(R.id.tv_name)
                tvName.text = it
                tag = false
  
                flContent.addView(this)
            }
        }

2、Recyclerview+FlexboxLayoutManager

implementation 'com.google.android:flexbox:3.0.0'//Android官方流式布局

FlexboxLayoutManager layoutManager=new FlexboxLayoutManager(this);
layoutManager.setFlexDirection(FlexDirection.ROW);
//layoutManager.setJustifyContent(JustifyContent.CENTER);
//layoutManager.setAlignItems(AlignItems.CENTER);
recyclerview.setLayoutManager(layoutManager);
recyclerview.setAdapter(adapter);

3、ConstraintLayout + Flow

Constraintlayout 2.0 新增了Flow流式虚拟布局。

implementation 'androidx.constraintlayout:constraintlayout:2.1.4'

  <androidx.constraintlayout.helper.widget.Flow
        android:id="@+id/flow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="tvA,tvB,tvC,tvD,tvE,tvF,tvG"
        app:flow_horizontalGap="30dp" //View水平间隔
        app:flow_verticalGap="30dp" //垂直间隔
        app:flow_wrapMode="none"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

for (i in 0..4) {
    val customView = CustomComponent (this)
    customView.id = generateViewId()
    constraintLayout.addView(customView,i)
    flow.addView(customView)
}