让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秒刷新绘制一次;

效果如下:
让Surface中绘制的内容响应用户的交互(状态变化)

希望对你有所帮助!:)

相关推荐