自定義ViewGroup-第二十一步:Measure與Layout

前言

根據啟艦大大 的博客所學習的自定義View。

一、測量

1. MeasureSpec

MeasureSpec.getMode(int spec) //獲取MODE  
MeasureSpec.getSize(int spec) //獲取數值
  • MODE:
  • MeasureSpec.AT_MOST(至多):子元素至多達到指定大小的值->wrap_content。
  • MeasureSpec.EXACTLY(完全):父元素決定自元素的確切大小,子元素將被限定在給定的邊界里而忽略它本身大小->match_parent。
  • MeasureSpec.UNSPECIFIED(未指定):父元素不對子元素施加任何束縛,子元素可以得到任意想要的大小->具體值。

2. onMeasure()

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)  

一般用法舉例:

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {  
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
    int measureWidth = MeasureSpec.getSize(widthMeasureSpec);  
    int measureHeight = MeasureSpec.getSize(heightMeasureSpec);  
    int measureWidthMode = MeasureSpec.getMode(widthMeasureSpec);  
    int measureHeightMode = MeasureSpec.getMode(heightMeasureSpec);  
      
    //經過計算,控件所占的寬和高分別對應width和height  
    …………  
      
    setMeasuredDimension((measureWidthMode == MeasureSpec.EXACTLY) ? measureWidth: width, (measureHeightMode == MeasureSpec.EXACTLY) ? measureHeight: height);  
}  

3. measureChild與measureChildren
measureChild用來測量子View的寬高

//
protected void measureChild(View child, int parentWidthMeasureSpec,  
            int parentHeightMeasureSpec);

measureChildren是用來測量所有子View的寬高

protected void measureChildren(int widthMeasureSpec, int heightMeasureSpec) {  
        final int size = mChildrenCount;  
        final View[] children = mChildren;  
        for (int i = 0; i < size; ++i) {  
            final View child = children[i];  
            if ((child.mViewFlags & VISIBILITY_MASK) != GONE) {  
                measureChild(child, widthMeasureSpec, heightMeasureSpec);  
            }  
        }  
    } 

二、onLayout():實現所有子控件布局的函數

 protected void onLayout(boolean changed, int left, int top, int right, int bottom) 

自定義實現簡易的縱向LinearLayout:

public class MyLinear extends ViewGroup {
    public MyLinear(Context context) {
        this(context, null);
    }

    public MyLinear(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
        int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(measureWidth);
        int heightMode = MeasureSpec.getMode(measureHeight);
        int height=0;
        int width=0;
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            measureChild(child,widthMeasureSpec,heightMeasureSpec);
            int childHeight=child.getMeasuredHeight();
            int childWidth=child.getMeasuredWidth();
            height+=childHeight;
            width=Math.max(width,childWidth);
        }
        setMeasuredDimension((widthMode==MeasureSpec.EXACTLY)?measureWidth:width,(heightMode==MeasureSpec.EXACTLY)?measureHeight:height);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount = getChildCount();
        int top = 0;
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            child.layout(l, top, l + child.getMeasuredWidth(), top + child.getMeasuredHeight());
            top += child.getMeasuredHeight();
        }
    }
}
    <com.crossroads.demo.demo.MyLinear
        android:background="#00ff00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        <TextView
            android:background="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="自定義"
            />
        <TextView
            android:background="@color/colorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="實現"
            />
        <TextView
            android:background="@color/colorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="簡易LinearLayout效果"
            />
    </com.crossroads.demo.demo.MyLinear>
效果圖

getMeasuredWidth()與getWidth()區別

  • getMeasureWidth()方法在measure()過程結束后就可以獲取到了,
    而getWidth()方法要在layout()過程結束后才能獲取到
  • getMeasureWidth()方法中的值是通過setMeasuredDimension()方法來進行設置的,而getWidth()方法中的值則是通過layout(left,top,right,bottom)方法設置的。

三、獲取子控件Margin

上邊的例子中,發現設置margin無效,那么該怎么設置margin呢?
只需要重寫下邊這三個方法就可以獲取到Margin啦

   @Override
    protected LayoutParams generateLayoutParams(LayoutParams p) {
        return new MarginLayoutParams(p);
    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new  MarginLayoutParams(getContext(),attrs);
    }

    @Override
    protected LayoutParams generateDefaultLayoutParams() {
        return new MarginLayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);
    }

然后,onLayout和onMeasure也需要將margin計算進去滴

  @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
        int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(measureWidth);
        int heightMode = MeasureSpec.getMode(measureHeight);
        int height=0;
        int width=0;
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            measureChild(child,widthMeasureSpec,heightMeasureSpec);
            MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();

            int childHeight=child.getMeasuredHeight()+layoutParams.bottomMargin+layoutParams.topMargin;
            int childWidth=child.getMeasuredWidth()+layoutParams.leftMargin+layoutParams.rightMargin;
            height+=childHeight;
            width=Math.max(width,childWidth);
        }
        setMeasuredDimension((widthMode==MeasureSpec.EXACTLY)?measureWidth:width,(heightMode==MeasureSpec.EXACTLY)?measureHeight:height);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount = getChildCount();
        int top = 0;
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();
            child.layout(l+layoutParams.leftMargin, top+layoutParams.topMargin, l + child.getMeasuredWidth()+layoutParams.leftMargin, top + child.getMeasuredHeight()+layoutParams.topMargin);
            top += child.getMeasuredHeight()+layoutParams.topMargin+layoutParams.bottomMargin;
        }
    }
 <com.crossroads.demo.demo.MyLinear
        android:background="#00ff00"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        >
        <TextView
            android:layout_marginTop="5dp"
            android:background="@color/colorPrimary"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="自定義"
            />
        <TextView
            android:layout_margin="10dp"
            android:background="@color/colorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="實現"
            />
        <TextView
            android:layout_marginBottom="10dp"
            android:background="@color/colorPrimary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="簡易LinearLayout效果"
            />
    </com.crossroads.demo.demo.MyLinear>
flow

四、接下來完成這個效果

自適應

代碼如下:

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners android:radius="180dp"/>
    <padding
        android:bottom="3dp"
        android:left="5dp"
        android:right="5dp"
        android:top="3dp"/>
    <solid android:color="#fff"/>
</shape>
public class FlowLayout extends ViewGroup {
    public FlowLayout(Context context) {
        super(context);
    }

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

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
        int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
        int heightMode = MeasureSpec.getMode(measureHeight);
        int height = 0;//viewGroup高度
        int lineWidth = 0;//累加當前行的行寬
        int lineHeight = 0;//當前行的行高
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            measureChild(child, widthMeasureSpec, heightMeasureSpec);
            MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();
            int childWidthWithMargin = child.getMeasuredWidth() + layoutParams.leftMargin + layoutParams.rightMargin;
            int childHeightWithMargin = child.getMeasuredHeight() + layoutParams.topMargin + layoutParams.bottomMargin;
            if (lineWidth + childWidthWithMargin > measureWidth) {
                //換行
                lineWidth = childWidthWithMargin;
                height += lineHeight;
                lineHeight = childHeightWithMargin;
            }
            else {
                //不換行
                lineHeight = Math.max(childHeightWithMargin, lineHeight);
                lineWidth += childWidthWithMargin;
            }
            //最后一行還沒有計算呢
            if (i == childCount - 1) {
                height += lineHeight;
            }
        }
        setMeasuredDimension(measureWidth, (heightMode == MeasureSpec.EXACTLY) ? measureHeight : height);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount = getChildCount();
        int top = 0;
        int lineWidth = 0, lineHeight = 0;
        for (int i = 0; i < childCount; i++) {
            View child = getChildAt(i);
            MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();
            int childWidthWithMargin = child.getMeasuredWidth() + layoutParams.leftMargin + layoutParams.rightMargin;
            int childHeightWithMargin = child.getMeasuredHeight() + layoutParams.topMargin + layoutParams.bottomMargin;
            if (lineWidth + childWidthWithMargin > getMeasuredWidth()) {
                //換行
                top += lineHeight;
                child.layout(layoutParams.leftMargin, top + layoutParams.topMargin, layoutParams.leftMargin + child.getMeasuredWidth(), top + layoutParams.topMargin + child.getMeasuredHeight());
                lineWidth = childWidthWithMargin;
                lineHeight = childHeightWithMargin;
            }
            else {
                //不換行
                child.layout(lineWidth + layoutParams.leftMargin, top + layoutParams.topMargin, lineWidth + layoutParams.leftMargin + child.getMeasuredWidth(), top + layoutParams.topMargin + child.getMeasuredHeight());
                lineHeight = Math.max(childHeightWithMargin, lineHeight);
                lineWidth += childWidthWithMargin;
            }
        }
    }

    @Override
    protected LayoutParams generateLayoutParams(LayoutParams p) {
        return new MarginLayoutParams(p);
    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(), attrs);
    }

    @Override
    protected LayoutParams generateDefaultLayoutParams() {
        return new MarginLayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
    }
}
  <com.crossroads.demo.demo.FlowLayout
        android:id="@+id/flowLayout"
        android:background="#00ff00"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
  final FlowLayout flowLayout = (FlowLayout) findViewById(R.id.flowLayout);
        flowLayout.removeAllViews();
        for (int i = 0; i < 10; i++) {
            final TextView child = new TextView(this);
            if (i % 7 == 0 || i % 7 == 1)
                child.setText("兩只老虎" + i);
            else if (i % 7 == 2 || i % 7 == 3)
                child.setText("跑得快" + i);
            else if (i % 7 == 4 )
                child.setText("一只沒有尾巴,一只沒有眼睛" + i);
            else
                child.setText("真奇怪" + i);
            child.setTextSize(20);
            child.setBackgroundResource(R.drawable.roundrect);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
            params.setMargins(3, 4, 5, 7);
            child.setLayoutParams(params);
            child.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    flowLayout.removeView(child);
                }
            });
            flowLayout.addView(child);
        }
    }

參考網址

自定義View中的onMeasure,measureChild與measureChildren

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容