流布局的简单实现:FlowView(标签流什么的都不用担心啦)

来源:互联网 发布:mg宣传片 知乎 编辑:程序博客网 时间:2024/05/21 08:43

在项目开发中,难免会遇到流布局,比如对一个商品添加多个标签等场景,类似这种标签流在很多项目中都有用到,但是每个项目中的样式肯定会有所不同,如果要每个项目都重写一个标签流布局,那就太麻烦啦,所以今天带来的是可以自定义item的流布局实现。

演示

这里写图片描述

添加依赖

Step 1:    allprojects {        repositories {            ...            maven { url 'https://jitpack.io' }        }    }Step 2:    dependencies {            compile 'com.github.albert-lii:FlowView:1.0.4'    }

自定义属性

    <!--流布局控件-->    <declare-styleable name="FlowView">        <!-- item 在一行中的横向对齐方式-->        <attr name="flow_horalign">            <!-- item 左对齐-->            <enum name="left" value="0" />            <!-- item 居中对齐-->            <enum name="middle" value="1" />            <!-- item 右对齐-->            <enum name="right" value="2" />        </attr>        <!-- item 在一行中的纵向对齐方式,当设置 flow_height 时,此属性无效-->        <attr name="flow_vertalign">            <enum name="top" value="0" />            <enum name="middle" value="1" />            <enum name="bottom" value="2" />        </attr>        <!--流布局的 item 的高度-->        <attr name="flow_height" format="dimension" />        <!--流布局的 item 横向间距-->        <attr name="flow_hspace" format="dimension" />        <!--流布局的 item 纵向间距-->        <attr name="flow_vspace" format="dimension" />        <!--流布局最多显示的行数-->        <attr name="flow_maxrows" format="integer" />    </declare-styleable>

注:

flow_height :默认为自适应(设置的值为:FlowDefine.INVALID_VAL)
flow_maxrows:默认为不限制行数(设置的值为:FlowDefine.INVALID_VAL)
flow_hspace:默认为10px
flow_vspace:默认为10px

使用方法

FlowView采用的是Adapter方式来实现的,使用方法和ListView的Adapter方式一样,可以自定义item,更加灵活。
- XML

 <com.liyi.flowview.FlowView    android:id="@+id/flowLayout"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:padding="10dp" />
  • Adapter
// 必须继承BaseFlowAdapter类public class FlowAdapter extends BaseFlowAdapter {    private ArrayList<String> mList;    private boolean showImg;    public FlowAdapter() {    }    public void setData(ArrayList<String> list, boolean showImg) {        this.mList = list;        this.showImg = showImg;    }    @Override    public int getCount() {        return mList != null ? mList.size() : 0;    }    // 可自定义item    @Override    public View getView(int position, View convertView, ViewGroup parent) {        convertView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_flow_text, null);        ItemHolder holder = new ItemHolder();        holder.iv_left = (ImageView) convertView.findViewById(R.id.iv_item_flow_left);        holder.iv_right = (ImageView) convertView.findViewById(R.id.iv_item_flow_right);        holder.tv_text = (TextView) convertView.findViewById(R.id.tv_item_flow_text);        holder.tv_text.setText(mList.get(position));        if (showImg) {            holder.iv_left.setVisibility(View.VISIBLE);            holder.iv_right.setVisibility(View.VISIBLE);        } else {            holder.iv_left.setVisibility(View.GONE);            holder.iv_right.setVisibility(View.GONE);        }        return convertView;    }    private class ItemHolder {        private ImageView iv_left, iv_right;        private TextView tv_text;    }}
  • FlowView
 private void update2() {        mList.clear();        for (int i = 0; i < 4; i++) {            mList.add("缘分像一道桥");            mList.add("Get it  on  the  floor");            mList.add("头文字D");            mList.add("albert-lii");            mList.add("be  the  burning fire");            mList.add("压力背包");        }        mAdapter.setData(mList, true);        flowLayout.setAdapter(mAdapter); } // item的点击事件 flowLayout.setOnItemClickListener(new FlowLayout.OnItemClickListener() {            @Override            public void onItemClick(int position, View view) {                Toast.makeText(FlowActivity.this, "我是" + position + "号",                Toast.LENGTH_SHORT).show();            }  });直接实现FlowView的setAdapter(BaseFlowAdapter adapter)方法即可

是不是 so easy!如果有想详细了解具体实现方法的小伙伴,可以直接查看项目源码,内有详细注释哦!

GitHub地址

https://github.com/albert-lii/FlowView

如果觉得不错,给个赞吧!

原创粉丝点击