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

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);
        }
    }

}

}
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值