简单的流式布局(完整版)
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"?>
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">
android:layout_width="match_parent"
android:layout_height="65dp"
android:background="@null"
>
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" />
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">
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" />
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">
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" />
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="搜索"
/>
android:paddingTop="20dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="热搜"
android:textSize="20sp"
/>
android:id="@+id/search_flowlayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#fff"
android:paddingTop="10dp"
>
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"?>
xmlns:android="http://schemas.android.com/apk/res/android">
android:color="#ffffff" />
android:width="1dp"
android:color="#9e9e9e" />
android:radius="45dp" />