自定义流布局

1480阅读　0评论2015-04-15　vibe26
分类：Android平台


FlowLayout.java

  1. package cn.com.xiebiao.flowlayout;

  3. import android.content.Context;
  4. import android.util.AttributeSet;
  5. import android.view.View;
  6. import android.view.ViewGroup;

  8. import java.util.ArrayList;
  9. import java.util.List;

  11. /**
  12.  * Created by vibexie on 3/26/15.
  13.  */
  14. public class FlowLayout extends ViewGroup{

  16.     //三个构造方法
  17.     public FlowLayout(Context context) {
  18.         //super(context);
  19.         this(context,null);
  20.     }

  22.     public FlowLayout(Context context, AttributeSet attrs) {
  23.         //super(context, attrs);
  24.         this(context,attrs,0);

  26.     }

  28.     public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
  29.         super(context, attrs, defStyleAttr);
  30.     }

  32.     //当前ViewGroup对应的LayoutParams
  33.     @Override
  34.     public LayoutParams generateLayoutParams(AttributeSet attrs) {
  35.         return new MarginLayoutParams(getContext(),attrs);
  36.     }

  38.     /*widthMeasureSpec,heightMeasureSpec分别为
  39.      *android:layout_width="match_parent" android:layout_height="match_parent">
  40.      * 也就是父ViewGroup传递进来的值
  41.      */
  42.     @Override
  43.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  44.         /*容器ViewGroup的宽度和模式，android:layout_width="match_parent"对应模式MeasureSpec.EXACTLY;
  45.           android:layout_width="match_parent"对应模式MeasureSpec.AT_MOST;
  46.           还有一种模式不常用MeasureSpec.UNSPECIFIED
  47.          */
  48.         int sizeWidth=MeasureSpec.getSize(widthMeasureSpec);
  49.         int modeWidth=MeasureSpec.getMode(widthMeasureSpec);
  50.         /*容器ViewGroup的宽度和模式，同width*/
  51.         int sizeHeigth=MeasureSpec.getSize(heightMeasureSpec);
  52.         int modeHeigth=MeasureSpec.getMode(heightMeasureSpec);

  54.         /*如上，是match_parent的时候，sizeWidth和sizeHeigth可以在父viewGroup中得到
  55.              但是如果是warp_content时，就需要自己计算sizeWidth和sizeHeigth
  56.              */
  57.         //记录最大宽度和最大高度对应的宽和高
  58.         int width=0;
  59.         int heigth=0;
  60.         //记录每一行的宽度和高度
  61.         int lineWidth=0;
  62.         int lineHeigth=0;
  63.         //得到内部元素的个数
  64.         int cCount=getChildCount();

  66.         //遍历子View
  67.         for(int i=0;i<cCount;i++){
  68.             View child=getChildAt(i);

  70.             /*测量子view的宽和高
  71.               protected void measureChild(android.view.View child, int parentWidthMeasureSpec, int parentHeightMeasureSpec)
  72.              */
  73.             measureChild(child,widthMeasureSpec,heightMeasureSpec);

  75.             /*得到LayoutParams,必须由于父View的LayoutParams相一致，
  76.               即与public LayoutParams generateLayoutParams(AttributeSet attrs)返回的一致
  77.               */
  78.             MarginLayoutParams layoutParams=(MarginLayoutParams)child.getLayoutParams();

  80.             //子View占据的宽度
  81.             int childWidth=child.getMeasuredWidth()+layoutParams.leftMargin+layoutParams.rightMargin;
  82.             //子View占据的高度
  83.             int childHeigth=child.getMeasuredHeight()+layoutParams.topMargin+layoutParams.bottomMargin;

  85.             if((lineWidth+childWidth)>sizeWidth){
  86.                 //如果此行的宽度+下一个子View的宽度大于容器ViewGroup的宽度，则换行
  87.                 //记录的最大宽度width和本行的宽度lineWidth比较，得到最大的宽度再记录
  88.                 width=Math.max(width,lineWidth);
  89.                 //重置lineWidth
  90.                 lineWidth=childWidth;
  91.                 //记录行高
  92.                 heigth+=lineHeigth;
  93.                 //重置lineHeigth
  94.                 lineHeigth=childHeigth;
  95.             }else {
  96.                 //不换行
  97.                 //叠加行宽
  98.                 lineWidth+=childWidth;
  99.                 //得到当前行最到的高度
  100.                 lineHeigth=Math.max(lineHeigth,childHeigth);
  101.             }

  103.             if(i==cCount-1){
  104.                 //到达最后一个子view
  105.                 width=Math.max(lineWidth,width);
  106.                 heigth+=lineHeigth;
  107.             }
  108.         }

  110.         //设定最终尺寸
  111.         setMeasuredDimension(modeWidth==MeasureSpec.EXACTLY?sizeWidth:width,modeHeigth==MeasureSpec.EXACTLY?sizeHeigth:heigth);

  113.         //super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  114.     }

  116.     //保存所有的View,以分行的方式保存
  117.     private List<List<View>> mAllViews=new ArrayList<List<View>>();

  119.     //每一行的高度
  120.     private List<Integer> mLineHeigth=new ArrayList<Integer>();

  122.     @Override
  123.     protected void onLayout(boolean b, int i, int i2, int i3, int i4) {
  124.         //调用多次onlayout方法时，清空保存的内容
  125.         mAllViews.clear();
  126.         mLineHeigth.clear();

  128.         //当前ViewGroup的宽度，之前已经执行了onMesure()方法
  129.         int width=getWidth();

  131.         int lineWidth=0;
  132.         int lineHeigth=0;

  134.         //存放每一行的View
  135.         List<View> lineViews=new ArrayList<View>();

  137.         //子View的个数
  138.         int cCount=getChildCount();

  140.         for(int j=0;j<cCount;j++){
  141.             View child=getChildAt(j);
  142.             MarginLayoutParams layoutParams=(MarginLayoutParams)child.getLayoutParams();

  144.             int childWidth=child.getMeasuredWidth();
  145.             int childHeigth=child.getMeasuredHeight();

  147.             //如果需要换行
  148.             if((childWidth+lineWidth+layoutParams.leftMargin+layoutParams.rightMargin)>width){
  149.                 //记录lineHeigth
  150.                 mLineHeigth.add(lineHeigth);
  151.                 //记录当前的view
  152.                 mAllViews.add(lineViews);

  154.                 //重置行宽和行高
  155.                 lineWidth=0;
  156.                 lineHeigth=childHeigth+layoutParams.topMargin+layoutParams.bottomMargin;

  158.                 //重置lineViews集合
  159.                 lineViews=new ArrayList<View>();
  160.             }

  162.             //不换行则将child加入lineViews中
  163.             lineWidth+=childWidth+layoutParams.leftMargin+layoutParams.rightMargin;
  164.             lineHeigth=Math.max(lineHeigth,childHeigth+layoutParams.topMargin+layoutParams.bottomMargin);
  165.             lineViews.add(child);
  166.         }

  168.         //处理最后一行
  169.         mLineHeigth.add(lineHeigth);
  170.         mAllViews.add(lineViews);


  173.         //处理子View的位置
  174.         int left=0;
  175.         int top=0;

  177.         //行数
  178.         int lineNum=mAllViews.size();

  180.         for(int j=0;j<lineNum;j++){
  181.             //当前行的所有View
  182.             lineViews=mAllViews.get(j);
  183.             lineHeigth=mLineHeigth.get(j);

  185.             for(int k=0;k<lineViews.size();k++){
  186.                 View child=lineViews.get(k);

  188.                 //判断child的状态
  189.                 if(child.getVisibility()==View.GONE){
  190.                     continue;
  191.                 }

  193.                 MarginLayoutParams layoutParams=(MarginLayoutParams)child.getLayoutParams();

  195.                 int lc=left+layoutParams.leftMargin;
  196.                 int tc=top+layoutParams.topMargin;
  197.                 int rc=lc+child.getMeasuredWidth();
  198.                 int bc=tc+child.getMeasuredHeight();

  200.                 //为子View布局
  201.                 child.layout(lc,tc,rc,bc);

  203.                 left+=child.getMeasuredWidth()+layoutParams.leftMargin+layoutParams.rightMargin;
  204.             }

  206.             //到达下一行
  207.             left=0;
  208.             top+=lineHeigth;
  209.         }
  210.     }
  211. }

activity_main.xml

  1. <RelativeLayout xmlns:android=""
  2.     xmlns:tools="" android:layout_width="match_parent"
  3.     android:layout_height="match_parent" >

  5.     <cn.com.xiebiao.flowlayout.FlowLayout
  6.         android:layout_width="wrap_content"
  7.         android:layout_height="wrap_content">
  8.         <Button
  9.             android:layout_width="wrap_content"
  10.             android:layout_height="wrap_content"
  11.             android:text="hello"/>
  12.         <Button
  13.             android:layout_width="wrap_content"
  14.             android:layout_height="wrap_content"
  15.             android:text="welocom"/>
  16.         <Button
  17.             android:layout_width="wrap_content"
  18.             android:layout_height="wrap_content"
  19.             android:text="fdsfsd"/>
  20.         <Button
  21.             android:layout_width="wrap_content"
  22.             android:layout_height="wrap_content"
  23.             android:text="fdsfdsgdgdfgdfgf"/>
  24.         <Button
  25.             android:layout_width="wrap_content"
  26.             android:layout_height="wrap_content"
  27.             android:text="ghfdhdgfhdfghdgfh"/>
  28.         <Button
  29.             android:layout_width="wrap_content"
  30.             android:layout_height="wrap_content"
  31.             android:text="ggg"/>

  33.     </cn.com.xiebiao.flowlayout.FlowLayout>

  35. </RelativeLayout>

MainActivity.java

  1. package cn.com.xiebiao.flowlayout;

  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.view.Menu;
  6. import android.view.MenuItem;


  9. public class MainActivity extends Activity {

  11.     @Override
  12.     protected void onCreate(Bundle savedInstanceState) {
  13.         super.onCreate(savedInstanceState);
  14.         setContentView(R.layout.activity_main);
  15.     }


  18.     @Override
  19.     public boolean onCreateOptionsMenu(Menu menu) {
  20.         // Inflate the menu; this adds items to the action bar if it is present.
  21.         getMenuInflater().inflate(R.menu.menu_main, menu);
  22.         return true;
  23.     }

  25.     @Override
  26.     public boolean onOptionsItemSelected(MenuItem item) {
  27.         // Handle action bar item clicks here. The action bar will
  28.         // automatically handle clicks on the Home/Up button, so long
  29.         // as you specify a parent activity in AndroidManifest.xml.
  30.         int id = item.getItemId();

  32.         //noinspection SimplifiableIfStatement
  33.         if (id == R.id.action_settings) {
  34.             return true;
  35.         }

  37.         return super.onOptionsItemSelected(item);
  38.     }
  39. }


上一篇：打造漂亮的gnome UI
下一篇：邮件发送工具类