流式布局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);}@Overrideprotected 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() {@Overridepublic 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);}@Overrideprotected 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"><FrameLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:paddingTop="10dp"android:paddingBottom="10dp"android:background="#E6E6E6"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="45dp"android:orientation="horizontal"android:background="@drawable/search_bg"android:layout_marginLeft="10dp"android:layout_marginRight="10dp"><ImageViewandroid:layout_width="40dp"android:layout_height="40dp"android:layout_marginLeft="10dp"android:layout_gravity="center_vertical"android:background="@drawable/search1"/><EditTextandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@null"/></LinearLayout></FrameLayout><com.org.sleepgod.widget.SearchFlowLayoutandroid: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女生宿舍"};@Overrideprotected 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() {@Overridepublic 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" /><strokeandroid:width="1dp"android:color="#61e0fe" /><paddingandroid: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

流式布局SearchFlowLayout相关推荐

从上往下流式布局_教大家怎么写前端布局
一.静态布局(Static Layout) 1. 布局概念最传统.原始的Web布局设计.网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow: ...
html流式布局怎么用,css 流式布局什么意思？
流式布局,也叫百分比布局,是移动端开发中经常使用的布局方式之一.流式布局在CSS2时代就有,主要是靠百分比进行排版,可以在不同分辨率下显示相同的版式. 流式布局:网页中主要的划分区域的尺寸使用百分数( ...
02移动端布局基础之流式布局项目实战(京东移动端首页)
技术交流QQ群:1027579432,欢迎你的加入! 1.技术选型方案:采取单独制作移动页面方案技术:布局采取流式布局 2.搭建相关文件夹结构 3.设置视口标签以及引入初始化样式 ``` < ...
01移动端布局基础之流式布局
技术交流QQ群:1027579432,欢迎你的加入! 1.移动端基础浏览器现状 PC端常见浏览器:360浏览器.谷歌浏览器.火狐浏览器.QQ浏览器.百度浏览器.搜狗浏览器.IE浏览器等. 移动端常见 ...
android 流失布局,Android使用RecyclerView实现流式布局的注意事项
纯手打,不喜勿喷 long may the sun shine 众所周知,Android开发中Recycleview的功能十分强大,可以实现各种炫酷的效果,今天我根据最近开发的一个项目简要说下流式布局 ...
两栏布局，三栏布局，等高布局，流式布局
读前笑一笑: 我前面一女生平胸,然后我问她哪天你晚上自己回家,被劫色怎么办-? 她淡淡的回了句:"我就脱了上衣,然后说,别激动,是自己人"--自己人--己人-人- 两栏布局: 1. ...
Android自定义流式布局-FlowLayout
很多App在搜索页时都有对热门标签的一个排列,而Android官方没有对应的布局控件,所以自己写了一个流式布局(也称标签布局)--FlowLayout. 为了大家使用的方便,没有添加自定义属性,所以需 ...
静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...
自定义控件：流式布局
实现代码 public class FlowLayout extends ViewGroup {private List<Line> mLines = new ArrayList<L ...

流式布局SearchFlowLayout

流式布局SearchFlowLayout相关推荐

最新文章

热门文章