優勢
SurfaceView 繼承于View
自定義view是在主線程進行繪制的
SurfaceView的繪制是在一個子線程中對自己進行繪制，所以可以避免UI線程阻塞
繪制
SurfaceView中包含一個專門用于繪制的surface，Surface中包含一個canvas
如何獲取canvas呢
getHolder -> SurfaceHolder
holder -> Canvas
這樣我們就可以獲取Canvas 對象了，其實Holder不僅可以獲取canvas對象，同時也管理著SurfaceView的生命周期，通過holder.addCallback實現SurfaceHolder.Callback:
- surfaceCreated
- surfaceChanged
- surfaceDestoryed
編寫SurfaceView模版
具體看如下代碼
/**
* @author: robert
* @date: 2017-10-21
* @time: 11:57
* @說明: SurfaceView 編寫模板
*/
public class SurfaceViewTemplate extends SurfaceView implements SurfaceHolder.Callback, Runnable {
private SurfaceHolder mHolder;
private Canvas mCanvas;
/**
* 用于繪制的線程
*/
private Thread mThread;
/**
* 是否繪制
*/
private boolean isRunning;
public SurfaceViewTemplate(Context context) {
this(context, null);
}
public SurfaceViewTemplate(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
mHolder = getHolder();
mHolder.addCallback(this);
//設置焦點
setFocusable(true);
setFocusableInTouchMode(true);
//屏幕常亮
setKeepScreenOn(true);
}
@Override
public void surfaceCreated(SurfaceHolder surfaceHolder) {
isRunning = true;
mThread = new Thread(this);
mThread.start();
}
@Override
public void surfaceChanged(SurfaceHolder surfaceHolder, int i, int i1, int i2) {
}
@Override
public void surfaceDestroyed(SurfaceHolder surfaceHolder) {
isRunning = false;
}
private void draw() {
try {
mCanvas = mHolder.lockCanvas();
if (mCanvas != null) {
//drawSomeThing
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (mCanvas != null) {//釋放canvas
mHolder.unlockCanvasAndPost(mCanvas);
}
}
}
@Override
public void run() {
//不斷進行繪制
while (isRunning) {
draw();
}
}
}
示例：
/**
* @author: robert
* @date: 2017-10-21
* @time: 11:57
* @說明: 旋轉轉盤，可設置選中項
*/
public class LuckyPanView extends SurfaceView implements SurfaceHolder.Callback, Runnable {
private static final String TAG = "LuckyPanView";
private SurfaceHolder mHolder;
private Canvas mCanvas;
/* 用于繪制的線程*/
private Thread mThread;
/* 是否繪制*/
private boolean isRunning;
/* 轉盤文字 */
private String[] mStrings = new String[]{"單反相機", "IPad", "恭喜發財",
"IPhone", "服裝一套", "恭喜發財"};
/* 轉盤圖標 */
private int[] mImages = new int[]{R.drawable.danfan, R.drawable.ipad, R.drawable.f040,
R.drawable.iphone, R.drawable.meizi, R.drawable.f015};
/* 轉盤背景顏色 */
private int[] mColors = new int[]{0xFFFFC300, 0xFFF17E01, 0xFFFFC300, 0xFFF17E01, 0xFFFFC300, 0xFFF17E01};
/* 圖片對應的Bitmap對象 */
private Bitmap[] mImageBmp;
/* 背景bitmap */
private Bitmap mBgBmp = decodeResource(getResources(), R.drawable.bg2);
/* 繪制文字大小 */
private float mTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics());
/* 條目個數 */
private int mItemSize = 6;
/* 盤塊中心 */
private int mCenter;
/* 整個盤塊的范圍 */
private RectF mRectF = new RectF();
/* 盤塊的半徑*/
private int mRadius;
/* 盤塊畫筆 */
private Paint mArcPaint;
/* 文本的畫筆 */
private Paint mTextPaint;
/* 轉盤內邊距,取轉盤最小值,因為圓的 */
private int mPadding;
/* 鍵盤速度 */
private double mSpeed = 0;
/* 轉盤起始角度 */
private volatile double mStartAngle;
/* 判斷是否點擊了停止按鈕 */
private boolean isShouldEnd;
public LuckyPanView(Context context) {
this(context, null);
}
public LuckyPanView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
mHolder = getHolder();
mHolder.addCallback(this);
//設置焦點
setFocusable(true);
setFocusableInTouchMode(true);
//屏幕常亮
setKeepScreenOn(true);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int radius = Math.min(getMeasuredHeight(), getMeasuredWidth());
mPadding = getPaddingLeft();
//直徑
mRadius = radius - mPadding * 2;
//中心點
mCenter = radius / 2;
setMeasuredDimension(radius, radius);
}
@Override
public void surfaceCreated(SurfaceHolder surfaceHolder) {
//初始化轉盤畫筆
Paint paint = new Paint();
paint.setDither(true);
paint.setAntiAlias(true);
mArcPaint = paint;
//初始化文字畫筆
paint = new Paint();
paint.setAntiAlias(true);
paint.setDither(true);
paint.setColor(0xffffffff);
paint.setTextSize(mTextSize);
mTextPaint = paint;
//轉盤矩陣范圍
mRectF = new RectF(mPadding, mPadding, mRadius + mPadding, mRadius + mPadding);
//初始化圖片
mImageBmp = new Bitmap[mItemSize];
for (int i = 0; i < mImages.length; i++) {
mImageBmp[i] = BitmapFactory.decodeResource(getResources(), mImages[i]);
}
isRunning = true;
mThread = new Thread(this);
mThread.start();
}
@Override
public void surfaceChanged(SurfaceHolder surfaceHolder, int format, int width, int height) {
}
@Override
public void surfaceDestroyed(SurfaceHolder surfaceHolder) {
isRunning = false;
}
@Override
public void run() {
//不斷進行繪制
while (isRunning) {//維持50ms繪制一次
long start = System.currentTimeMillis();
draw();
long end = System.currentTimeMillis();
if (end - start < 50) {
SystemClock.sleep(50 - (end - start));
}
}
}
private void draw() {
try {
mCanvas = mHolder.lockCanvas();
if (mCanvas != null) {
//畫背景
drawBg();
//繪制盤塊
float tempAngle = (float) mStartAngle;
float sweepAngle = 360 / mItemSize;
for (int i = 0; i < mItemSize; i++) {
mArcPaint.setColor(mColors[i]);
//繪制盤塊
mCanvas.drawArc(mRectF, tempAngle, sweepAngle, true, mArcPaint);
//繪制文本
drawText(tempAngle, sweepAngle, mStrings[i]);
//繪制圖標
drawIcon(tempAngle, sweepAngle, mImageBmp[i]);
tempAngle = tempAngle + sweepAngle;
}
if (isShouldEnd) {
KLog.e(TAG, "draw: " + mStartAngle);
mSpeed--;
}
if (mSpeed < 0) {
mSpeed = 0;
isShouldEnd = false;
}
mStartAngle += mSpeed;
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (mCanvas != null) {//釋放canvas
mHolder.unlockCanvasAndPost(mCanvas);
}
}
}
public void luckyStart(int index) {
float avAgngle = 360 / mItemSize;
//隨機的一個角度
float randomAngle = (float) (avAgngle * Math.random());
//總共的角度，讓他轉4圈加上轉的角度再加上一個隨機的角度
float angle = 360 * 4 + avAgngle * index + randomAngle;
KLog.e(TAG, "luckyStart: " + angle);
//計算初始速度 s = 平均速度*時間 勻加速運動所以平均速度為(起始速度+結束速度)/2 時間 t = v/a 速度的變化除以加速度
mSpeed = Math.sqrt(2 * angle) + 0.5d;
KLog.e(TAG, "luckyStart: " + mSpeed);
isShouldEnd = false;
}
public void luckyStop() {
mStartAngle = 0;
isShouldEnd = true;
}
//是否在結束中，還在轉，但是已經點擊過停止即isShouldEnd為TRUE
public boolean isEnding() {
return isShouldEnd && isTurning();
}
/**
* 是否停止旋轉
*
* @return
*/
public boolean isTurning() {
return mSpeed != 0;
}
/**
* 畫圖表
*
* @param tempAngle 弧度開始角度
* @param sweepAngle 弧度大小
* @param imageBmp icon
*/
private void drawIcon(float tempAngle, float sweepAngle, Bitmap imageBmp) {
int imgWidth = mRadius / 8;
double angle = Math.toRadians(tempAngle + sweepAngle / 2);
int x = mCenter + (int) ((mRadius / 2 / 2) * Math.cos(angle));
int y = mCenter + (int) ((mRadius / 2 / 2) * Math.sin(angle));
mCanvas.drawBitmap(imageBmp, null,
new RectF(x - imgWidth / 2, y - imgWidth / 2, x + imgWidth / 2, y + imgWidth / 2),
null);
}
/**
* 繪制每個盤塊的文本
*
* @param startAngle 弧度開始角度
* @param sweepAngle 弧度大小
* @param string 文本
*/
private void drawText(float startAngle, float sweepAngle, String string) {
Path path = new Path();
path.addArc(mRectF, startAngle, sweepAngle);
//水平和垂直 偏移量
//利用水平偏移量讓文字居中
float textWidth = mTextPaint.measureText(string);
//弧度的一半減去文字寬度的一半，則是文字的水平偏移量
int hOffset = (int) (mRadius * Math.PI / mItemSize / 2 - textWidth / 2);
//垂直偏移量設置為當前半徑的六分之一
int vOffset = mRadius / 2 / 6;
mCanvas.drawTextOnPath(string, path, hOffset, vOffset, mTextPaint);
}
/**
* 繪制背景
*/
private void drawBg() {
if (mCanvas != null) {
mCanvas.drawColor(Color.WHITE);
mCanvas.drawBitmap(mBgBmp, null,
new RectF(mPadding / 2, mPadding / 2, getMeasuredWidth() - mPadding / 2, getMeasuredHeight() - mPadding / 2),
null);
}
}
}
整體demo已上傳github https://github.com/IdioticMadman/SurfaceViewLean
