簡單的流式佈局(完整版)

1.首先創建一個自定義View類:

public class CustomView extends ViewGroup {
    private int mleftMargin=20;
    private int mtopMargin=20;

    public CustomView(Context context) {
        this(context,null);
    }

    public CustomView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        measureChildren(widthMeasureSpec,heightMeasureSpec);

        int leftMargin = mleftMargin;
        int topMargin = mtopMargin;

        int viewHeight = 0;
        int viewWidth = 0;

        //父控件傳進來的寬度和高度以及對應的測量模式  
        int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
        int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
        int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
        int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

        switch (modeHeight){
            case MeasureSpec.AT_MOST:
                int measuredHeight = 0;
                for (int j = 0; j < getChildCount(); j++) {
                    int measuredWidth = getChildAt(j).getMeasuredWidth();
                    measuredHeight = getChildAt(j).getMeasuredHeight();
                    if (leftMargin+measuredWidth+mleftMargin>getWidth()){
                        leftMargin=mleftMargin;
                        topMargin+=measuredHeight+mtopMargin;
                    }
                    leftMargin+=measuredWidth+mleftMargin;
                }
                topMargin+=measuredHeight+mtopMargin;
                break;
        }
        setMeasuredDimension(sizeWidth,topMargin);
    }

    @Override
    protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
        int leftMargin = mleftMargin;
        int topMargin = mtopMargin;

        for (int j = 0; j < getChildCount(); j++) {
            int measuredWidth = getChildAt(j).getMeasuredWidth();
            int measuredHeight = getChildAt(j).getMeasuredHeight();
            if (leftMargin+measuredWidth+mleftMargin>getWidth()){
                leftMargin=mleftMargin;
                topMargin+=measuredHeight+mtopMargin;
                getChildAt(j).layout(leftMargin,topMargin,leftMargin+measuredWidth,topMargin+measuredHeight);
            }else {
                getChildAt(j).layout(leftMargin,topMargin,leftMargin+measuredWidth,topMargin+measuredHeight);
            }
            leftMargin+=measuredWidth+mleftMargin;
        }
    }
}

2.自定義搜索框佈局xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".view.activity.SearchActivity">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:background="@null"
        >
        <ImageView
            android:id="@+id/search_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerVertical="true"
            android:layout_marginLeft="15dp"
            android:src="@drawable/sao_kind" />
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="20dp"
            android:layout_toLeftOf="@id/result_search"
            android:layout_toRightOf="@id/search_back"
            android:background="@drawable/addatten_edit"
            android:focusable="true"
            android:focusableInTouchMode="true">
            <ImageView
                android:id="@+id/relation_search"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="9dp"
                android:src="@drawable/a_4" />
            <View
                android:id="@+id/search_line"
                android:layout_width="0.5dp"
                android:layout_height="20dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@id/relation_search"
                android:background="#fff"></View>

            <EditText
                android:id="@+id/search_input_search"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:layout_toRightOf="@id/search_line"
                android:background="@null"
                android:hint="請輸入關鍵詞搜索"
                android:textColor="@color/login_title"
                android:textSize="14sp" />
        </RelativeLayout>
        <TextView
            android:id="@+id/result_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="15dp"
            android:textSize="14sp"
            android:text="搜索"
            />
    </RelativeLayout>
    <TextView
        android:paddingTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="熱搜"
        android:textSize="20sp"
        />
    <com.example.mall.view.custom.CustomView
        android:id="@+id/search_flowlayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#fff"
        android:paddingTop="10dp"
        >
    </com.example.mall.view.custom.CustomView>
    <Button
        android:id="@+id/search_clear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="清空記錄"/>
    <ListView
        android:id="@+id/search_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </ListView>
</LinearLayout>

3.在Activity要寫的內容:

public class SearchActivity extends BaseActivity implements View.OnClickListener {
    String[] name={"手機","電腦","玩具","手機","電腦","蘋果手機", "筆記本電腦", "電飯煲 ", "臘肉",
            "特產", "剃鬚刀", "寶寶", "康佳", "特產", "剃鬚刀", "寶寶", "康佳"};
    private ImageView mSearchBack;
    private ImageView mRelationSearch;
    private View mSearchLine;
    /**
     * 請輸入關鍵詞搜索
     */
    private EditText mSearchInputSearch;
    /**
     * 搜索
     */
    private TextView mResultSearch;
    private CustomView mSearchFlowlayout;
    /**
     * 清空記錄
     */
    private Button mSearchClear;
    private ListView mSearchList;
    private TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }
    @Override
    void initView() {
          mSearchBack = (ImageView) findViewById(R.id.search_back);
          mRelationSearch = (ImageView) findViewById(R.id.relation_search);
          mSearchLine = (View) findViewById(R.id.search_line);
          mSearchInputSearch = (EditText) findViewById(R.id.search_input_search);
          mResultSearch = (TextView) findViewById(R.id.result_search);
          mSearchFlowlayout = (CustomView) findViewById(R.id.search_flowlayout);
          mSearchClear = (Button) findViewById(R.id.search_clear);
          mSearchClear.setOnClickListener(this);
          mSearchList = (ListView) findViewById(R.id.search_list);
    }
    @Override
    void initData() {
         //設置默認顯示
        for (int i = 0; i < name.length; i++) {
            textView = new TextView(this);
            textView.setText(name[i]);
            //設置背景
            textView.setBackground(getDrawable(R.drawable.addatten_edit));
            //設置內邊距
            textView.setPadding(5,5,5,5);
            textView.setTextSize(20);
            //設置顏色
            textView.setTextColor(Color.RED);
            //添加數據
            mSearchFlowlayout.addView(textView);
        }
           //點擊搜索添加
        mResultSearch.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
            String s = mSearchInputSearch.getText().toString();
            textView = new TextView(SearchActivity.this);
            textView.setBackground(getDrawable(R.drawable.addatten_edit));
            textView.setPadding(5,5,5,5);
            textView.setTextSize(20);
            textView.setText(s);
            mSearchFlowlayout.addView(textView); 
            }
        });
          //mSearchFlowlayout.invalidate();  刷新UI佈局
          // mSearchFlowlayout.removeAllViews(); 刪除所有      
          //mSearchFlowlayout.removeView();   刪除單個子控件
    }
    @Override
    BasePresenter setBasePresenter() {
        return null;
    }
    @Override
    int setChildContenView() {
        return R.layout.activity_search;
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            default:
                break;
            case R.id.search_clear:
                mSearchFlowlayout.removeAllViews();
                break;
        }
    }
}

4.自定義邊框:addatten_edit.xml

<?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="#9e9e9e" />
    <!-- 圓角的幅度 -->
    <corners android:radius="45dp" />
</shape>