Android 组件 —— 流式布局

简介

这是一个Android流式布局，根据鸿翔大神之前写的FlowLayout设计思路结合Material库中的ChipGroup设计架构衍生而来，全新的流式布局TagFlowLayout组件

效果展示

方法

setter

getter

Attributes属性

用法

dependencies {
    implementation 'io.github.smallmarker:tagflowlayout:1.0'
}
1
2
3

声明

1
2
3
4
5

Adapter

方法属性

• 创建Adapter：TagFlowAdapter.create(dataList)
• 设置Tag：setView(parent: TagFlowLayout, position: Int, t: T)
• 设置Tag状态：setChecked(position: Int, t: T)
• 监听状态变化：setCheckedChanged(isChecked: Boolean, position: Int, view: View)
• 刷新适配器：notifyDataSetChange()

使用步骤

• 设置数据

        // 设置Adapter
        binding.tagFlowLayout.adapter = TagFlowAdapter.create(dataList) {
            setView { parent, position, t ->
                TextView(parent.context).apply {
                    text = t
                    setBackgroundResource(R.drawable.bg_tag_selector)
                    setPadding(10, 10, 10, 10)
                }
            }
        }
1
2
3
4
5
6
7
8
9
10

• 选中状态

支持通过state=checked来控制选中和取消

    
        
            
            
        
    
    
        
            
            
        
    

1
2
3
4
5
6
7
8
9
10
11
12
13
14

也可以自己在Adapter 的setCheckedChanged处理显示

setCheckedChanged { isChecked, position, view ->
                Log.d("TAG", "当前TAG状态：${isChecked}, ${position}")
                view.setBackgroundColor(if (isChecked) {
                    Color.RED
                } else {
                    Color.GRAY
                })
            }
1
2
3
4
5
6
7
8

• 事件

        // 点击事件
        binding.tagFlowLayout.setOnTagClickListener { view, position, parent ->
            Log.d("TAG", "当前选中TAG： ${position}")
        }

        // 状态监听
        binding.tagFlowLayout.setCheckedChangedListener { group, checkedIds ->
            binding.tvTip.text = "当前选中TAG序号：${checkedIds}"
        }
1
2
3
4
5
6
7
8
9

总结

偶然发现material库中chip组件，其通过ChipGroup实现流式布局的设计，加上很早之前有用过鸿神的FlowLayout库，所以就在此基础上写了一个新的流式布局组件，该组件在类的命名上还是沿用了鸿神之前的FlowLayout，为了不依赖material库的较高版本的限制，故将需要用到的类抽取使用，做兼容处理