自定义View开篇,必须跨过的一道坎儿

前言

对于许多Android开发者而言,无论工作的方向是什么,自定义View是不得不跨过去的一道坎儿,相信很多伙伴有这样的感受,关于自定义View的知识都看的明白,甚至滚瓜烂熟,但是遇到自定义View实战的时候,还是感觉无从下手,其实想学好自定义View,只有一个字,'练",从今天开始我会持续开始写自定义View系列的文章,一方面巩固自己的基础,另一方面温故而知新。

自定义view的方式及异同

  • 继承自View
  • 继承自ViewGroup
  • 继承自特定现有的View 如TextView
  • 继承自特定现有的ViewGroup 如LinerLayout

我们先说继承自View和ViewGroup,这两种方式和后面两种相比 更接近于底层,可实现的view更加多样化,但是这两种方式需要处理wrap_content的情况以及padding,否则会出现显示问题。

继承自ViewGroup的控件比较复杂,需要自行处理onMeasure以及onLayout方法,margin是由父控件决定的,所以继承自View的自定义控件只需要处理padding,但是继承自ViewGroup的控件需要处理自身的padding以及子控件的margin

如何处理wrap_content问题

首先我们举个例子 绘制一个简单的圆形。新建CircleView类继承自View,生成三个构造方法,至于每个构造方法有什么区别我在Android自定义View之绘制圆形头像 提到过,初始化画笔等操作都是基础操作,这里就不再赘述了,在onDraw中绘制一个圆,半径为宽高中短边的一半。

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int width = getWidth();
    int height = getHeight();
    int radius = Math.min(width,height) / 2;
    canvas.drawCircle(width / 2,height/2,radius,paint);
}

在布局中引用这个view,设置宽高为300dp,为了方便看效果 我们给这个view设置蓝色背景。运行效果图如下

接下里我们,设置宽高为wrap_content,运行效果图如下,我们可以看到效果和设置match_parent是一样的

所以针对wrap_content问题 ,最简单的方式是设置一个默认值,至于默认值设置多少,其实是随意的,那么你可能会问,那为什么TextView设置wrap_content 大小就是正好的呢,我们看一下TextView的源码:

if (widthMode == MeasureSpec.EXACTLY) {
    // Parent has told us how big to be. So be it.
    width = widthSize;
} else {
    if (mLayout != null && mEllipsize == null) {
        des = desired(mLayout);
    }

    if (des < 0) {
        boring = BoringLayout.isBoring(mTransformed, mTextPaint, mTextDir, mBoring);
        if (boring != null) {
            mBoring = boring;
        }
    } else {
        fromexisting = true;
    }

    if (boring == null || boring == UNKNOWN_BORING) {
        if (des < 0) {
            des = (int) Math.ceil(Layout.getDesiredWidthWithLimit(mTransformed, 0,
                    mTransformed.length(), mTextPaint, mTextDir, widthLimit));
        }
        width = des;
    } else {
        width = boring.width;
    }

    final Drawables dr = mDrawables;
    if (dr != null) {
        width = Math.max(width, dr.mDrawableWidthTop);
        width = Math.max(width, dr.mDrawableWidthBottom);
    }

    if (mHint != null) {
        int hintDes = -1;
        int hintWidth;

        if (mHintLayout != null && mEllipsize == null) {
            hintDes = desired(mHintLayout);
        }

        if (hintDes < 0) {
            hintBoring = BoringLayout.isBoring(mHint, mTextPaint, mTextDir, mHintBoring);
            if (hintBoring != null) {
                mHintBoring = hintBoring;
            }
        }

        if (hintBoring == null || hintBoring == UNKNOWN_BORING) {
            if (hintDes < 0) {
                hintDes = (int) Math.ceil(Layout.getDesiredWidthWithLimit(mHint, 0,
                        mHint.length(), mTextPaint, mTextDir, widthLimit));
            }
            hintWidth = hintDes;
        } else {
            hintWidth = hintBoring.width;
        }

        if (hintWidth > width) {
            width = hintWidth;
        }
    }

    width += getCompoundPaddingLeft() + getCompoundPaddingRight();

    if (mMaxWidthMode == EMS) {
        width = Math.min(width, mMaxWidth * getLineHeight());
    } else {
        width = Math.min(width, mMaxWidth);
    }

    if (mMinWidthMode == EMS) {
        width = Math.max(width, mMinWidth * getLineHeight());
    } else {
        width = Math.max(width, mMinWidth);
    }

    // Check against our minimum width
    width = Math.max(width, getSuggestedMinimumWidth());

    if (widthMode == MeasureSpec.AT_MOST) {
        width = Math.min(widthSize, width);
    }
}

我们可以看到 ,当设置的大小是具体值的时候 宽度直接等于MeasureSpec获取的,如果测量模式是AT_MOST (设置wrap_content),就通过测量字体所占的宽度,最终取和系统测量的最小值。

对于上面的例子,我们直接设置为默认值为200即可,代码如下所示:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int widthMode = MeasureSpec.getMode(widthMeasureSpec);
    int height = MeasureSpec.getSize(heightMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);

    if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST){
        setMeasuredDimension(200,200);
    }else if (widthMode == MeasureSpec.AT_MOST){
      setMeasuredDimension(200,height);
    }else if (heightMode == MeasureSpec.AT_MOST){
        setMeasuredDimension(width,200);
    }
}

运行结果如下图所示,这样我们自定义的View就完成了对wrap_content的处理。

如何支持padding

首先我们将布局文件设置为match_parent,设置上下左右边距为50dp

<com.support.hlq.layout.CircleView
    android:padding="50dp"
    android:background="@color/colorPrimaryDark"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

不做特殊处理时,运行结果如下:

我们可以看到设置的padding并没有生效,我们需要在onDraw中绘制的时候考虑边距即可,代码如下

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    int width = getWidth() - getPaddingLeft() - getPaddingRight();
    int height = getHeight() - getPaddingTop() - getPaddingBottom();
    int radius = Math.min(width,height) / 2;

    canvas.drawCircle(width / 2 + getPaddingLeft() ,height/2 + getPaddingTop(),radius,paint);
}

运行效果如下图所示

从上图中可以看出padding生效了,对于自定义View继承Viewgroup时,上述两个问题的处理方式是一样的,只不过因为margin是由父控件决定的,所以测量的时候还要考虑子控件的margin,详细问题会在后面实例讲解。考虑到上面几个问题之后,一个自定义View就比较合格了,不过还缺点什么,比如 如何通过xml设置属性呢?

如何通过xml文件给自定义设置属性

上面例子中,绘制了一个红色的圆形,我们来通过xml属性配置绘制图形的颜色 以及 画笔的style吧

首先新建cycle_attr.xml文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="cycleView">
        <attr name="viewColor" format="reference" />
        <attr name="paintStyle" >
            <enum name="fill" value="0" />
            <enum name="stroke" value="1" />
        </attr>
    </declare-styleable>
</resources>

使用declare-styleable标签声明名字为cycleView的属性列,viewColor 表示view的颜色,format所对应的是属性值的类型reference表示资源文件 ,比如颜色值、图片等,paintStyle表示画笔的属性,这里使用枚举类,也就是说自定义属性只能是这两个值。0表示填充类型,1表示描边类型。

在自定义View中 通过TypedArray 获取自定义的属性

private void init(Context context, AttributeSet attributeSet) {

    TypedArray typedArray = context.obtainStyledAttributes(attributeSet,R.styleable.cycleView);
    //默认为填充类型
    int style = typedArray.getInt(R.styleable.cycleView_paintStyle,0);
    if (style == 1){
        paint.setStyle(Paint.Style.STROKE);
    }else {
        paint.setStyle(Paint.Style.FILL);
    }
    //默认为红色
    int color = typedArray.getColor(R.styleable.cycleView_viewColor,Color.RED);
    paint.setColor(color);
    
    typedArray.recycle();
}
默认设置为红色,类型为填充类型,接下来我们xml中设置自定义的属性,把view颜色改为粉红色,填充类型改为描边
<com.support.hlq.layout.CircleView
    app:viewColor = "@color/colorAccent"
    app:paintStyle = "stroke"
    android:padding="50dp"
    android:background="@color/colorPrimaryDark"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

运行结果如下图所示

如此一来,一个比较规范的自定义view就完成了。

下一篇:自定义View二篇,如何自定义一个规范的ViewGroup

  • 6
    点赞
  • 2
    评论
  • 13
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值