Android学习历程15-SurfaceView的简单用法（实例：幸运抽奖以及控制中奖物品）

最新推荐文章于 2022-03-19 13:23:15 发布

anye_anye

最新推荐文章于 2022-03-19 13:23:15 发布

阅读量1.3k

点赞数

分类专栏：安卓开发文章标签： android SurfaceVie

本文链接：https://blog.csdn.net/anye_anye/article/details/50756375

版权

安卓开发专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1、定义

可以直接从内存或者DMA等硬件接口取得图像数据,是个非常重要的绘图容器。

它的特性是：可以在主线程之外的线程中向屏幕绘图上。这样可以避免画图任务繁重的时候造成主线程阻塞，从而提高了程序的反应速度。在游戏开发中多用到SurfaceView，游戏中的背景、人物、动画等等尽量在画布canvas中画出。

2、实现

首先继承SurfaceView并实现SurfaceHolder.Callback接口
使用接口的原因：因为使用SurfaceView 有一个原则，所有的绘图工作必须得在Surface 被创建之后才能开始(Surface—表面，这个概念在图形编程中常常被提到。基本上我们可以把它当作显存的一个映射，写入到Surface 的内容
可以被直接复制到显存从而显示出来，这使得显示速度会非常快)，而在Surface 被销毁之前必须结束。所以Callback 中的surfaceCreated 和surfaceDestroyed 就成了绘图处理代码的边界。

需要重写的方法

　（1）public void surfaceChanged(SurfaceHolder holder,int format,int width,int height){}

　 //在surface的大小发生改变时激发

　（2）public void surfaceCreated(SurfaceHolder holder){}

　 //在创建时激发，一般在这里调用画图的线程。

　（3）public void surfaceDestroyed(SurfaceHolder holder) {}

　 //销毁时激发，一般在这里将画图的线程停止、释放。

整个过程：继承SurfaceView并实现SurfaceHolder.Callback接口 —-> SurfaceView.getHolder()获得SurfaceHolder对象 —->SurfaceHolder.addCallback(callback)添加回调函数—->SurfaceHolder.lockCanvas()获得Canvas对象并锁定画布—-> Canvas绘画 —->SurfaceHolder.unlockCanvasAndPost(Canvas canvas)结束锁定画图，并提交改变，将图形显示。

3、SurfaceHolder
这里用到了一个类SurfaceHolder,可以把它当成surface的控制器，用来操纵surface。处理它的Canvas上画的效果和动画，控制表面，大小，像素等。
几个需要注意的方法：
(1)、abstract void addCallback(SurfaceHolder.Callback callback);
// 给SurfaceView当前的持有者一个回调对象。
(2)、abstract Canvas lockCanvas();
// 锁定画布，一般在锁定后就可以通过其返回的画布对象Canvas，在其上面画图等操作了。
(3)、abstract Canvas lockCanvas(Rect dirty);
// 锁定画布的某个区域进行画图等..因为画完图后，会调用下面的unlockCanvasAndPost来改变显示内容。
// 相对部分内存要求比较高的游戏来说，可以不用重画dirty外的其它区域的像素，可以提高速度。
(4)、abstract void unlockCanvasAndPost(Canvas canvas);
// 结束锁定画图，并提交改变。
4、实例（幸运抽奖盘）

1、MainActivity代码

package com.example.imooc_luckypan;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.WindowManager;
import android.view.inputmethod.InputMethodManager;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.Toast;

public class MainActivity extends Activity {

private LuckyPan mLuckyPan;
private ImageView mStartButton;
private EditText id_lucky_item;
private Button id_lucky_click;
private Boolean isDetermine = false;
private Context mContext;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    mContext = MainActivity.this;
    mLuckyPan = (LuckyPan) findViewById(R.id.id_luckyPan);
    mStartButton = (ImageView) findViewById(R.id.id_start_btn);
    id_lucky_item = (EditText) findViewById(R.id.id_lucky_item);
    id_lucky_click = (Button) findViewById(R.id.id_lucky_click);
    id_lucky_click.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View arg0) {
            // TODO Auto-generated method stub
            if (getWindow().getAttributes().softInputMode==WindowManager.LayoutParams.SOFT_INPUT_STATE_UNSPECIFIED) {
//                  Toast.makeText(mContext, "请先确认最上方的数字选择", Toast.LENGTH_SHORT).show();
                hideInput(mContext,id_lucky_item);
                id_lucky_item.clearFocus();
            }
        }
    });

    mStartButton.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            if (getWindow().getAttributes().softInputMode==WindowManager.LayoutParams.SOFT_INPUT_STATE_UNSPECIFIED) {
//                  Toast.makeText(mContext, "请先确认最上方的数字选择", Toast.LENGTH_SHORT).show();
                hideInput(mContext,id_lucky_item);
                id_lucky_item.clearFocus();
            }
            if(!mLuckyPan.isStart()){
                int i = Integer.parseInt(id_lucky_item.getText().toString())%6; 
                mLuckyPan.luckyStart(i);
                mStartButton.setImageResource(R.drawable.stop);
            }else{
                if(!mLuckyPan.isShouldEnd()){
                    mLuckyPan.luckyEnd();
                    mStartButton.setImageResource(R.drawable.start);
                }
            }
        }

    });
}

private void hideInput(Context context,View view){
    InputMethodManager inputMethodManager =
    (InputMethodManager)context.getSystemService(Context.INPUT_METHOD_SERVICE);
    inputMethodManager.hideSoftInputFromWindow(view.getWindowToken(), 0);
}
}

2、 activity_main布局文件代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"

android:background="#FFFFFF">

<LinearLayout 
    android:layout_alignParentTop="true"
    android:orientation="horizontal"
    android:layout_height="50dp"
    android:focusable="true"
    android:focusableInTouchMode="true"
    android:layout_width="match_parent">

    <EditText 
    android:id="@+id/id_lucky_item"
    android:layout_width="0dp"
    android:layout_weight="5"
    android:layout_height="match_parent"
    android:text="1"
    android:inputType="number"/>

    <Button 
    android:id="@+id/id_lucky_click"
    android:layout_width="0dp"
    android:layout_weight="1"
    android:layout_height="match_parent"
    android:text="确认"/>

</LinearLayout>

<com.example.imooc_luckypan.LuckyPan 
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="30dp"
    android:layout_centerInParent="true"
    android:id="@+id/id_luckyPan"/>

<ImageView 
    android:id="@+id/id_start_btn"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:src="@drawable/start"/>

</RelativeLayout>

3、LuckyPan 代码（幸运滚动盘实现代码）

package com.example.imooc_luckypan;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.SurfaceHolder;
import android.view.SurfaceHolder.Callback;
import android.view.SurfaceView;

public class LuckyPan extends SurfaceView implements Callback, Runnable {


private SurfaceHolder mHolder;
private Canvas mCanvas;

/**
 * 用于绘制的线程
 */
private Thread t;

/**
 * 线程的控制开关
 */
private Boolean isRunning;

//转盘内容
private String[] mStrs = new String[]{"单反相机","Ipad","恭喜发财","IPHONE","服装一套","恭喜发财"};
//转盘图片
private int[] mImgs = new int[]{R.drawable.danfan,R.drawable.ipad,R.drawable.f015,
        R.drawable.iphone,R.drawable.meizi,R.drawable.f040};
//绘制图片时的BitMap
private Bitmap[] mImgsBitmap;
//转盘颜色
private int[] mColor = new int[]{0XFFFFC300,0XFFF17E01,0XFFFFC300,0XFFF17E01,0XFFFFC300,0XFFF17E01};
//转盘个数
private int mItemCount = 6;

//整个盘快的范围
private RectF mRange = new RectF();

//整个盘快的直径
private int mRadius;

//绘制盘块的画笔
private Paint mArcPaint;

//绘制文本的画笔
private Paint mTextPaint;

//盘块滚动的速度
private double mSpeed;

//盘块最开始的角度
private volatile float mStartAngle = 0;

//判断是否需要停止
private boolean isShouldEnd;

//转盘的中心位置
private int mCenter;

//这里我们的padding直接以paddingLeft为准
private int mPadding;

//初始化背景图
private Bitmap mBgBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bg2);

//文字的大小
private float mTextSize = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP,20, getResources().getDisplayMetrics());

public LuckyPan(Context context, AttributeSet attrs) {
    super(context, attrs);
    // TODO Auto-generated constructor stub
    mHolder = getHolder();
    mHolder.addCallback(this);
    //可获得焦点
    setFocusable(true);
    setFocusableInTouchMode(true);
    //设置常量
    setKeepScreenOn(true);
}

public LuckyPan(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
    mHolder = getHolder();
    mHolder.addCallback(this);
    //可获得焦点
    setFocusable(true);
    setFocusableInTouchMode(true);
    //设置常量
    setKeepScreenOn(true);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    // TODO Auto-generated method stub
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    //转盘的边长
    int width = Math.min(getMeasuredWidth(), getMeasuredHeight());
    //边距
    mPadding = getPaddingLeft();
    //转盘的直径
    mRadius = width - mPadding * 2;
    //转盘的中心点
    mCenter = width / 2;

    setMeasuredDimension(width, width);
}

@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    // TODO Auto-generated method stub

}

@Override
public void surfaceCreated(SurfaceHolder holder) {
    //初始化绘制盘块的画笔
    mArcPaint = new Paint();
    mArcPaint.setAntiAlias(true);
    mArcPaint.setDither(true);

    //初始化绘制文本的画笔
    mTextPaint = new Paint();
    mTextPaint.setColor(0xFFFFFFFF);
    mTextPaint.setTextSize(mTextSize);
    //初始化盘块绘制的范围
    mRange = new RectF(mPadding, mPadding, mPadding + mRadius, mPadding +mRadius);
    //初始化图片
    mImgsBitmap = new Bitmap[mItemCount];
    for (int i = 0; i < mItemCount; i++) {
        mImgsBitmap[i] = BitmapFactory.decodeResource(getResources(), mImgs[i]);
    }
    isRunning = true;
    t = new Thread(this);
    t.start();
}

@Override
public void surfaceDestroyed(SurfaceHolder holder) {
    // TODO Auto-generated method stub
    isRunning = false;
}

@Override
public void run() {
    // TODO Auto-generated method stub
    while (isRunning) {
        long start = System.currentTimeMillis();
        draw();
        long end = System.currentTimeMillis();
        if (end - start < 50) {
            try {
                Thread.sleep(50 - (end - start));
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
    }
}

private void draw() {
    // TODO Auto-generated method stub
    try {
        mCanvas = mHolder.lockCanvas();

        if(mCanvas != null){
            //绘制背景
            drawBg();
            //绘制盘块
            float tempAngle = mStartAngle;
            float sweepAngle = 360 / mItemCount;

            for (int i = 0; i < mItemCount; i++) {
                mArcPaint.setColor(mColor[i]);
                //绘制盘块
                mCanvas.drawArc(mRange, tempAngle, sweepAngle, true, mArcPaint);
                //绘制文本
                drawText(tempAngle, sweepAngle,mStrs[i]);
                //绘制图片
                drawIcon(tempAngle, mImgsBitmap[i]);
                tempAngle += sweepAngle;
            }

            mStartAngle += mSpeed;

            //如果点击了停止按钮，
            if (isShouldEnd) {
                mSpeed -= 1;
            }
            if (mSpeed <= 0) {
                mSpeed = 0;
                isShouldEnd = false ;
            }


        }
    } catch (Exception e) {
    }
    finally{
        if (mCanvas != null) {
            mHolder.unlockCanvasAndPost(mCanvas);
        }
    }

}


//点击启动旋转
public void luckyStart(int index) {
    //计算每一项的角度
    int angle = 360 / mItemCount;
    //计算每一项的中奖范围（当前index）
    //按照文字数组中的下标来代表对应的物品，1代表IPAD，2代表单反，，
    //则1的中奖范围为150-210
    //0的中奖范围为210-270
    float from = 270 - (index + 1)*angle;
    float end = from + angle;

    //设置停下来需要旋转的距离
    float targetFrom = 4 * 360 + from;
    float targetEnd = 4 * 360 + end;
    //由于转盘停下来的时候速度一次递减，且每次减1，最终速度为0；则速度*时间=距离可知：（v1+0）*(v1+1)/2=targetFrom
    //由一元二次方程求解公式可知v1= (-1+Math.sqrt(1+8*targetFrom))/2
    float v1 = (float) ((-1+Math.sqrt(1+8*targetFrom))/2);//最小速度
    float v2 = (float) ((-1+Math.sqrt(1+8*targetEnd))/2);//最大速度
    mSpeed = v1 + Math.random()*(v2 - v1);
//      mSpeed = 50;
    isShouldEnd = false;
}

//点击停止旋转
public void luckyEnd() {
    mStartAngle = 0;
    isShouldEnd = true;
}

//转盘是否在旋转
public Boolean isStart() {
    return mSpeed != 0;
}

//停止按钮是否按下
public Boolean isShouldEnd() {
    return isShouldEnd;
}

//绘制图片
private void drawIcon(float tempAngle, Bitmap bitmap) {
    //设置图片的宽度为直径的八分之一
    int imgWidth = mRadius / 8;
    float angle = (float) ((tempAngle + 360/mItemCount/2)*Math.PI/180);
    int x = (int) (mCenter +mRadius/4*Math.cos(angle));
    int y = (int) (mCenter +mRadius/4*Math.sin(angle));
    //确定图片的位置
    Rect rect = new Rect(x - imgWidth / 2, y - imgWidth / 2, x + imgWidth / 2, y + imgWidth / 2);
    mCanvas.drawBitmap(bitmap, null, rect, null);
}

//绘制每一个盘块的文本
private void drawText(float tempAngle, float sweepAngle, String string) {
    Path path = new Path();
    path.addArc(mRange, tempAngle, sweepAngle);
    //利用水平偏移量让文字居中
    float textWidth = mTextPaint.measureText(string);
    int hOffset = (int) (mRadius * Math.PI /mItemCount/2-textWidth/2);
    int vOffset = mRadius/2/6;
    mCanvas.drawTextOnPath(string, path, hOffset, vOffset, mTextPaint);
}

//绘制背景
private void drawBg() {
    mCanvas.drawColor(0xFFFFFFFF);
    mCanvas.drawBitmap(mBgBitmap, null, new RectF(mPadding/2, mPadding/2, 
            getMeasuredWidth() - mPadding/2, getMeasuredHeight() - mPadding/2),
            null);
}

}

运行效果图：
这里写图片描述

资源图片：
这里写图片描述

SurfaceView基本代码

package com.example.imooc_luckypan;

import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.SurfaceHolder;
import android.view.SurfaceHolder.Callback;
import android.view.SurfaceView;

public class SurfaceViewTemplete extends SurfaceView implements Callback, Runnable {


private SurfaceHolder mHolder;
private Canvas mCanvas;

/**
 * 用于绘制的线程
 */
private Thread t;

/**
 * 线程的控制开关
 */
private Boolean isRunning;

public SurfaceViewTemplete(Context context, AttributeSet attrs) {
    super(context, attrs);
    // TODO Auto-generated constructor stub
}

public SurfaceViewTemplete(Context context) {
    this(context,null);
    // TODO Auto-generated constructor stub
    mHolder = getHolder();
    mHolder.addCallback(this);
    //可获得焦点
    setFocusable(true);
    setFocusableInTouchMode(true);
    //设置常量
    setKeepScreenOn(true);
}

@Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
    // TODO Auto-generated method stub

}

@Override
public void surfaceCreated(SurfaceHolder holder) {
    // TODO Auto-generated method stub
    isRunning = true;
    t = new Thread(this);
    t.start();
}

@Override
public void surfaceDestroyed(SurfaceHolder holder) {
    // TODO Auto-generated method stub
    isRunning = false;
}

@Override
public void run() {
    // TODO Auto-generated method stub
    while (isRunning) {
        draw();
    }
}

private void draw() {
    // TODO Auto-generated method stub
    try {
        mCanvas = mHolder.lockCanvas();

        if(mCanvas != null){
            //draw something

        }
    } catch (Exception e) {
    }
    finally{
        if (mCanvas != null) {
            mHolder.unlockCanvasAndPost(mCanvas);
        }
    }

}

}