让Surface中绘制的内容响应用户的交互（状态变化）

被绘制的内容响应用户的交互，简单的看就是绘制内容的状态在用户操作时发生了变化。

对于在SurfaceView中绘制的内容，如果我们希望文字可以水平移动，看看我们可以做些什么来实现这样的效果？首先，为了让例子简单，我们从XML文件中的Button接收用户的操作。然后在Activity中让自定义的View做我们所希望的状态变化，前提是获得自定义View的引用和为其添加操作接口。最后，在MyView中改变文字的X坐标来实现文字位置的改变，需要刷新（动态或静态），本例选择动态刷新。

1、布局文件

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <Button
        android:id="@+id/button_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="左" />

    <Button
        android:id="@+id/button_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="右" />

    <com.test.MyView
        android:id="@+id/my_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout

说明：

 

1. 为了简化，我们从XML文件中放置按钮，接收用户的操作事件。
2. 给MyView指定ID，为了后面可以获得其引用。

2、在Activity中添加用户点击按钮操作

 

public class MainActivity extends Activity implements OnClickListener {
	
	private Button btnLeft;
	private Button btnRight;
	
	private MyView myView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		
		getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		
		setContentView(R.layout.activity_main);
		
		myView = (MyView) findViewById(R.id.my_view);
		
		btnLeft = (Button) findViewById(R.id.button_left);
		btnRight = (Button) findViewById(R.id.button_right);
		
		btnLeft.setOnClickListener(this);
		btnRight.setOnClickListener(this);
		
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.button_left:
			myView.left();
			break;
		case R.id.button_right:
			myView.right();
			break;
		default:
			break;
		}
	}

}

 说明：

 

1. 左移文字：myView.left();
2. 右移文字：myView.right();

3、给MyView添加行为和属性

public class MyView extends SurfaceView implements Callback, Runnable {

	private Paint mPaint;
	private SurfaceHolder mSurfaceHolder;
	private Thread mThread;
	
	private float x = 10;
	
	private void initial() {
		
		mPaint = new Paint();  
		mPaint.setAntiAlias(true);
        this.setKeepScreenOn(true);
        mPaint.setColor(Color.RED);  
        
        mThread = new Thread(this);
        
        mSurfaceHolder = getHolder();
        mSurfaceHolder.addCallback(this);
        
	}
	
	public MyView(Context context) {
		super(context);
		initial();
	}
	
	public MyView(Context context, AttributeSet attrs) {
		super(context, attrs);
		initial();
	}
	
	public void left() {
		x = x - 5;
	}
	
	public void right() {
		x = x + 5;
	}
	
	private void draw() {
		
		Canvas mCanvas = null;
		try {
			mCanvas = mSurfaceHolder.lockCanvas();
			if (mCanvas != null) {
				mCanvas.drawColor(Color.WHITE);
				mCanvas.drawText("绘制文字", x, 20, mPaint);
				mCanvas.drawCircle(35, 50, 20, mPaint);
			}
		} catch (Exception e) {
			e.printStackTrace();
		} finally {
			if (mCanvas != null) {
				mSurfaceHolder.unlockCanvasAndPost(mCanvas);
			}
		}
		
	}

	@Override
	public void surfaceChanged(SurfaceHolder holder, int format, int width,
			int height) {
		
	}

	@Override
	public void surfaceCreated(SurfaceHolder holder) {
		mThread.start();
	}

	@Override
	public void surfaceDestroyed(SurfaceHolder holder) {
		System.out.println("www:surfaceDestroyed");
	}

	@Override
	public void run() {
		while (true) {
			draw();
			try {
				Thread.sleep(100);
			} catch (InterruptedException e) {
				e.printStackTrace();
			}
		}
	}

}

 说明：

1. 添加文字x坐标位置的属性：private float x = 10;
2. 添加行为，左移：left(); 右移：right();
3. 在run方法里面修改逻辑为每隔0.1秒刷新绘制一次;

效果如下：

 

希望对你有所帮助！：）