流式布局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