Android-6步教你自定义View

自定义View一共分为6步

第一步

1. public class SmileyView extends View { 
2.     private Paint mCirclePaint; 
3.     private Paint mEyeAndMouthPaint; 
4.  
5.     private float mCenterX; 
6.     private float mCenterY; 
7.     private float mRadius; 
8.     private RectF mArcBounds = new RectF(); 
9.  
10.     public SmileyView(Context context) { 
11.         this(context, null); 
12.     } 
13.  
14.     public SmileyView(Context context, AttributeSet attrs) { 
15.         this(context, attrs, 0); 
16.     } 
17.  
18.     public SmileyView(Context context, AttributeSet attrs, int defStyleAttr) { 
19.         super(context, attrs, defStyleAttr); 
20.         initPaints(); 
21.     } 
22.  
23.     private void initPaints() {/* ... */} 
24.  
25.     @Override 
26.     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {/* ... */} 
27.  
28.     @Override 
29.     protected void onDraw(Canvas canvas) {/* ... */} 
30. }  

2.实现画笔paint类

本文一共两只画笔

1. private void initPaints() { 
2.     mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
3.     mCirclePaint.setStyle(Paint.Style.FILL); 
4.     mCirclePaint.setColor(Color.YELLOW); 
5.     mEyeAndMouthPaint = new Paint(Paint.ANTI_ALIAS_FLAG); 
6.     mEyeAndMouthPaint.setStyle(Paint.Style.STROKE); 
7.     mEyeAndMouthPaint.setStrokeWidth(16 * getResources().getDisplayMetrics().density); 
8.     mEyeAndMouthPaint.setStrokeCap(Paint.Cap.ROUND); 
9.     mEyeAndMouthPaint.setColor(Color.BLACK); 
10. }  

3.覆写onMeasure(…)方法

实现这个方法告诉了母容器如何放弃自定义View，可以通过提供的measureSpecs来决定你的View的高和宽，以下是一个正方形，确认它的宽和高是一样的。

1. @Override 
2. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
3.     int w = MeasureSpec.getSize(widthMeasureSpec); 
4.     int h = MeasureSpec.getSize(heightMeasureSpec); 
5.  
6.     int size = Math.min(w, h); 
7.     setMeasuredDimension(size, size); 
8. }  

注意：

这个方法需要至少保证一个setMeasuredDimension(..)调用，否则会报IllegalStateException错误。

4.实现onSizeChanged(…)方法

这个方法是你获取View现在的宽和高. 这里我们计算的是中心和半径。

1. @Override 
2. protected void onSizeChanged(int w, int h, int oldw, int oldh) { 
3.     mCenterX = w / 2f; 
4.     mCenterY = h / 2f; 
5.     mRadius = Math.min(w, h) / 2f; 
6. }  

5.实现onDraw(…)方法

这个方法提供了如何绘制view，它提供的Canvas类可以进行绘制。

1. @Override 
2. protected void onDraw(Canvas canvas) { 
3.     // draw face 
4.     canvas.drawCircle(mCenterX, mCenterY, mRadius, mCirclePaint); 
5.     // draw eyes 
6.     float eyeRadius = mRadius / 5f; 
7.     float eyeOffsetX = mRadius / 3f; 
8.     float eyeOffsetY = mRadius / 3f; 
9.     canvas.drawCircle(mCenterX - eyeOffsetX, mCenterY - eyeOffsetY, eyeRadius, mEyeAndMouthPaint); 
10.     canvas.drawCircle(mCenterX + eyeOffsetX, mCenterY - eyeOffsetY, eyeRadius, mEyeAndMouthPaint); 
11.     // draw mouth 
12.     float mouthInset = mRadius /3f; 
13.     mArcBounds.set(mouthInset, mouthInset, mRadius * 2 - mouthInset, mRadius * 2 - mouthInset); 
14.     canvas.drawArc(mArcBounds, 45f, 90f, false, mEyeAndMouthPaint); 
15. }  

6.添加你的View

1. <FrameLayout 
2.     xmlns:android="http://schemas.android.com/apk/res/android" 
3.     android:layout_width="match_parent" 
4.     android:layout_height="match_parent"> 
5.  
6.     <com.example.app.SmileyView 
7.         android:layout_width="match_parent" 
8.         android:layout_height="match_parent" /> 
9. </FrameLayout>  

到此就结束了，自定义View没你想的那么难