Android 重写view的那些事

一 关于view重写与绘制的有价值的文章：

Android view绘制流程

Android View绘制流程及分析

二 重写view的实践（实现一个自己的模拟时钟）

1.先贴上在Android4.2的源码中，AnalogClock控件的完整实现：

/**
 * This widget display an analogic clock with two hands for hours and
 * minutes.
 */
public class AnalogClock extends View {
    private Time mCalendar;

    private final Drawable mHourHand;
    private final Drawable mMinuteHand;
    private final Drawable mSecondHand;
    private final Drawable mDial;

    private final int mDialWidth;
    private final int mDialHeight;

    private boolean mAttached;

    private final Handler mHandler = new Handler();
    private float mSeconds;
    private float mMinutes;
    private float mHour;
    private boolean mChanged;
    private final Context mContext;
    private String mTimeZoneId;
    private boolean mNoSeconds = false;

    private final float mDotRadius;
    private final float mDotOffset;
    private Paint mDotPaint;

    public AnalogClock(Context context) {
        this(context, null);
    }

    public AnalogClock(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public AnalogClock(Context context, AttributeSet attrs,
                       int defStyle) {
        super(context, attrs, defStyle);
        mContext = context;
        Resources r = mContext.getResources();

        mDial = r.getDrawable(R.drawable.clock_analog_dial);
        mHourHand = r.getDrawable(R.drawable.clock_analog_hour);
        mMinuteHand = r.getDrawable(R.drawable.clock_analog_minute);
        mSecondHand = r.getDrawable(R.drawable.clock_analog_second);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.AnalogClock);
        mDotRadius = a.getDimension(R.styleable.AnalogClock_jewelRadius, 0);
        mDotOffset = a.getDimension(R.styleable.AnalogClock_jewelOffset, 0);
        final int dotColor = a.getColor(R.styleable.AnalogClock_jewelColor, Color.WHITE);
        if (dotColor != 0) {
            mDotPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
            mDotPaint.setColor(dotColor);
        }

        mCalendar = new Time();

        mDialWidth = mDial.getIntrinsicWidth();
        mDialHeight = mDial.getIntrinsicHeight();
    }

    @Override
    protected void onAttachedToWindow() {
        super.onAttachedToWindow();

        if (!mAttached) {
            mAttached = true;
            IntentFilter filter = new IntentFilter();

            filter.addAction(Intent.ACTION_TIME_TICK);
            filter.addAction(Intent.ACTION_TIME_CHANGED);
            filter.addAction(Intent.ACTION_TIMEZONE_CHANGED);

            getContext().registerReceiver(mIntentReceiver, filter, null, mHandler);
        }

        // NOTE: It's safe to do these after registering the receiver since the receiver always runs
        // in the main thread, therefore the receiver can't run before this method returns.

        // The time zone may have changed while the receiver wasn't registered, so update the Time
        mCalendar = new Time();

        // Make sure we update to the current time
        onTimeChanged();

        // tick the seconds
        post(mClockTick);

    }

    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        if (mAttached) {
            getContext().unregisterReceiver(mIntentReceiver);
            removeCallbacks(mClockTick);
            mAttached = false;
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int widthSize =  MeasureSpec.getSize(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize =  MeasureSpec.getSize(heightMeasureSpec);

        float hScale = 1.0f;
        float vScale = 1.0f;

        if (widthMode != MeasureSpec.UNSPECIFIED && widthSize < mDialWidth) {
            hScale = (float) widthSize / (float) mDialWidth;
        }

        if (heightMode != MeasureSpec.UNSPECIFIED && heightSize < mDialHeight) {
            vScale = (float )heightSize / (float) mDialHeight;
        }

        float scale = Math.min(hScale, vScale);

        setMeasuredDimension(resolveSizeAndState((int) (mDialWidth * scale), widthMeasureSpec, 0),
                resolveSizeAndState((int) (mDialHeight * scale), heightMeasureSpec, 0));
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mChanged = true;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        boolean changed = mChanged;
        if (changed) {
            mChanged = false;
        }

        int availableWidth = getWidth();
        int availableHeight = getHeight();

        int x = availableWidth / 2;
        int y = availableHeight / 2;

        final Drawable dial = mDial;
        int w = dial.getIntrinsicWidth();
        int h = dial.getIntrinsicHeight();

        boolean scaled = false;

        if (availableWidth < w || availableHeight < h) {
            scaled = true;
            float scale = Math.min((float) availableWidth / (float) w,
                                   (float) availableHeight / (float) h);
            canvas.save();
            canvas.scale(scale, scale, x, y);
        }

        if (changed) {
            dial.setBounds(x - (w / 2), y - (h / 2), x + (w / 2), y + (h / 2));
        }
        dial.draw(canvas);

        if (mDotRadius > 0f && mDotPaint != null) {
            canvas.drawCircle(x, y - (h / 2) + mDotOffset, mDotRadius, mDotPaint);
        }

        drawHand(canvas, mHourHand, x, y, mHour / 12.0f * 360.0f, changed);
        drawHand(canvas, mMinuteHand, x, y, mMinutes / 60.0f * 360.0f, changed);
        if (!mNoSeconds) {
            drawHand(canvas, mSecondHand, x, y, mSeconds / 60.0f * 360.0f, changed);
        }

        if (scaled) {
            canvas.restore();
        }
    }

    private void drawHand(Canvas canvas, Drawable hand, int x, int y, float angle,
          boolean changed) {
      canvas.save();
      canvas.rotate(angle, x, y);
      if (changed) {
          final int w = hand.getIntrinsicWidth();
          final int h = hand.getIntrinsicHeight();
          hand.setBounds(x - (w / 2), y - (h / 2), x + (w / 2), y + (h / 2));
      }
      hand.draw(canvas);
      canvas.restore();
    }

    private void onTimeChanged() {
        mCalendar.setToNow();

        if (mTimeZoneId != null) {
            mCalendar.switchTimezone(mTimeZoneId);
        }

        int hour = mCalendar.hour;
        int minute = mCalendar.minute;
        int second = mCalendar.second;
  //      long millis = System.currentTimeMillis() % 1000;

        mSeconds = second;//(float) ((second * 1000 + millis) / 166.666);
        mMinutes = minute + second / 60.0f;
        mHour = hour + mMinutes / 60.0f;
        mChanged = true;

        updateContentDescription(mCalendar);
    }

    private final BroadcastReceiver mIntentReceiver = new BroadcastReceiver() {
        @Override
        public void onReceive(Context context, Intent intent) {
            if (intent.getAction().equals(Intent.ACTION_TIMEZONE_CHANGED)) {
                String tz = intent.getStringExtra("time-zone");
                mCalendar = new Time(TimeZone.getTimeZone(tz).getID());
            }
            onTimeChanged();
            invalidate();
        }
    };

    private final Runnable mClockTick = new Runnable () {

        @Override
        public void run() {
            onTimeChanged();
            invalidate();
            AnalogClock.this.postDelayed(mClockTick, 1000);
        }
    };

    private void updateContentDescription(Time time) {
        final int flags = DateUtils.FORMAT_SHOW_TIME | DateUtils.FORMAT_24HOUR;
        String contentDescription = DateUtils.formatDateTime(mContext,
                time.toMillis(false), flags);
        setContentDescription(contentDescription);
    }

    public void setTimeZone(String id) {
        mTimeZoneId = id;
        onTimeChanged();
    }

    public void enableSeconds(boolean enable) {
        mNoSeconds = !enable;
    }

}

2. 此外，在实现过程中还参考了Android之场景圆桌面（二）-模拟时钟实现这篇文章，这篇文章基本上是脱胎于AnalogClock的源码，但是它有很详细的注释，给我理解源码带来很大的帮助；

3. 以下为自己实现的模拟时钟代码：

public class MondeAnalogClock extends View {
	Drawable mDial;
	Drawable mHourHand;
	Drawable mMinuteHand;
	
	int mDialWidth;
	int mDialHeight;
	
	Paint mPaint;
	private Time mCalendar;
	boolean mChanged = false;
	private float mHour;
	private float mMinutes;
	private Handler mHandler = new Handler();
	
	public MondeAnalogClock(Context context) {
		this(context,null);
	}
	
	public MondeAnalogClock(Context context, AttributeSet attrs) {
		this(context, attrs,0);
	}

	public MondeAnalogClock(Context context, AttributeSet attrs,
			int defStyleAttr) {
		super(context, attrs, defStyleAttr);
		Resources r = context.getResources();
		TypedArray a = context.obtainStyledAttributes(attrs, 
				R.styleable.MondeAnalogClock, defStyleAttr, 0);
		
		mDial = a.getDrawable(R.styleable.MondeAnalogClock_dial);
		mHourHand = a.getDrawable(R.styleable.MondeAnalogClock_hand_hour);
		mMinuteHand = a.getDrawable(R.styleable.MondeAnalogClock_hand_minute);
		//To ensure the entire beauty,we use default pictures when any absent
		if (mDial == null || mHourHand == null || mMinuteHand == null) {
			mDial = r.getDrawable(R.drawable.dial);
			mHourHand = r.getDrawable(R.drawable.hour);
			mMinuteHand = r.getDrawable(R.drawable.minute);
		}
		a.recycle();
		
		//get width and height of the dial
		mDialWidth = mDial.getIntrinsicWidth();
		mDialHeight = mDial.getIntrinsicHeight();
		
		// init the paint
		mPaint = new Paint();
		mPaint.setColor(Color.parseColor("#3399ff"));
		mPaint.setTypeface(Typeface.DEFAULT_BOLD);
		mPaint.setFakeBoldText(true);
		mPaint.setAntiAlias(true);
		
		// init time
		if (mCalendar == null) {
			mCalendar = new Time();
		}
	}
	
	@Override
	protected void onAttachedToWindow() {
		super.onAttachedToWindow();
		
		IntentFilter filter = new IntentFilter();
	
		filter.addAction(Intent.ACTION_TIME_TICK);
		filter.addAction(Intent.ACTION_TIMEZONE_CHANGED);
	
		getContext().registerReceiver(mIntentReceiver, filter, null, mHandler );
		mCalendar = new Time();
	    onTimeChanged();
	}

	/**
	 * run while time changed to refresh the view
	 */
	private void onTimeChanged() {
		mCalendar.setToNow();
		int hour = mCalendar.hour;
		int minute = mCalendar.minute;
		int second = mCalendar.second;
		Log.v("onTimeChanged","time:" + hour + ":" + minute + ":" + second);
		mHour = hour + minute / 60.0f + second / 3600.0f;
		mMinutes = minute + second / 60.0f;
		
		mChanged = true;
	}
	
	private final BroadcastReceiver mIntentReceiver = new BroadcastReceiver() {
        @Override
        public void onReceive(Context context, Intent intent) {
            if (intent.getAction().equals(Intent.ACTION_TIMEZONE_CHANGED)) {
                String tz = intent.getStringExtra("time-zone");
                mCalendar = new Time(TimeZone.getTimeZone(tz).getID());
            }
            onTimeChanged();
            invalidate();
        }
    };
    

	@Override
	protected void onDetachedFromWindow() {
		super.onDetachedFromWindow();
		getContext().unregisterReceiver(mIntentReceiver);
        removeCallbacks(mClockTick);
	}

	@SuppressLint("NewApi")
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		int widthMode = MeasureSpec.getMode(widthMeasureSpec);
		int widthSize = MeasureSpec.getSize(widthMeasureSpec);
		int heightMode = MeasureSpec.getMode(heightMeasureSpec);
		int heightSize = MeasureSpec.getSize(heightMeasureSpec);
		
		/**
		 * zoom when view's real size is not matching with what parent supply
		 */
		float hScale = 1.0f;
		if (MeasureSpec.UNSPECIFIED != widthMode && widthSize < mDialWidth) {
			hScale = (float) widthSize / (float) mDialHeight;
		}
		float vScale = 1.0f;
		if (MeasureSpec.UNSPECIFIED != heightMode && heightSize < mDialWidth) {
			vScale = (float) widthSize / (float) mDialHeight;
		}
		
		float scale = Math.min(hScale, vScale);
		
		setMeasuredDimension(resolveSizeAndState((int) (mDialWidth * scale), widthMeasureSpec, 0),
	                resolveSizeAndState((int) (mDialHeight * scale), heightMeasureSpec, 0));
	}
	
	@Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mChanged = true;
    }

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		
		boolean changed = mChanged;
		if (changed) {
			mChanged = false;
		}
		
		int availableWidth = getRight() - getLeft();
		int availableHeight = getBottom() - getTop();
		
		int x = availableWidth / 2;
		int y = availableHeight / 2;
		
		final Drawable dial = mDial;
		int w = mDialWidth;
		int h = mDialHeight;
		
		boolean scaled = false;
		if (availableWidth < w || availableHeight < h) {
			scaled = true;
			float scale = Math.min((float) availableWidth / (float) w,
					(float) availableHeight / (float) h);
			canvas.save();
			canvas.scale(scale,scale,x,y);
		}
		
		if (changed) {
			dial.setBounds(x - (w / 2), y - (h / 2), x + (w / 2), y + (h / 2));
		}
		dial.draw(canvas);
		
		canvas.save();		
		// draw hourhand
		canvas.rotate(mHour / 12.0f * 360.0f, x, y);
		final Drawable hourHand = mHourHand;
		if (changed) {
			w = hourHand.getIntrinsicWidth();
			h = hourHand.getIntrinsicHeight();
			hourHand.setBounds(x - (w / 2), y - h, x + (w / 2), y);
		}
		hourHand.draw(canvas);
		canvas.restore();
		
		canvas.save();	
		//draw minuteHand
		canvas.rotate(mMinutes / 60.0f * 360.0f, x, y);
		final Drawable minuteHand = mMinuteHand;
		if (changed) {
			w = minuteHand.getIntrinsicWidth();
			h = minuteHand.getIntrinsicHeight();
			minuteHand.setBounds(x - (w / 2), y - h, x + (w / 2), y);
		}
		minuteHand.draw(canvas);
		canvas.restore();
		if (scaled) {
			canvas.restore();
		}
 	}
}

4. 流程分析

onAttachedToWindow（）这个方法会在onDraw之前被调用，在onMeasure之前或者之后，可以在它里面进行一些初始化的操作，比如以上代码，注册广播。它在view绘制之前，只会被调用一次。

onDetachedFromWindow方法，在view销毁的时候调用，进行收尾工作，比如解除广播。

在onTimeChange()方法里面，获取当前时间的时，分，秒。

需要写一个自己的广播接收器，以便在时区发生改变的时候，对UI进行更新重绘。而更重要的是，这个广播接收器，将接收Intent.ACTION_TIME_TICK这个动作，它由系统发出，每隔一分钟发一次。由于我的模拟时钟没有秒针，每一分钟更新一次UI，因此，在onAttchedToWindow()里面注册了广播之后，在这里接收，并调用onTimeChanged()以及invalidate()进行界面的重绘。

如果要加入秒针的话，可以参考源码当中的实现。

关于onDraw和onMeasure的学习，可以参考文章开始的2篇参考文章。