text Android的流式布局的FlowLayout,一款针对标签的布局
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了text Android的流式布局的FlowLayout,一款针对标签的布局相关的知识,希望对你有一定的参考价值。
Android流式布局FlowLayout,一款针对Tag的布局
2017年12月13日 14:15:18 裴泓博 阅读数:11586
交流群 : 668524118
本群主要用于编程技术 ,及创意作品 ,思维架构的交流 ,欢迎喜欢创新 ,热爱生活的朋友加入 !
前言
flow layout, 流式布局, 这个概念在移动端或者前端开发中很常见,特别是在多标签的展示中, 往往起到了关键的作用。然而Android 官方, 并没有为开发者提供这样一个布局, 于是有很多开发者自己做了这样的工作,github上也出现了很多自定义FlowLayout。 接下来,我要介绍是鸿洋大神的FlowLayout,在这里做一下分享。
项目地址:https://github.com/hongyangAndroid/FlowLayout
FlowLayout
Android流式布局,支持单选、多选等,适合用于产品标签等。
##特色
以setAdapter形式注入数据
直接设置selector为background即可完成标签选则的切换,类似CheckBox
支持控制选择的Tag数量,比如:单选、多选
支持setOnTagClickListener,当点击某个Tag回调
支持setOnSelectListener,当选择某个Tag后回调
支持adapter.notifyDataChanged
Activity重建(或者旋转)后,选择的状态自动保存
##效果图
用法
dependencies {
compile 'com.hyman:flowlayout-lib:1.1.2'
}
声明
布局文件中声明:
<com.zhy.view.flowlayout.TagFlowLayout
android:id="@+id/id_flowlayout"
zhy:max_select="-1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:padding="20dp">
</com.zhy.view.flowlayout.TagFlowLayout>
支持属性:
max_select:-1为不限制选择数量,>=1的数字为控制选择tag的数量
支持通过state=checked来控制选中和取消,也可以自己在Adapter 的onSelected和unSelected中分别处理显示。
###设置数据
mFlowLayout.setAdapter(new TagAdapter<String>(mVals)
{
@Override
public View getView(FlowLayout parent, int position, String s)
{
TextView tv = (TextView) mInflater.inflate(R.layout.tv,
mFlowLayout, false);
tv.setText(s);
return tv;
}
});
getView中回调,类似ListView等用法。
对于选中状态
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/tag_select_textcolor"
android:drawable="@drawable/checked_bg"
android:state_checked="true"></item>
<item android:drawable="@drawable/normal_bg"></item>
</selector>
设置个background,上面一个状态为android:state_checked,另一个为正常。写写布局文件我都嫌慢,怎么能写一堆代码控制效果,设置改个效果,岂不是没时间dota了。
也可以不依赖state_checked,在下面的回调中自行设置:
#Adapter
@Override
public void onSelected(int position, View view) {
super.onSelected(position, view);
}
@Override
public void unSelected(int position, View view) {
super.unSelected(position, view);
}
###事件
mFlowLayout.setOnTagClickListener(new TagFlowLayout.OnTagClickListener()
{
@Override
public boolean onTagClick(View view, int position, FlowLayout parent)
{
Toast.makeText(getActivity(), mVals[position], Toast.LENGTH_SHORT).show();
return true;
}
});
点击标签时的回调。
mFlowLayout.setOnSelectListener(new TagFlowLayout.OnSelectListener()
{
@Override
public void onSelected(Set<Integer> selectPosSet)
{
getActivity().setTitle("choose:" + selectPosSet.toString());
}
});
选择多个标签时的回调。
##预先设置Item选中
//预先设置选中
mAdapter.setSelectedList(1,3,5,7,8,9);
//获得所有选中的pos集合
flowLayout.getSelectedList();
相关源码示例
(1) TagAdapter
那么首先我们得有个Adapter,这里叫做TagAdapter
package com.zhy.view.flowlayout;
import android.view.View;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
public abstract class TagAdapter<T>
{
private List<T> mTagDatas;
private OnDataChangedListener mOnDataChangedListener;
public TagAdapter(List<T> datas)
{
mTagDatas = datas;
}
public TagAdapter(T[] datas)
{
mTagDatas = new ArrayList<T>(Arrays.asList(datas));
}
static interface OnDataChangedListener
{
void onChanged();
}
void setOnDataChangedListener(OnDataChangedListener listener)
{
mOnDataChangedListener = listener;
}
public int getCount()
{
return mTagDatas == null ? 0 : mTagDatas.size();
}
public void notifyDataChanged()
{
mOnDataChangedListener.onChanged();
}
public T getItem(int position)
{
return mTagDatas.get(position);
}
public abstract View getView(FlowLayout parent, int position, T t);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
(2)对于TagFlowLayout对Adapter的支持
那么最主要就是提供一个setAdapter的方法:
public void setAdapter(TagAdapter adapter)
{
mTagAdapter = adapter;
mTagAdapter.setOnDataChangedListener(this);
changeAdapter();
}
private void changeAdapter()
{
removeAllViews();
TagAdapter adapter = mTagAdapter;
TagView tagViewContainer = null;
for (int i = 0; i < adapter.getCount(); i++)
{
View tagView = adapter.getView(this, i, adapter.getItem(i));
tagView.setDuplicateParentStateEnabled(true);
tagViewContainer.setLayoutParams(tagView.getLayoutParams());
tagViewContainer.addView(tagView);
addView(tagViewContainer);
}
}
@Override
public void onChanged()
{
changeAdapter();
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
源码下载地址:https://github.com/hongyangAndroid/FlowLayout
以上是关于text Android的流式布局的FlowLayout,一款针对标签的布局的主要内容,如果未能解决你的问题,请参考以下文章