流式布局SearchFlowLayout

看到搜索框下面一般都有最近的搜索记录，这些搜索记录一般是流式布局，下面的是一个流式布局，一个继承ViewGroup的自定义view,其中一种使用场景就是在搜索框下面，效果图如下：

下面是SearchFlowLayout的源码：

public class SearchFlowLayout extends ViewGroup {    List<Line> lines = new ArrayList<Line>();//所有的行    private Line currentLine;    public SearchFlowLayout(Context context) {        super(context);    }    public SearchFlowLayout(Context context, AttributeSet attrs) {        super(context, attrs);    }    public SearchFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);    }    private OnItemClickListener mListener;    public void setOnItemClickListener(OnItemClickListener listener) {        this.mListener = listener;    }    public interface OnItemClickListener {        void click(int position);    }    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        lines.clear();        currentLine = null;        int width = MeasureSpec.getSize(widthMeasureSpec);        float maxWidth = width - getPaddingLeft() - getPaddingRight();        float horizontalDistance = dp2px(getContext(), 10);        float vercitalDistance = dp2px(getContext(), 10);        int childCount = getChildCount();        currentLine = new Line(maxWidth, horizontalDistance, vercitalDistance);        lines.add(currentLine);        for (int i = 0; i < childCount; i++) {            View childView = getChildAt(i);            final int position = i;            childView.setOnClickListener(new OnClickListener() {                @Override                public void onClick(View v) {                    if (mListener != null) {                        mListener.click(position);                    }                }            });            measureChild(childView, widthMeasureSpec, heightMeasureSpec);            if (currentLine.canAddView(childView)) {                currentLine.addView(childView);            } else {                currentLine = new Line(maxWidth, horizontalDistance, vercitalDistance);                if (currentLine.canAddView(childView)) {                    currentLine.addView(childView);                }                lines.add(currentLine);            }        }        int hight = 0;        for (int i = 0; i < lines.size(); i++) {            if (i == 0) {                hight += getPaddingTop();            } else if (i == lines.size() - 1) {                hight += getPaddingBottom();            }            hight += lines.get(i).mLineHight + vercitalDistance;        }        setMeasuredDimension(width, hight);    }    @Override    protected void onLayout(boolean changed, int l, int t, int r, int b) {        int lineTop = getPaddingTop();        for (int i = 0; i < lines.size(); i++) {            Line line = lines.get(i);            line.layout(lineTop);            lineTop += line.mLineHight + line.mVercitalDistance;        }    }    /**     * 每一行     */    class Line {        public List<View> mViews = new ArrayList<View>();        public float mHorizontalDistance;//行中两个子View之间水平间距        public float mVercitalDistance;//两个行竖直间距        public float mMaxWidth;//行中的最大的宽度        public float mUseWidth;//行中已经使用的宽度        public float mLineHight;//行的高度        public Line(float maxWidth, float horizontalDistance, float vercitalDistance) {            this.mMaxWidth = maxWidth;            this.mHorizontalDistance = horizontalDistance;            this.mVercitalDistance = vercitalDistance;        }        /**         * 是否能添加View         *         * @param view         * @return         */        private boolean canAddView(View view) {            if (mViews.size() == 0) {                mUseWidth += getPaddingLeft() + getPaddingRight() + view.getMeasuredWidth();                return true;            } else {                mUseWidth += view.getMeasuredWidth() + mHorizontalDistance;            }            if (mUseWidth <= mMaxWidth) {                return true;            }            return false;        }        /**         * 添加View         *         * @param view         */        private void addView(View view) {            mViews.add(view);            mLineHight = mLineHight < view.getMeasuredHeight() ? view.getMeasuredHeight() : mLineHight;        }        /**         * 摆放子view         */        private void layout(int lineTop) {            int left = getPaddingLeft();            int top = lineTop;            int right = 0;            int bottom = 0;            for (int i = 0; i < mViews.size(); i++) {                View view = mViews.get(i);                right = left + view.getMeasuredWidth();                bottom = top + view.getMeasuredHeight();                view.layout(left, top, right, bottom);                left += view.getMeasuredWidth() + mHorizontalDistance;            }        }    }    /**     * dp转px     *     * @param context     * @param dp     * @return     */    public int dp2px(Context context, float dp) {        float density = context.getResources().getDisplayMetrics().density;        int px = (int) (dp * density + 0.5f);        return px;    }}

使用：

xml布局：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <FrameLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:paddingTop="10dp"        android:paddingBottom="10dp"        android:background="#E6E6E6">        <LinearLayout            android:layout_width="match_parent"            android:layout_height="45dp"            android:orientation="horizontal"            android:background="@drawable/search_bg"            android:layout_marginLeft="10dp"           android:layout_marginRight="10dp">            <ImageView                android:layout_width="40dp"                android:layout_height="40dp"                android:layout_marginLeft="10dp"                android:layout_gravity="center_vertical"                android:background="@drawable/search1"/>            <EditText                android:layout_width="match_parent"                android:layout_height="match_parent"                android:background="@null"                />        </LinearLayout>    </FrameLayout>    <com.org.sleepgod.widget.SearchFlowLayout        android:id="@+id/fl_view"        android:padding="10dp"        android:layout_width="match_parent"        android:layout_height="wrap_content">    </com.org.sleepgod.widget.SearchFlowLayout></LinearLayout>

java代码：

public class FlowLayoutActivity extends Activity {    private SearchFlowLayout mSearchFlowLayout;    private String[] mNames = new String[]{"大主宰","龙王传说","一念永恒","雪鹰领主","帝霸","最强狂兵","美食供应商","我是大明星","全职法师","我的贴身校花","重生完美时代"    ,"318女生宿舍"};    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_flowlayout);        mSearchFlowLayout = (SearchFlowLayout) findViewById(R.id.fl_view);        for (int i = 0; i < mNames.length; i++) {            TextView textView = new TextView(this);            textView.setText(mNames[i]);            textView.setBackgroundResource(R.drawable.text_bg);            GradientDrawable gradientDrawable = (GradientDrawable) textView.getBackground();            gradientDrawable.setStroke(1, UIUtils.randomColor());            mSearchFlowLayout.addView(textView);        }        mSearchFlowLayout.setOnItemClickListener(new SearchFlowLayout.OnItemClickListener() {            @Override            public void click(int position) {                Toast.makeText(FlowLayoutActivity.this,mNames[position],Toast.LENGTH_SHORT).show();            }        });    }}

text_bg

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <solid android:color="#FFFFFF" />    <stroke        android:width="1dp"        android:color="#61e0fe" />    <padding        android:bottom="6dp"        android:left="10dp"        android:right="10dp"        android:top="6dp" />    <corners android:radius="25dp" /></shape>

search_bg

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">    <corners android:radius="25dp"/>    <solid android:color="#FFF"/>    <stroke android:color="#7A7A7A"></stroke></shape>

源码链接：https://github.com/sleepgodMaster/sleepgod-master/blob/master/src/main/java/com/org/sleepgod/widget/SearchFlowLayout.java