简单的流式布局（移动应用开发）

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>