android 流式布局 选择器

最新推荐文章于 2025-07-28 10:06:39 发布
原创 最新推荐文章于 2025-07-28 10:06:39 发布 · 798 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个基于Android的应用筛选界面实现方案，通过使用自定义组件TagCloudLayout实现学历、经验和薪资等多维度的标签筛选功能。

这里写图片描述

activity

import android.os.Bundle;
import android.view.View;

import com.zjb.qj.R;
import com.zjb.qj.presenter.BasePresenter;
import com.zjb.qj.view.base.BaseActivity;
import com.zjb.qj.view.widget.flow.TagBaseAdapter;
import com.zjb.qj.view.widget.flow.TagCloudBean;
import com.zjb.qj.view.widget.flow.TagCloudLayout;

import java.util.ArrayList;
import java.util.List;

import butterknife.BindView;
import butterknife.OnClick;


/**
 * 筛选
 */
public class ScreenActivity extends BaseActivity {

    @BindView(R.id.screen_flow_xl)
    TagCloudLayout screenFlowXl;
    @BindView(R.id.screen_flow_jy)
    TagCloudLayout screenFlowJy;
    @BindView(R.id.screen_flow_xs)
    TagCloudLayout screenFlowXs;
    private TagBaseAdapter mAdapterxl;
    private List<TagCloudBean> mListxl = new ArrayList<>();
    private TagBaseAdapter mAdapterjy;
    private List<TagCloudBean> mListjy = new ArrayList<>();
    private TagBaseAdapter mAdapterxs;
    private List<TagCloudBean> mListxs = new ArrayList<>();

    String[] xl = {"全部", "中专及以下", "高中", "大专", "本科", "硕士", "博士"};
    String[] jy = {"全部", "应届生", "1年内", "1-3年", "3-5年", "5-10年", "10年以上"};
    String[] xs = {"全部", "3k以下", "3k-5k", "5k-10k", "10k-20k", "20k-50k", "50k以上"};

    @Override
    protected int getLayoutResource() {
        return R.layout.activity_screen;
    }

    @Override
    protected BasePresenter[] createPresenter() {
        return new BasePresenter[0];
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        initview();
    }

    @OnClick({R.id.screen_reset_tv, R.id.screen_confirm_tv})
    public void onViewClick(View v) {
        switch (v.getId()) {
            case R.id.screen_reset_tv:
                //重置
                createData(mListxl, xl);
                mAdapterxl.notifyDataSetChanged();
                createData(mListjy, jy);
                mAdapterjy.notifyDataSetChanged();
                createData(mListxs, xs);
                mAdapterxs.notifyDataSetChanged();
                break;
            case R.id.screen_confirm_tv:
                //确认
                finish();
                break;
        }
    }

    private void initview() {
//        学历
        mAdapterxl = new TagBaseAdapter(this, createData(mListxl, xl));
        screenFlowXl.setAdapter(mAdapterxl);
        screenFlowXl.setItemClickListener(position -> {
            changeState(mListxl, position);
            mAdapterxl.notifyDataSetChanged();
        });
//        经验
        mAdapterjy = new TagBaseAdapter(this, createData(mListjy, jy));
        screenFlowJy.setAdapter(mAdapterjy);
        screenFlowJy.setItemClickListener(position -> {
            changeState(mListjy, position);
            mAdapterjy.notifyDataSetChanged();
        });
//          薪资
        mAdapterxs = new TagBaseAdapter(this, createData(mListxs, xs));
        screenFlowXs.setAdapter(mAdapterxs);
        screenFlowXs.setItemClickListener(position -> {
            changeState(mListxs, position);
            mAdapterxs.notifyDataSetChanged();
        });
    }

    //    创建默认数据
    private List<TagCloudBean> createData(List<TagCloudBean> list, String[] array) {
        list.clear();
        for (int i = 0; i < array.length; i++) {
            TagCloudBean bean = new TagCloudBean();
            bean.setName(array[i]);
            if (i == 0) {
                bean.setState(true);
            } else {
                bean.setState(false);
            }
            list.add(bean);
        }
        return list;
    }

    //    选择状态改变
    private void changeState(List<TagCloudBean> list, int position) {
        if (list.get(position).isState()) {
            list.get(position).setState(false);
        } else {
            if (position == 0) {
                for (int i = 0; i < list.size(); i++) {
                    list.get(i).setState(false);
                }
                list.get(0).setState(true);
            } else {
                list.get(0).setState(false);
                list.get(position).setState(true);
            }
        }
    }

}

package com.zjb.qj.view.widget.flow;

import android.content.Context;
import android.database.DataSetObserver;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;

/**
 * Created by zph on 2018/6/12.
 */

public class TagCloudLayout extends ViewGroup {
    private int mLineSpacing;
    private int mTagSpacing;
    private BaseAdapter mAdapter;
    private TagItemClickListener mListener;
    private DataChangeObserver mObserver;

    /**
     *
     */
    public TagCloudLayout(Context context) {
        super(context);
        init(context, null, 0);
    }

    /**
     * @param context
     * @param attrs
     */
    public TagCloudLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    /**

     * @param context
     * @param attrs
     * @param defStyle
     */
    public TagCloudLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    /**
     * @param context
     * @param attrs
     * @param defStyle
     */
    private void init(Context context, AttributeSet attrs, int defStyle) {
        TagCloudConfiguration config = new TagCloudConfiguration(context, attrs);
        mLineSpacing = config.getLineSpacing();
        mTagSpacing = config.getTagSpacing();
    }


    private void drawLayout() {
        if (mAdapter == null || mAdapter.getCount() == 0) {
            return;
        }

        this.removeAllViews();

        for (int i = 0; i < mAdapter.getCount(); i++) {
            View view = mAdapter.getView(i,null,null);
            final int position = i;
            view.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (mListener != null) {
                        mListener.itemClick(position);
                    }
                }
            });
            this.addView(view);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int wantHeight = 0;
        int wantWidth = resolveSize(0, widthMeasureSpec);
        int paddingLeft = getPaddingLeft();
        int paddingRight = getPaddingRight();
        int paddingTop = getPaddingTop();
        int paddingBottom = getPaddingBottom();
        int childLeft = paddingLeft;
        int childTop = paddingTop;
        int lineHeight = 0;

        //TODO 固定列的数量所需要的代码
        for (int i = 0; i < getChildCount(); i++) {
            final View childView = getChildAt(i);
            LayoutParams params = childView.getLayoutParams();
            childView.measure(
                    getChildMeasureSpec(widthMeasureSpec, paddingLeft + paddingRight, params.width),
                    getChildMeasureSpec(heightMeasureSpec, paddingTop + paddingBottom, params.height)
            );
            int childHeight = childView.getMeasuredHeight();
            int childWidth = childView.getMeasuredWidth();
            lineHeight = Math.max(childHeight, lineHeight);

            if (childLeft + childWidth + paddingRight > wantWidth) {
                childLeft = paddingLeft;
                childTop += mLineSpacing + childHeight;
                lineHeight = childHeight;
            }

            childLeft += childWidth + mTagSpacing;
        }
        wantHeight += childTop + lineHeight + paddingBottom;
        setMeasuredDimension(wantWidth, resolveSize(wantHeight, heightMeasureSpec));
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        //TODO 固定列的数量所需要的代码

        int width = r - l;
        int paddingLeft = getPaddingLeft();
        int paddingTop = getPaddingTop();
        int paddingRight = getPaddingRight();
        int childLeft = paddingLeft;
        int childTop = paddingTop;
        int lineHeight = 0;

        for (int i = 0; i < getChildCount(); i++) {
            final View childView = getChildAt(i);
            if (childView.getVisibility() == View.GONE) {
                continue;
            }
            int childWidth = childView.getMeasuredWidth();
            int childHeight = childView.getMeasuredHeight();
            lineHeight = Math.max(childHeight, lineHeight);

            if (childLeft + childWidth + paddingRight > width) {
                childLeft = paddingLeft;
                childTop += mLineSpacing + lineHeight;
                lineHeight = childHeight;
            }

            childView.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
            childLeft += childWidth + mTagSpacing;
        }
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new LayoutParams(this.getContext(), attrs);
    }

    public void setAdapter(BaseAdapter adapter){
        if (mAdapter == null){
            mAdapter = adapter;
            if (mObserver == null){
                mObserver = new DataChangeObserver();
                mAdapter.registerDataSetObserver(mObserver);
            }
            drawLayout();
        }
    }

    public void setItemClickListener(TagItemClickListener mListener) {
        this.mListener = mListener;
    }

    public interface TagItemClickListener {
        void itemClick(int position);
    }

    class DataChangeObserver extends DataSetObserver {
        @Override
        public void onChanged() {
            TagCloudLayout.this.drawLayout();
        }

        @Override
        public void onInvalidated() {
            super.onInvalidated();
        }
    }
}

package com.zjb.qj.view.widget.flow;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;

import com.zjb.qj.R;

/**
 * Created by zph on 2018/6/12.
 */

public class TagCloudConfiguration {
    private static final int DEFAULT_LINE_SPACING = 5;
    private static final int DEFAULT_TAG_SPACING = 10;
    private static final int DEFAULT_FIXED_COLUMN_SIZE = 3; //默认列数

    private int lineSpacing;
    private int tagSpacing;
    private int columnSize;
    private boolean isFixed;

    public TagCloudConfiguration(Context context, AttributeSet attrs){
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TagCloudLayout);
        try {
            lineSpacing = a.getDimensionPixelSize(R.styleable.TagCloudLayout_lineSpacing, DEFAULT_LINE_SPACING);
            tagSpacing = a.getDimensionPixelSize(R.styleable.TagCloudLayout_tagSpacing, DEFAULT_TAG_SPACING);
            columnSize = a.getInteger(R.styleable.TagCloudLayout_columnSize, DEFAULT_FIXED_COLUMN_SIZE);
            isFixed = a.getBoolean(R.styleable.TagCloudLayout_isFixed,false);
        } finally {
            a.recycle();
        }
    }

    public int getLineSpacing() {
        return lineSpacing;
    }

    public void setLineSpacing(int lineSpacing) {
        this.lineSpacing = lineSpacing;
    }

    public int getTagSpacing() {
        return tagSpacing;
    }

    public void setTagSpacing(int tagSpacing) {
        this.tagSpacing = tagSpacing;
    }

    public int getColumnSize() {
        return columnSize;
    }

    public void setColumnSize(int columnSize) {
        this.columnSize = columnSize;
    }

    public boolean isFixed() {
        return isFixed;
    }

    public void setIsFixed(boolean isFixed) {
        this.isFixed = isFixed;
    }
}

package com.zjb.qj.view.widget.flow;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import com.zjb.qj.R;

import java.util.List;

/**
 * Created by zph on 2018/6/12.
 */

public class TagBaseAdapter extends BaseAdapter {

    private Context mContext;
    private List<TagCloudBean> mList;

    public TagBaseAdapter(Context context, List<TagCloudBean> list) {
        mContext = context;
        mList = list;
    }

    @Override
    public int getCount() {
        return mList.size();
    }

    @Override
    public TagCloudBean getItem(int position) {
        return mList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            convertView = LayoutInflater.from(mContext).inflate(R.layout.item_flow, null);
            holder = new ViewHolder();
            holder.tagBtn = (TextView) convertView.findViewById(R.id.item_flow_tv);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        String text = getItem(position).getName();
        holder.tagBtn.setText(text);
        Boolean state = getItem(position).isState();
        if (state) {
            holder.tagBtn.setBackgroundDrawable(mContext.getResources().getDrawable(R.drawable.bg_flow_normal));
            holder.tagBtn.setTextColor(mContext.getResources().getColor(R.color.white));
        } else {
            holder.tagBtn.setBackgroundDrawable(mContext.getResources().getDrawable(R.drawable.bg_flow));
            holder.tagBtn.setTextColor(mContext.getResources().getColor(R.color.flow_color));
        }
        return convertView;
    }

    static class ViewHolder {
        TextView tagBtn;
    }
}

package com.zjb.qj.view.widget.flow;

/**
 * Created by zph on 2018/6/13.
 */

public class TagCloudBean {

    private String name;//标签名
    private boolean state;//标签状态 是否选中


    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public boolean isState() {
        return state;
    }

    public void setState(boolean state) {
        this.state = state;
    }

}

 <!--流式布局-->
    <declare-styleable name="TagCloudLayout">
        <attr name="lineSpacing" format="dimension" />
        <attr name="tagSpacing" format="dimension" />
        <!-- 是否是固定布局 -->
        <attr name="isFixed" format="boolean" />
        <attr name="columnSize" format="integer" />
    </declare-styleable>
Android中常见的热门标签的流式布局的实现
我生苍茫
04-14 1万+
一、概述： 在日常的app使用中，我们会在android 的app中看见 热门标签等自动换行的流式布局，今天，我们就来看看如何 自定义一个类似热门标签那样的流式布局吧（源码下载在下面最后给出） 类似的自定义布局。下面我们就来详细介绍流式布局的应用特点以及用的的技术点： 1.流式布局的特点以及应用场景 特点：当上面一行的空间不够容纳新的TextView时候， 才开辟下一行的空间 　　原理图：
Android 流式布局
m0_70083062的博客
05-10 674
public class XFlowLayout extends ViewGroup { private int childHorizontalSpace; private int childVerticalSpace; private Map<Object, Location> mLocationMap; public XFlowLayout(Context context, AttributeSet attrs) { super(context, attrs); TypedArray att
FlexboxLayout：Android流式布局的优越选择
最新发布
weixin_35006125的博客
07-28 716
FlowLayout，也称为流式布局，是一种简单而又灵活的布局方式，它按照元素添加的顺序从左到右、从上到下排列子元素。这种布局模式类似于报纸的排版，其中元素就像是报纸上的文章，会自动换行显示。具体来说，FlowLayout不依赖于任何预设的布局参数，如权重或大小，而是通过自适应父容器宽度来确定子元素的位置。当子元素填满一行时，自动切换到下一行继续排列，直到所有的子元素都被渲染完成。
Android流式布局
细心程度决定你的成败
06-21 2248
概述 大家都知道，java 图形编程有一个布局叫FlowLayout，即流式布局。但Android没有，所以今天教大家写一个Android版的流式布局。 代码 核心代码（FlowLayout.java）如下： [java] view plain copy package com.example.flowlayout;     
Android 流式布局LinearLayout
abliudede的博客
02-07 922
在安卓中，我们并没有现成的布局去实现自动流式的布局，这里给大家分享一个 FlowLinearLayout 。希望能帮到有需要的人。 package com.utils.widget; import android.content.Context; import android.util.AttributeSet; import android.view.View; import and
Android流式布局FlowLayout详解
01-20
在Android开发中，流式布局（FlowLayout）是一种常用的布局方式，尤其在商城类应用中，用于实现选择属性的功能。在本文中，我们将深入探讨FlowLayout的工作原理以及如何在项目中使用它。 FlowLayout可以被视为一个...
掌握Android流式布局技术要点与应用
标题中提到的“android流式布局”指的是在Android开发中使用的一种布局方式，该方式可以有效地组织用户界面元素，使得界面元素可以根据屏幕大小和设备方向灵活地排列和调整。流式布局一般可以理解为是一种基于流动的...
Android流式布局与规格选择实现指南
针对流式布局Flow Lay和SKU属性选择的实现，开发者需要具备对Android UI组件深入理解和应用的能力，同时还需要掌握事件监听、状态管理等相关编程技巧。在实际开发过程中，对这些知识点的熟练运用可以极大提高应用的...
实现自定义对齐的Android流式布局器
资源摘要信息:"android-flowlayout"是一个Android开发中的自定义视图组件，其主要功能是实现一种可以设置对齐方式和排列方向的流式布局。它允许开发者在Android应用中创建具有灵活布局的用户界面，这种布局能够根据...
Android流式布局的简单实现
04-11
用线性布局实现流式布局
android流式布局
01-26
android 流式布局，可以设置水平垂直间隔
android 流式布局
Anthonybuer的博客
12-27 713
流式布局我推荐使用鸿洋大神https://github.com/hongyangAndroid/FlowLayout 使用 1.在布局中放置流式布局控件 &lt;com.dejun.passionet.commonsdk.widget.flowlayout.TagFlowLayout android:id="@+id/circle_conversation_tfl" andro...
Android 自定义View --- 流式布局FlowLayout
a18211246446的博客
06-27 1896
测量子View的方法是View.measure(int widthMeasureSpec, int heightMeasureSpec),widthMeasureSpec和heightMeasureSpec参数可以通过getChildMeasureSpec(int spec, int padding, int childDimension)方法获取，spec是View的MeasureSpec，可以是width或height；//全部子View布局完后，清除子View的保存。//更新这一行已使用的最大高度。
Android流式布局的使用
Northwestern的专栏
06-01 385
1 基本功能 当控件在同一行的控件不够时，自动换行显示 2 使用场景 标签的展示，比如热搜标签，如下图 支付宝搜索框的搜索历史界面 3 实现方式 A 自定义ViewGroup实现流式布局 https://blog.youkuaiyun.com/u013107751/article/details/81701606 B RecyclerView实现流式布局 C 第三方成熟的开源的控件 http://www.apkbus.com/thread-258800-1-1.html ...
Android自定义流式布局
qq_36158551的博客
01-16 4422
       在日常的app使用中，我们会在android 的app中看见 热门标签等自动换行的流式布局，今天，我们就来看看如何自定义一个类似热门标签那样的流式布局。下面我们就来详细介绍流式布局的应用特点以及用的的技术点。 1.流式布局的特点以及应用场景         特点：当上面一行的空间不够容纳新的TextVi...
安卓流式布局
weixin_43814403的博客
03-06 486
##个人名言–他日若遂凌云志，敢笑黄巢不丈夫 先上代码 新建类继承ViewGroup /** * @Auther: luck * @Date: 2019/3/6 08:55:33 * @Description: */ public class CustView extends ViewGroup { public CustView(Context context) { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

魑魅魍魉9527

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值