移动开发流式布局解析

18-05-31 来源：[db:作者]

收藏我要投稿

移动开发流式布局解析。

line2.xml

xml version="1.0" encoding="utf-8">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <solid android:color="#F0F0F0" />
 <corners android:radius="10dp" />
 <padding
  android:left="5dp"
  android:right="5dp"
  android:top="5dp"
  android:bottom="5dp"
  />
shape>

line3.xml

xml version="1.0" encoding="utf-8">
<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <solid android:color="#F0F2F5" />
 <stroke
  android:width="0.01dp"
  android:color="#bfbfbf" />
 <corners
  android:radius="20dp"
  />
shape>

FlowLayout

package com.example.asus.yklx2.utils;


import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;
import java.util.List;

/**
 * 流布局
 */
public class FlowLayout extends ViewGroup {
 //存储所有子View
 private List<>> mAllChildViews = new ArrayList<>();
 //每一行的高度
 private List mLineHeight = new ArrayList<>();
 public FlowLayout(Context context) {
  this(context,null);
 }

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

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

 }

 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {


  mAllChildViews.clear();
  mLineHeight.clear();
  //获取当前ViewGroup的宽度
  int width = getWidth();


  int lineWidth = 0;
  int lineHeight = 0;
  //记录当前行的view
  List lineViews = new ArrayList();
  int childCount = getChildCount();
  for(int i = 0;i < childCount; i ++){
View child = getChildAt(i);
MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
int childWidth = child.getMeasuredWidth();
int childHeight = child.getMeasuredHeight();


//如果需要换行
if(childWidth + lineWidth + lp.leftMargin + lp.rightMargin > width){
 //记录LineHeight
 mLineHeight.add(lineHeight);
 //记录当前行的Views
 mAllChildViews.add(lineViews);
 //重置行的宽高
 lineWidth = 0;
 lineHeight = childHeight + lp.topMargin + lp.bottomMargin;
 //重置view的集合
 lineViews = new ArrayList();
}
lineWidth += childWidth + lp.leftMargin + lp.rightMargin;
lineHeight = Math.max(lineHeight, childHeight + lp.topMargin + lp.bottomMargin);
lineViews.add(child);
  }
  //处理最后一行
  mLineHeight.add(lineHeight);
  mAllChildViews.add(lineViews);


  //设置子View的位置
  int left = 0;
  int top = 0;
  //获取行数
  int lineCount = mAllChildViews.size();
  for(int i = 0; i < lineCount; i ++){
//当前行的views和高度
lineViews = mAllChildViews.get(i);
lineHeight = mLineHeight.get(i);
for(int j = 0; j < lineViews.size(); j ++){
 View child = lineViews.get(j);
 //判断是否显示
 if(child.getVisibility() == View.GONE){
  continue;
 }
 MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();
 int cLeft = left + lp.leftMargin;
 int cTop = top + lp.topMargin;
 int cRight = cLeft + child.getMeasuredWidth();
 int cBottom = cTop + child.getMeasuredHeight();
 //进行子View进行布局
 child.layout(cLeft, cTop, cRight, cBottom);
 left += child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
}
left = 0;
top += lineHeight;
  }
 }

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  // TODO Auto-generated method stub


  //父控件传进来的宽度和高度以及对应的测量模式
  int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
  int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
  int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
  int modeHeight = MeasureSpec.getMode(heightMeasureSpec);


  //如果当前ViewGroup的宽高为wrap_content的情况
  int width = 0;//自己测量的 宽度
  int height = 0;//自己测量的高度
  //记录每一行的宽度和高度
  int lineWidth = 0;
  int lineHeight = 0;


  //获取子view的个数
  int childCount = getChildCount();
  for(int i = 0;i < childCount; i ++){
View child = getChildAt(i);
//测量子View的宽和高
measureChild(child, widthMeasureSpec, heightMeasureSpec);
//得到LayoutParams
MarginLayoutParams lp = (MarginLayoutParams) getLayoutParams();
//子View占据的宽度
int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
//子View占据的高度
int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
//换行时候
if(lineWidth + childWidth > sizeWidth){
 //对比得到最大的宽度
 width = Math.max(width, lineWidth);
 //重置lineWidth
 lineWidth = childWidth;
 //记录行高
 height += lineHeight;
 lineHeight = childHeight;
}else{//不换行情况
 //叠加行宽
 lineWidth += childWidth;
 //得到最大行高
 lineHeight = Math.max(lineHeight, childHeight);
}
//处理最后一个子View的情况
if(i == childCount -1){
 width = Math.max(width, lineWidth);
 height += lineHeight;
}
  }
  //wrap_content
  setMeasuredDimension(modeWidth == MeasureSpec.EXACTLY  sizeWidth : width,
 modeHeight == MeasureSpec.EXACTLY  sizeHeight : height);
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 }
 /**
  * 与当前ViewGroup对应的LayoutParams
  */
 @Override
 public LayoutParams generateLayoutParams(AttributeSet attrs) {
  // TODO Auto-generated method stub
  return new MarginLayoutParams(getContext(), attrs);
 }
}

MainActivity

package com.example.asus.yklx2.ui.search;

import android.content.Intent;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.view.View;
import android.view.ViewGroup;
import android.widget.EditText;
import android.widget.ListView;
import android.widget.TextView;
import android.widget.Toast;

import com.example.asus.yklx2.R;
import com.example.asus.yklx2.ui.search.adapter.myBaseAdapter;
import com.example.asus.yklx2.utils.FlowLayout;
import com.example.asus.yklx2.utils.MyTitle;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {
 private String mNames[] = {
"平板","电脑","手机"
 };
 private List list=new ArrayList<>();
 private MyTitle mTit;
 private FlowLayout mFlo;
 private ListView mLv;
 private TextView bt;
 private EditText et;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  initView();


  initChildViews();
  jilu();
 }

 private void initView() {
  mTit = (MyTitle) findViewById(R.id.tit);
  mFlo = (FlowLayout) findViewById(R.id.flo);
  mLv = (ListView) findViewById(R.id.lv);
  bt = (TextView) findViewById(R.id.sousuo);
  et = (EditText) findViewById(R.id.et);
 }
 private void initChildViews() {
  ViewGroup.MarginLayoutParams ip = new ViewGroup.MarginLayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
  ip.leftMargin=5;
  ip.rightMargin = 5;
  ip.topMargin = 5;
  ip.bottomMargin = 5;
  for( int i = 0; i < mNames.length; i ++){
TextView view = new TextView(this);
view.setText(mNames[i]);
view.setTextColor(Color.BLACK);
view.setBackgroundDrawable(getResources().getDrawable(R.drawable.line2));
mFlo.addView(view,ip);
final int finalI = i;
view.setOnClickListener(new View.OnClickListener() {
 @Override
 public void onClick(View v) {

  Intent intent = new Intent(MainActivity.this, SearchActivity.class);
  intent.putExtra("keywords",mNames[finalI]);
  startActivity(intent);
  list.add(mNames[finalI]);
  mLv.setAdapter(new myBaseAdapter(MainActivity.this,list));


 }
});


  }
 }
 private void jilu() {
  mTit.setJiekou(new MyTitle.onsetHuida() {
@Override
public void huida(String aa) {
// Toast.makeText(MainActivity.this, aa+"", Toast.LENGTH_SHORT).show();
 list.add(aa);
 mLv.setAdapter(new myBaseAdapter(MainActivity.this,list));
 if (!TextUtils.isEmpty(et.getText().toString())) {


  Intent intent = new Intent(MainActivity.this, SearchActivity.class);
  intent.putExtra("keywords", et.getText().toString());
  startActivity(intent);
 }
}
  });

  mLv.setAdapter(new myBaseAdapter(MainActivity.this,list));
 }
}

activity_main.xml

xml version="1.0" encoding="utf-8">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:orientation="vertical"
 android:layout_height="match_parent"
 tools:context="com.example.asus.yklx2.ui.search.MainActivity">
 <com.example.asus.yklx2.utils.MyTitle
  android:id="@+id/tit"
  android:layout_width="match_parent"
  android:layout_height="70dp">com.example.asus.yklx2.utils.MyTitle>
 <TextView
  android:text="搜索发现"
  android:textSize="25dp"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />
 <RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="100dp">
 <com.example.asus.yklx2.utils.FlowLayout
  android:id="@+id/flo"
  android:layout_width="match_parent"
  android:layout_height="100dp"
  android:layout_margin="5dp">com.example.asus.yklx2.utils.FlowLayout>
 RelativeLayout>
 <TextView
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:text="历史记录"
  android:textSize="25dp" />
 <ListView
  android:id="@+id/lv"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />

LinearLayout>

点击复制链接与好友分享!回本站首页