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

最新推荐文章于 2024-07-09 15:07:03 发布

向梦想攀爬的蜗牛

最新推荐文章于 2024-07-09 15:07:03 发布

阅读量2.3w

点赞数 16

分类专栏： android 自定义view 文章标签： android margin padding

本文链接：https://blog.csdn.net/u012732170/article/details/55045472

版权

android 自定义view 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

转载请注明出处：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来布局。

向梦想攀爬的蜗牛

关注

16
点赞
踩
31

收藏

觉得还不错? 一键收藏
3
评论
android自定义View之margin和padding的处理

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

扫一扫