android自定义View之margin和padding的处理

转载请注明出处：http://blog.csdn.net/u012732170/article/details/55045472

说起margin和padding，想必大家都不陌生。margin就是指子控件与外部控件的距离，俗称外边距；padding就是指控件内容与控件边界的距离，俗称内边距。当我们使用系统自带的控件时，margin和padding都是生效的，因为系统已经帮我们处理好了，但是当我们自定义View时，如果不单独处理，那么系统是不会识别，不生效的，下面我们来看下今天的例子。

padding的处理

padding的处理
自定义View中的处理

自定义ViewGroup中的处理

margin的处理
自定义ViewGroup中的处理

自定义View中的处理

我们先定义一个自定义View，具体代码如下

/**
* Created by bellnett on 17/2/9.
*/
public class CustomView extends View {

private Paint mPaint;
private int color;
private int width;
private int height;

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

private void init(Context context, AttributeSet attrs) {
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CustomView);
color = array.getColor(R.styleable.CustomView_backgroundColor, Color.BLUE);
array.recycle();
mPaint = new Paint();
mPaint.setStyle(Paint.Style.FILL);
mPaint.setColor(color);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
width = measureWidth(widthMeasureSpec);
height = measureHeight(heightMeasureSpec);
setMeasuredDimension(width,height);
}

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
Rect rect = new Rect();
rect.left = 0;
rect.top = 0;
rect.right = width;
rect.bottom = height;
canvas.drawRect(rect,mPaint);
}

private int measureWidth(int measureSpec) {
int result = 200;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
switch (specMode) {
case MeasureSpec.UNSPECIFIED:
result = specSize;
break;
case MeasureSpec.AT_MOST:
result = Math.min(result, specSize);
break;
case MeasureSpec.EXACTLY:
result = specSize;
break;
}
return result;
}

private int measureHeight(int measureSpec) {
int result = 200;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
switch (specMode) {
case MeasureSpec.UNSPECIFIED:
result = specSize;
break;
case MeasureSpec.AT_MOST:
result = Math.min(result, specSize);
break;
case MeasureSpec.EXACTLY:
result = specSize;
break;
}
return result;
}
}

功能非常简单，就是绘制一个背景，其中单独处理了wrap_content的情况，对于这个wrap_content的单独处理我就不多说了，在上一篇《android View的工作原理》中已经进行了详细说明。

下面看一下布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.bellnet.customview1.CustomView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundColor="@android:color/holo_blue_bright"/>

</RelativeLayout>

显示结果也如我们预期的那样



下面我们给它加一下padding，在布局文件中加入以下代码

android:padding="10dp"

显示结果



没有任何效果，那么如何处理呢，很简单，只要在重载的onDraw(Canvas canvas)方法中修改为以下代码即可

@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
paddingLeft = getPaddingLeft();
paddingTop = getPaddingTop();
paddingRight = getPaddingRight();
paddingBottom = getPaddingBottom();
Rect rect = new Rect();
rect.left = 0 + paddingLeft;
rect.top = 0 + paddingTop;
rect.right = width - paddingRight;
rect.bottom = height - paddingBottom;
canvas.drawRect(rect,mPaint);
}

这样就加上了padding的处理，我们看下效果



没任何问题，padding属性已经生效。

自定义ViewGroup中的处理

自定义ViewGroup处理padding和View有稍许不同，我们之前的文章也说过了，自定义ViewGroup是在dispatchView中遍历子View来让其自行绘制，自己需要绘制的情况比较少见，再结合padding的定义：padding是控件内容与控件边界的距离。假设此时的控件内容就是我们上面的自定义View，那么这个View的大小就是父控件的大小 - padding值，也就是父控件所能给予子控件的最大值，很明显，这个操作我们可以放在父控件的onMeasure方法中。下面我们用代码来验证。

首先是ViewGroup的实现。

/**
* Created by bellnett on 17/2/9.
*/
public class CustomViewGroup extends ViewGroup {

private int paddingLeft;
private int paddingRight;
private int paddingTop;
private int paddingBottom;
private int viewsWidth;//所有子View的宽度之和（在该例子中仅代表宽度最大的那个子View的宽度）
private int viewsHeight;//所有子View的高度之和
private int viewGroupWidth = 0;//ViewGroup算上padding之后的宽度
private int viewGroupHeight = 0;//ViewGroup算上padding之后的高度

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

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
viewsWidth = 0;
viewsHeight = 0;
paddingLeft = getPaddingLeft();
paddingTop = getPaddingTop();
paddingRight = getPaddingRight();
paddingBottom = getPaddingBottom();
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View childView = getChildAt(i);
measureChild(childView, widthMeasureSpec, heightMeasureSpec);
viewsHeight += childView.getMeasuredHeight();
viewsWidth = Math.max(viewsWidth, childView.getMeasuredWidth());
}
/* 用于处理ViewGroup的wrap_content情况 */
viewGroupWidth = paddingLeft + viewsWidth + paddingRight;
viewGroupHeight = paddingTop + viewsHeight + paddingBottom;
setMeasuredDimension(measureWidth(widthMeasureSpec, viewGroupWidth), measureHeight
(heightMeasureSpec, viewGroupHeight));
}

@Override
protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
if (b) {
int childCount = getChildCount();
int mTop = paddingTop;
for (int j = 0; j < childCount; j++) {
View childView = getChildAt(j);
int mLeft = paddingLeft;
childView.layout(mLeft, mTop, mLeft + childView.getMeasuredWidth(), mTop + childView.getMeasuredHeight());
mTop += childView.getMeasuredHeight();
}
}
}

private int measureWidth(int measureSpec, int viewGroupWidth) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
switch (specMode) {
case MeasureSpec.UNSPECIFIED:
result = specSize;
break;
case MeasureSpec.AT_MOST:
/* 将剩余宽度和所有子View + padding的值进行比较，取小的作为ViewGroup的宽度 */
result = Math.min(viewGroupWidth, specSize);
break;
case MeasureSpec.EXACTLY:
result = specSize;
break;
}
return result;
}

private int measureHeight(int measureSpec, int viewGroupHeight) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
switch (specMode) {
case MeasureSpec.UNSPECIFIED:
result = specSize;
break;
case MeasureSpec.AT_MOST:
/* 将剩余高度和所有子View + padding的值进行比较，取小的作为ViewGroup的高度 */
result = Math.min(viewGroupHeight, specSize);
break;
case MeasureSpec.EXACTLY:
result = specSize;
break;
}
return result;
}
}

代码已经写得很清楚了，其中要注意的有两点：

1. 在onMeasure方法中处理ViewGroup的layout_width和layout_height为wrap_content的情况。本例模拟的是类似LinearLayout垂直布局的情景，因此在宽度方面，选择子View中宽度最大的那一个再加上padding值作为ViewGroup预设的宽度；在高度方面，算上所有子View的高度再加上padding值作为ViewGroup预设的高度，最后将预设值与剩余空间进行比较，选择值最小的作为ViewGroup测量之后的值。

2. 在onLayout中处理padding，只需要在布置子View的时候加上padding的值即可。

然后是布局文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.bellnet.customview1.CustomViewGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/holo_red_light"
android:padding="10dp">

<com.bellnet.customview1.CustomView
android:layout_width="250dp"
android:layout_height="wrap_content"
app:backgroundColor="@android:color/holo_blue_bright"/>

<com.bellnet.customview1.CustomView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundColor="@android:color/holo_green_dark"/>

</com.bellnet.customview1.CustomViewGroup>

</RelativeLayout>

其中我将ViewGroup的宽高都设置为wrap_content，大家也可以设置指定的值或者match_parent来自行尝试。

最后我们看下效果：

margin的处理

自定义ViewGroup中的处理

margin的处理方式和自定义ViewGroup中padding的处理方式有点类似，在ViewGroup测量时，算上子View与ViewGroup的margin；在给子View布局时，算上margin即可。

下面我们直接上代码

/**
* Created by bellnett on 17/2/9.
*/
public class CustomViewGroup extends ViewGroup {

private int paddingLeft;
private int paddingRight;
private int paddingTop;
private int paddingBottom;
private int viewsWidth;//所有子View的宽度之和（在该例子中仅代表宽度最大的那个子View的宽度）
private int viewsHeight;//所有子View的高度之和
private int viewGroupWidth = 0;//ViewGroup算上padding之后的宽度
private int viewGroupHeight = 0;//ViewGroup算上padding之后的高度
private int marginLeft
private int marginTop;
private int marginRight;
private int marginBottom;

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

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
viewsWidth = 0;
viewsHeight = 0;
marginLeft = 0;
marginTop = 0;
marginRight = 0;
marginBottom = 0;
paddingLeft = getPaddingLeft();
paddingTop = getPaddingTop();
paddingRight = getPaddingRight();
paddingBottom = getPaddingBottom();
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View childView = getChildAt(i);
MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();
measureChild(childView, widthMeasureSpec, heightMeasureSpec);
viewsHeight += childView.getMeasuredHeight();
viewsWidth = Math.max(viewsWidth, childView.getMeasuredWidth());
marginLeft = Math.max(0,lp.leftMargin);//在本例中找出最大的左边距
marginTop += lp.topMargin;//在本例中求出所有的上边距之和
marginRight = Math.max(0,lp.rightMargin);//在本例中找出最大的右边距
marginBottom += lp.bottomMargin;//在本例中求出所有的下边距之和
}
/* 用于处理ViewGroup的wrap_content情况 */
viewGroupWidth = paddingLeft + viewsWidth + paddingRight + marginLeft + marginRight;
viewGroupHeight = paddingTop + viewsHeight + paddingBottom + marginTop + marginBottom;
setMeasuredDimension(measureWidth(widthMeasureSpec, viewGroupWidth), measureHeight
(heightMeasureSpec, viewGroupHeight));
}

@Override
protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
if (b) {
int childCount = getChildCount();
int mTop = paddingTop;
for (int j = 0; j < childCount; j++) {
View childView = getChildAt(j);
MarginLayoutParams lp = (MarginLayoutParams)childView.getLayoutParams();
int mLeft = paddingLeft + lp.leftMargin;
mTop += lp.topMargin;
childView.layout(mLeft, mTop, mLeft + childView.getMeasuredWidth(), mTop + childView.getMeasuredHeight());
mTop += (childView.getMeasuredHeight() + lp.bottomMargin);
}
}
}

private int measureWidth(int measureSpec, int viewGroupWidth) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
switch (specMode) {
case MeasureSpec.UNSPECIFIED:
result = specSize;
break;
case MeasureSpec.AT_MOST:
/* 将剩余宽度和所有子View + padding的值进行比较，取小的作为ViewGroup的宽度 */
result = Math.min(viewGroupWidth, specSize);
break;
case MeasureSpec.EXACTLY:
result = specSize;
break;
}
return result;
}

private int measureHeight(int measureSpec, int viewGroupHeight) {
int result = 0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
switch (specMode) {
case MeasureSpec.UNSPECIFIED:
result = specSize;
break;
case MeasureSpec.AT_MOST:
/* 将剩余高度和所有子View + padding的值进行比较，取小的作为ViewGroup的高度 */
result = Math.min(viewGroupHeight, specSize);
break;
case MeasureSpec.EXACTLY:
result = specSize;
break;
}
return result;
}

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

以上代码需要注意的是：

1. onMeasure方法可能会调用多次，因此在onMeasure中累加得做好初始化准备

2. 直接使用MarginLayoutParams类会报错，因此得在ViewGroup中重载generateLayoutParams方法并且返回一个新的MarginLayoutParams对象，才能获取到margin值

然后是布局文件：

<?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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<com.bellnet.customview1.CustomViewGroup
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/holo_red_light">

<com.bellnet.customview1.CustomView
android:layout_width="200dp"
android:layout_height="wrap_content"
android:layout_marginBottom="5dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="15dp"
android:layout_marginTop="5dp"
app:backgroundColor="@android:color/holo_blue_bright"/>

<com.bellnet.customview1.CustomView
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="15dp"
android:layout_marginRight="20dp"
android:layout_marginTop="5dp"
app:backgroundColor="@android:color/holo_green_dark"/>

</com.bellnet.customview1.CustomViewGroup>

</LinearLayout>

最后是效果图：



总结一下：

在自定义View中处理padding，只需要在onDraw()中处理，别忘记处理布局为wrap_content的情况。

在自定义ViewGroup中处理padding，只需要在onLayout()中，给子View布局时算上padding的值即可，也别忘记处理布局为wrap_content的情况。

自定义View无需处理margin，在自定义ViewGroup中处理margin时，需要在onMeasure()中根据margin计算ViewGroup的宽、高，同时在onLayout中布局子View时也别忘记根据margin来布局。