仿应用汇应用搜索标签效果——flowTags基于github开源项目flowlayout

最近项目需要做个热门搜索标签功能。

想法主要有2个，一是做个listview或者gridview，但是有个很明显的缺陷就是需要这些关键字长度相似，不然就会出现布局问题，很难看且很死板。二是自定义一种listview，子item自适应父类的大小排列。就像在应用汇里的应用标签那样。幸运的是在github找到了这个相关开源控件flowlayout。     
https://github.com/ApmeM/android-flowlayout
flowlayout的作用是智能测量子view的大小进行线性布局，在线性布局的基础上，如果要添加的子view要超过了父类尺寸，则智能换行。

应用汇截图如左侧效果，随便写了个demo,效果图如右侧(只是一个Demo，用到项目中只需要优化一下就能做出应用汇的效果)


                                                                                     


看看怎么做吧。flowlayout是一个布局，只要添加view进去，就会自动智能线性排列，并且有很多排列方式，具体设置请看github上项目介绍，今天只讲默认的布局方式，如何做出仿应用汇这种标签效果。

首先标签应该是个类，有自己的属性，这样用户点击了标签才能进行下一步的操作，也就是对数据建模。

public class FlowTag {

private int id;//id
private String title;//标签上的文字

public FlowTag(int _id,String _title){
this.setId(_id);
this.setTitle(_title);
}

public int getId() {
return id;
}

public void setId(int id) {
this.id = id;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}
}

简单建模，Tag类，每个tag都有自己的id和自己的title。

数据好了，第二步是继承flowlayout自定义TagListView。它是一个容器，只要把数据塞进容器就好了。

public class FlowTagList extends FlowLayout {

public FlowTagList(Context context) {
super(context);
// TODO Auto-generated constructor stub
}

public FlowTagList(Context context, AttributeSet attributeSet) {
super(context, attributeSet);
// TODO Auto-generated constructor stub
}

public FlowTagList(Context context, AttributeSet attributeSet, int defStyle) {
super(context, attributeSet, defStyle);
// TODO Auto-generated constructor stub
}

private List<FlowTag> mDataList = new ArrayList<FlowTag>();
private onItemClickListener mListenr;

//添加一个子view到listview中，并使其和tag类数据绑定
private void inflateTag(final FlowTag tag) {
if (tag == null)
return;

//这里选择插入一个textview。也可以自定义layout的view通过LayoutInflater引入布局，总之添加进来一个子view就ok。

TextView tv = new TextView(getContext());
tv.setText(tag.getTitle());
addView(tv);
tv.setFocusable(true);
tv.setClickable(true);
tv.setTextColor(Color.WHITE);
tv.setBackgroundResource(R.drawable.common_item_bg_normal);
tv.setPadding(10, 10, 10, 10);
//设置点击事件，并传递给接口。当然不只是能设置点击事件，任何事件都可以设置，如果需要只要稍微修改一下接口或者添加新的接口就OK
tv.setOnClickListener(new OnClickListener() {

@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if (mListenr != null) {
mListenr.onClick(v, tag);
}
}
});
}

//添加数据
public void setData(List<FlowTag> list) {
if (list == null || list.isEmpty())
return;
this.mDataList = list;
for (FlowTag tag : mDataList)
inflateTag(tag);
}

//设置子item点击事件
public void setOnItemClickListener(onItemClickListener listener) {
this.mListenr = listener;
}

}

//自定义一个接口，用来传递点击事件
interface onItemClickListener {
public void onClick(View v, FlowTag tag);
}

这个类自定义了listview。内部实现添加子view并绑定tag数据，为所有子view设置接口监听点击事件。

子view可以是自己定义任何控件（这里图省事用了textview），十分灵活，与我们的tag数据绑定起来。

接口完全可以自定义，在添加子view的时候为它们添加监听接口，并传递出来给我们自己定义的接口。

好了，activity中调用

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
FlowTagList tagList=(FlowTagList) findViewById(R.id.taglist);
List<FlowTag>list=new ArrayList<FlowTag>();
list.add(new FlowTag(0, "安全必备"));
list.add(new FlowTag(0, "音乐"));
list.add(new FlowTag(0, "父母学"));
list.add(new FlowTag(0, "上班族必备"));
list.add(new FlowTag(0, "杰兔加速"));
list.add(new FlowTag(0, "杰兔今日联播"));
list.add(new FlowTag(0, "杰兔看世界"));
list.add(new FlowTag(0, "智能吧"));
list.add(new FlowTag(0, "智能吧电视论坛"));
list.add(new FlowTag(0, "小公举"));
list.add(new FlowTag(0, "sante"));
list.add(new FlowTag(0, "唐僧肉"));

tagList.setData(list);
tagList.setOnItemClickListener(new onItemClickListener() {

@Override
public void onClick(View v, FlowTag tag) {
// TODO Auto-generated method stub
Toast.makeText(getApplicationContext(), "点击标签"+tag.getTitle(), Toast.LENGTH_SHORT).show();
}
});
}

最后注意，xml布局中，layout_height=wrap_content。因为我们的需求是横向填满的，垂直上是自适应的。当然也可以根据自己的项目进行微调。

所有定义和数据绑定都很灵活，主要是介绍flowlayout这个开源控件，效果很棒！使用很灵活。