[转载]Android自定义UI组件

原文地址：Android自定义UI组件

上周面试时和某android知名初创公司的CTO有过简短的交流。
因为我之前在android都是采用标准UI组件开发，所以app的界面看上去朴素的很（做多了企业级应用的综合症）。而因为他们目前都是针对消费级市场的，所以必须把界面做的好看甚至花哨以此吸引用户的眼球。“我们80%的代码都是用在界面上的，后台很少。”大概是这么个意思。
回来后，在android developer上看到的确有自定义组件的介绍：
http://developer.android.com/guide/topics/ui/custom-components.html
不过太抽象，还是要通过一个实例来say hello。
中文baidu下，基本上都是下面这个例子抄来抄去。
----

自定义View实例AnalogClock源码

针对Android底层View的直接构造很多网友没有实战经验，本次Android开发网结合目前平台开源代码一起通过AnalogClock类来理解 View的直接继承。AnalogClock就是Home Screen上的那个带有两根指针的表盘类。

public class AnalogClock extends View { private Time mCalendar; private Drawable mHourHand; //时针 private Drawable mMinuteHand; //分针 private Drawable mDial; //表盘背景 private int mDialWidth; //表盘宽度 private int mDialHeight; //表盘高度 private boolean mAttached; //附着状态 private final Handler mHandler = new Handler(); //定一个Handler类实现更新时间 private float mMinutes; private float mHour; private boolean mChanged; //时间是否改变 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); Resources r = mContext.getResources(); TypedArray a = context.obtainStyledAttributes( attrs, com.android.internal.R.styleable.AnalogClock, defStyle, 0); mDial = a.getDrawable(com.android.internal.R.styleable.AnalogClock_dial); //加载表盘资源 if (mDial == null) { mDial = r.getDrawable(com.android.internal.R.drawable.clock_dial); } //加载时针图片资源 mHourHand = a.getDrawable(com.android.internal.R.styleable.AnalogClock_hand_hour); if (mHourHand == null) { mHourHand = r.getDrawable(com.android.internal.R.drawable.clock_hand_hour); } //加载分针图片 mMinuteHand = a.getDrawable(com.android.internal.R.styleable.AnalogClock_hand_minute); if (mMinuteHand == null) { mMinuteHand = r.getDrawable(com.android.internal.R.drawable.clock_hand_minute); } mCalendar = new Time(); //获取当前系统时间 mDialWidth = mDial.getIntrinsicWidth(); //获取表盘图片的宽度 mDialHeight = mDial.getIntrinsicHeight(); //高度，同上 } @Override protected void onAttachedToWindow() { super.onAttachedToWindow(); if (!mAttached) { mAttached = true; //注册一个消息过滤器，获取时间改变、时区改变的action 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); } mCalendar = new Time(); onTimeChanged(); } @Override protected void onDetachedFromWindow() { super.onDetachedFromWindow(); if (mAttached) { getContext().unregisterReceiver(mIntentReceiver); //反注册消息过滤器 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(resolveSize((int) (mDialWidth * scale), widthMeasureSpec), resolveSize((int) (mDialHeight * scale), heightMeasureSpec)); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mChanged = true; } //主要的绘图重写View的onDraw方法，我们可以看到通过canvas实例直接屏幕 @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); boolean changed = mChanged; if (changed) { mChanged = false; } int availableWidth = mRight - mLeft; int availableHeight = mBottom - mTop; 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); canvas.save(); //计算时针旋转的角度，android123提示就是那个时针图片的旋转角度， //直接反应的就是表盘上那个针的时间 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 / 2), x + (w / 2), y + (h / 2)); } hourHand.draw(canvas); canvas.restore(); canvas.save(); 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 / 2), x + (w / 2), y + (h / 2)); } minuteHand.draw(canvas); canvas.restore(); if (scaled) { canvas.restore(); } } private void onTimeChanged() { //获取时间改变，计算当前的时分秒 mCalendar.setToNow(); int hour = mCalendar.hour; int minute = mCalendar.minute; int second = mCalendar.second; mMinutes = minute + second / 60.0f; mHour = hour + mMinutes / 60.0f; mChanged = true; } private final BroadcastReceiver mIntentReceiver = new BroadcastReceiver() { //监听获取时间改变action @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(); //刷新屏幕，强制类调用onDraw方法实现分针时针的走动 } };