Android View 全解析(五) -- 实践自定义 View

在前面的系列文章之后,大家已经对 View 绘制中的各个过程熟悉了,这篇文章就根据前面所学的知识,来实际动手做一个自定义 View,这也是整个系列的完结篇了,会尽可能地涵盖自定义 View 中的各个方面,以及可能遇到的各种坑。在经过一番考量后,决定使用一个 PagerIndicator 作为例子进行讲解。在开始后面的文章之前,建议 Clone 下 https://github.com/woaitqs/FPageIndicator,对照着源码阅读,食用效果更佳。

最后我们需要实现的效果如图所示:

样式展示


确定自定义的样式

一般情况下,我们需要自定义 View 的时候,都要考量有哪些地方需要自定义的,对于上图的情况,可以认为选中和未选中的颜色是可以自定义的,大圈和小圈的自定义也是可以自定义的,还有诸如间距等等这些也是可以的。为了使开发者在使用的时候,能够在 XML 文件中也能进行自定义,我们需要声明 styleable 文件,官方教程 有详细说明如何进行属性定义。

对于上图的例子,可以写如下的styleable 文件。建议自定义的属性上,添加上同一的前缀,这样更容易区分开来。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="PageIndicator">

        <attr name="pi_count" format="integer" />
        <attr name="pi_out_radius" format="dimension" />
        <attr name="pi_radius" format="dimension" />
        <attr name="pi_un_focus_color" format="color"/>
        <attr name="pi_focus_color" format="color"/>
        <attr name="pi_padding" format="dimension"/>

    </declare-styleable>
</resources>

那么如何在自定义的 View 中,将这些设置进去的属性取出来呢?这时候我们要用到 TypedArray,通过这个能属性从 AttributeSet 取出来,同时也需要注意在用户没有设置自定义属性时的默认值。代码也相对很简单,如下所示。

private void initAttributes(AttributeSet attrs) {
  if (attrs == null) {
    return;
  }
  TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.PageIndicator);
  count = typedArray.getInteger(R.styleable.PageIndicator_pi_count, 1);
  outRadius = typedArray.getDimension(R.styleable.PageIndicator_pi_out_radius,
      dpToPx(DEFAULT_OUT_RADIUS_SIZE));
  innerRadius = typedArray.getDimension(R.styleable.PageIndicator_pi_radius,
      dpToPx(DEFAULT_INNER_RADIUS_SIZE));
  unFocusColor = typedArray.getColor(R.styleable.PageIndicator_pi_un_focus_color,
      Color.parseColor(DEFAULT_UN_FOCUS_COLOR));
  focusColor = typedArray.getColor(R.styleable.PageIndicator_pi_focus_color,
      Color.parseColor(DEFAULT_FOCUS_COLOR));
  padding = typedArray.getDimension(R.styleable.PageIndicator_pi_padding, 0F);
  typedArray.recycle();
}

初始化相应属性

在构造函数或者 attachToWindow 的时候,就初始化自定义 View 中可能用到的各种变量,例如 Paint,而不是在使用时,再去构造。因为诸如 onMeasure、onDraw 方法可能会被多次调用,频繁地分配对象,可能会引起内存抖动。内存抖动会在短时间内触发多次 GC 操作,从而引起卡顿。我在这篇文章中,http://www.woaitqs.cc/android/2016/03/30/in-love-with-android-memory 说明了这种情况是如何发生的。

对于本文的情况,初始化 Paint 就可以了。

private void initPaint() {
  innerUnFocusPaint.setStyle(Paint.Style.FILL);
  innerUnFocusPaint.setColor(unFocusColor);

  innerFocusPaint.setStyle(Paint.Style.FILL);
  innerFocusPaint.setColor(focusColor);

  outPaint.setStyle(Paint.Style.STROKE);
  outPaint.setColor(focusColor);
  outPaint.setStrokeWidth(2F);
}

重载 onMeasure 方法

onMeasure 方法是让 view 自身测量自己的大小,这是关键步骤。分为两种情况,继承自 ViewGroup 的,还是继承自 View 。如果是 ViewGroup 的话,需要在合适的地方,让子 View 测量后,再得到自身的大小。而如果是 View,则只需管好自己的大小即可。

MeasureSpec 是 onMeasure 方法中参数的类型,它通过位运算的方式,涵盖了模式和大小两个数据,通过 getMode 和 getSize 可以分别得到模式和大小。这是要特别针对模式进行说明,如果模式为 EXACTLY,说明 View 的大小是指定了的,那么就使用传入的指即可。如果是 AT_MOST, 那么就得先计算出预期的大小。预期的大小,是指在不考虑外界的情况下,View 所占据的大小,对于本文的例子,预期的大小就是几个圈的大小加上它们之间的间距。在计算之后,与指定的大小取两者最小的。如果是 UNSPECIFIED 的情况,那说明父类对你的大小没有预期,那就使用预期的大小即可。下面的代码是一个很清晰的说明。

最后一定不要忘记,调用 setDimension 方法哦。

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

更多知识,参考 http://www.woaitqs.cc/android/2016/10/18/android-view-theory-2.


重载 onDraw 方法

onDraw 方法就更为简单了,只是简单地对 Canvas 提供的 API 进行调用。在调用时,一定要对 Android 的坐标系非常清楚才行,知道哪里是 X 轴,哪里是 Y 轴,left,right,top 和 bottom 是相对于哪里的距离。

坐标轴

只要计算好每个绘制 View 的坐标,再调用相应的 API 就能看到效果了!Cheers!下面的代码,就绘制了选中和未选中的几个点。再强调下,这里使用的 Paint 是提前初始化完成的哦。

for (int i = 0; i < count; i++) {
  canvas.drawCircle(
      outRadius - innerRadius + padding * i + innerRadius * (1 + 2 * i),
      height / 2,
      innerRadius,
      i == selectedPos ? innerFocusPaint : innerUnFocusPaint);
}

在自定义 onDraw 的时候,设计的宗旨是保持无状态性,也就是说,onDraw 是对每一个时刻状态的投诉,例如本例子,就应该是某个滑动时刻的投射。如果在 onDraw 中进行动画,或者起一些异步线程等等,会使得代码的可读性变差。


View 的更新策略

写完自定义 View 后,还得在用户更改属性后或者其他事件后,相应地让 View 更新下。

requestLayout. 会触发 ViewRoot 的 performTraversal方法,从而重新执行 Measure、Layout,在特定情况下会触发 Draw 操作。

invalidate. 会触发 Draw 操作,如果 View 的大小和位置没有发生改变,调用这个方法就足以更新页面了。

在本文的例子里面,当用户滑动 ViewPager 时,View 的大小和位置不会发生改变,因而调用 invalidate 就足够了。

@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
  drawPosition = position;
  drawPositionOffset = positionOffset;
  invalidate();
}

至此,整个系列结束,有兴趣的同学,可以 Clone https://github.com/woaitqs/FPageIndicator这个项目来进行探讨 :)。


文档信息


Published: November 28 2016