Android自定义View详解

ElmoRaynor 8年前
   <h3>一.什么是自定义View</h3>    <p>自定义view可以分为三类:</p>    <p>1.把系统内置的控件组合起来生成一个新的控件;</p>    <p>2.继承系统现有的控件,然后加入新的功能;</p>    <p>3.自己绘制控件,继承系统的View类,通过View中的回调方法实现绘制。</p>    <p>本文所说的自定义View就是第三种方式。</p>    <h3>二.为什么使用自定义View</h3>    <p>自定义View可以实现系统View满足不了的需求,根据我们开发中不同的需求去实习我们自己的View。通过自定义View我们还可以实现一些炫酷的效果,提升产品的体验。</p>    <h3>三.自定义View的2个关键方法</h3>    <p>在学习自定义View之前我们先了解几个自定义View的函数,这样有助于我们更好的理解自定义View。</p>    <p>1.前言</p>    <p>在介绍两个方法之前我们先看一下MeasureSpec这个类</p>    <p>MeasureSpec从字面意思上理解为“测量规格”,它决定了一个View的尺寸。</p>    <p>MeasureSpec是View源码中的一个静态内部类。</p>    <p>getMode(int measureSpec) 和 getSize(int measureSpec) 方法的参数mesaureSpec是一个32位的int值, <strong>前两位为View的测量模式值,后30位为View的测量尺寸</strong> 。</p>    <p>getMode(int measureSpec) 方法是获取View的测量模式。</p>    <p>getSize(int measureSpec) 方法是获取View测量的尺寸。</p>    <p>源码如下:</p>    <pre>  <code class="language-java">public static class MeasureSpec {      //需要移动的位数      private static final int MODE_SHIFT = 30;      //相当于把0x3左移30位      private static final int MODE_MASK = 0x3 << MODE_SHIFT;      //View的测量模式      public static final int UNSPECIFIED = 0 << MODE_SHIFT;      //View的测量模式      public static final int EXACTLY = 1 << MODE_SHIFT;      //View的测量模式      public static final int AT_MOST = 2 << MODE_SHIFT;        //把size和mode合成一个32为的int      public static int makeMeasureSpec(int size, int mode) {          if (sUseBrokenMakeMeasureSpec) {              return size + mode;          } else {              return (size & ~MODE_MASK) | (mode & MODE_MASK);          }      }        //获取View的测量模式      public static int getMode(int measureSpec) {          return (measureSpec & MODE_MASK);      }      //获取测量的尺寸      public static int getSize(int measureSpec) {          return (measureSpec & ~MODE_MASK);      }      }</code></pre>    <p>从源码中可以看出测量模式有三种类型</p>    <table>     <thead>      <tr>       <th>测量模式</th>       <th>表示的意思</th>      </tr>     </thead>     <tbody>      <tr>       <td>UNSPECIFIED</td>       <td>父容器没有对当前View有任何限制,要多大就多大,这种情况一般用于系统内部,表示一种测量状态</td>      </tr>      <tr>       <td>EXACTLY</td>       <td>父容器已经检查出View所需要的精确大小,这时候View的最终大小就是 getSize 中返回的值</td>      </tr>      <tr>       <td>AT_MOST</td>       <td>父容器制定了一个View可用的大小,但View大小不能大于这个值</td>      </tr>     </tbody>    </table>    <p>测量模式跟布局时用到的 wrap_content 、 match_parent 以及固定的尺寸的对应关系如下:</p>    <p>EXACTLY对应为: match_parent 和固定尺寸</p>    <p>AT_MOST对应为: wrap_content</p>    <p>前面说了这么多,下面我们看一下 onMeasure 的用处吧:</p>    <p>2.onMeasure方法</p>    <p>该方法的作用是测量当前View的在屏幕上占用的尺寸,我们看一下View中的源码:</p>    <pre>  <code class="language-java">protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {            //此方法是设置View的测量值               setMeasuredDimension(getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec),                  getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec));      }</code></pre>    <p>其中 setMeasuredDimension 方法是设置View测量的值获取View值的方法是 getDefaultSize ,我们再看一下它的源码:</p>    <pre>  <code class="language-java">public static int getDefaultSize(int size, int measureSpec) {          int result = size;          //获取测量模式          int specMode = MeasureSpec.getMode(measureSpec);          //获取测量尺寸          int specSize = MeasureSpec.getSize(measureSpec);            switch (specMode) {              case MeasureSpec.UNSPECIFIED:                  result = size;                  break;              //返回的大小等于测量尺寸              case MeasureSpec.AT_MOST:              case MeasureSpec.EXACTLY:                  result = specSize;                  break;          }          return result;      }</code></pre>    <p>从 getDefaultSize 方法中可用看出View的宽高都由specSize决定,可以得出:</p>    <p>在View中使用 wrap_content 就相当于是使用 match_parent ,所以直接继承系统View的类的控件需要重写 onMeasure 。</p>    <p>2.onDraw方法</p>    <p>这个方法就比较好理解了,它是把已经测量好的View画在屏幕上,开发者根据自己的需求绘制不同的功能。</p>    <p>onDraw 方法是通过View的 draw 方法调用的,分析源码可以看出 draw 方法绘制过程一般分为以下几步:</p>    <ul>     <li>绘制背景 background.draw(canvas)</li>     <li>绘制自己,调用 onDraw 方法</li>     <li>绘制childern,调用 dispatchDrae 方法</li>     <li>绘制装饰 , onDrawScrollBars 方法</li>    </ul>    <p>源码如下:</p>    <pre>  <code class="language-java">public void draw(Canvas canvas) {          if (ViewDebug.TRACE_HIERARCHY) {              ViewDebug.trace(this, ViewDebug.HierarchyTraceType.DRAW);          }          final int privateFlags = mPrivateFlags;          final boolean dirtyOpaque = (privateFlags & DIRTY_MASK) == DIRTY_OPAQUE &&                  (mAttachInfo == null || !mAttachInfo.mIgnoreDirtyState);          mPrivateFlags = (privateFlags & ~DIRTY_MASK) | DRAWN;          // 第一步 绘制背景          int saveCount;          if (!dirtyOpaque) {              final Drawable background = mBGDrawable;              if (background != null) {                  final int scrollX = mScrollX;                  final int scrollY = mScrollY;                  if (mBackgroundSizeChanged) {                      background.setBounds(0, 0, mRight - mLeft, mBottom - mTop);                      mBackgroundSizeChanged = false;                  }                  if ((scrollX | scrollY) == 0) {                      background.draw(canvas);                  } else {                      canvas.translate(scrollX, scrollY);                      background.draw(canvas);                      canvas.translate(-scrollX, -scrollY);                  }              }          }          final int viewFlags = mViewFlags;          boolean horizontalEdges = (viewFlags & FADING_EDGE_HORIZONTAL) != 0;          boolean verticalEdges = (viewFlags & FADING_EDGE_VERTICAL) != 0;          if (!verticalEdges && !horizontalEdges) {              //第二步  绘制自己              if (!dirtyOpaque) onDraw(canvas);              //第三步 绘制childern              dispatchDraw(canvas);              //第四步 绘制装饰              onDrawScrollBars(canvas);              //以下省略...              return;          }      }</code></pre>    <p>下面我们就来写一个自定义的View吧:</p>    <p>四.自定义View的流程</p>    <p>1.自定义View的属性(非必需)</p>    <p>2.在View的构造方法中获得我们自定义的属性(非必需)</p>    <p>3.重写onMesure</p>    <p>4.重写onDraw</p>    <p>以一个简单的圆形视图RoundView的控件为例吧。</p>    <p>第一步</p>    <p>给这个视图设置个自定义的属性,在 values 目录下,创建一个名为 attrs_round_view.xml 的文件,文件内容如下:</p>    <pre>  <code class="language-java"><resources>      <declare-styleable name="RoundView">          <attr name="round_color" format="boolean" />      </declare-styleable>  </resources></code></pre>    <p>第二步</p>    <p>在自定义RoundView的构造函数中获取color属性:</p>    <pre>  <code class="language-java">//画圆形的画笔      private Paint mPaint;        //初始化画笔      private void initPaint() {          mPaint = new Paint();          //设置画笔的颜色 默认为黑色          mPaint.setColor(mColor);      }        public RoundView(Context context, AttributeSet attrs, int defStyleAttr) {          super(context, attrs, defStyleAttr);          //他们两个是相同的          //TypedArray array=context.getTheme().obtainStyledAttributes(attrs,R.styleable.RecyclerView,defStyleAttr,0);          //获取RoundView中的所有自定义属性          TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RoundView);          //获取颜色的属性          mColor = array.getColor(R.styleable.RoundView_round_color, Color.BLACK);          //初始化画笔          initPaint();          //释放TypedArray          array.recycle();      }</code></pre>    <p>第三步</p>    <p>重写onMeasure,计算View的布局。设置布局的默认大小为200</p>    <pre>  <code class="language-java">//视图的默认大小      private final static int DEFAULT_SIZE = 200;        @Override      protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {          super.onMeasure(widthMeasureSpec, heightMeasureSpec);          //获取测量之后的宽度          int width = measureDimension(widthMeasureSpec);          //获取测量之后的高度          int height = measureDimension(heightMeasureSpec);          //设置测量之后的大小          setMeasuredDimension(width, height);        }        /**       * 获取计算之后的值       * @param measureSpec       * @return       */      private int measureDimension(int measureSpec) {          //获取测量方式          int specMode = MeasureSpec.getMode(measureSpec);          //获取测量大小          int specSize = MeasureSpec.getSize(measureSpec);          //设置默认大小          int result = DEFAULT_SIZE;          //如果是wrap_content就选取最小的值作为最后测量的大小          if (specMode == MeasureSpec.AT_MOST) {              result = Math.min(DEFAULT_SIZE, specSize);              //如果是match_parent或者是固定大小就返回测量的大小          } else if (specMode == MeasureSpec.EXACTLY) {              result = specSize;          }          return result;      }</code></pre>    <p>第四步</p>    <p>通过 onDraw 方法绘制圆形,首先获取布局中设置的padding属性,再根据宽高计算出实际圆形的半径,并绘制。</p>    <pre>  <code class="language-java">@Override      protected void onDraw(Canvas canvas) {          super.onDraw(canvas);          //获取布局的padding大小          int paddingLeft = getPaddingLeft();          int paddingRight = getPaddingRight();          int paddingTop = getPaddingTop();          int paddingBottom = getPaddingBottom();          //通过获取布局的宽高和padding大小计算实际的宽高          int width = getWidth() - paddingLeft - paddingRight;          int height = getHeight() - paddingTop - paddingBottom;          //计算圆的半径          int radius = Math.min(width, height) / 2;          //以圆形的原点坐标,画出圆形          canvas.drawCircle(paddingLeft + radius, paddingTop + radius, radius, mPaint);        }</code></pre>    <p>最后的效果如下图所示:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/8fabe544c64dd5e67dd17ed5e17b3713.png"></p>    <p style="text-align:center">自定义View.png</p>    <p> </p>    <p> </p>    <p>来自:http://www.jianshu.com/p/d8dcfaa0f652</p>    <p> </p>