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

对于在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

说明：

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

}

 说明：

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

}

 说明：

效果如下：

希望对你有所帮助！：）

横向布局

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'hbox',
    items: [
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

纵向布局

Ext.create('Ext.Container', {
    fullscreen: true,
    layout: 'vbox',
    items: [
        {
            xtype: 'panel',
            html: 'message list',
            flex: 1
        },
        {
            xtype: 'panel',
            html: 'message preview',
            flex: 2
        }
    ]
});

** 卡片布局

Ext.application({
    name: 'MyApp',
	launch: function(){   
		//this is the Panel we'll be adding below
			var panel = Ext.create('Ext.Panel', {
				layout: 'card',
				items: [
					{
						html: "First Item"
					},
					{
						html: "Second Item"
					},
					{
						html: "Third Item"
					},
					{
						html: "Fourth Item"
					}
				]
			});

			panel.setActiveItem(0);	
			Ext.Viewport.add(panel);

	}
});

** 自适应布局, 子组件会 适应父组件的长宽

var panel = Ext.create('Ext.Panel', {
    width: 200,
    height: 200,
    layout: 'fit',

    items: {
        xtype: 'panel',
        html: 'Also 200px by 200px'
    }
});

Ext.Viewport.add(panel);

** docked  (漂浮)

Ext.application({
    name: 'MyApp',
	launch: function(){   
		//this is the Panel we'll be adding below
		Ext.create('Ext.Container', {
			fullscreen: true,
			layout: 'hbox',
			items: [
				{
					docked: 'top',
					xtype: 'panel',
					height: 20,
					html: 'This is docked to the top'
				},
				{
					xtype: 'panel',
					html: 'message list',
					flex: 1
				},
				{
					xtype: 'panel',
					html: 'message preview',
					flex: 2
				}
			]
		});



	}
});

 ** 轮播 布局

Ext.application({
    name: 'Sencha',
    launch: function() {
		Ext.create('Ext.Carousel', {
			fullscreen: true,

			defaults: {
				styleHtmlContent: true
			},

			items: [
				{
					html : 'Item 1',
					style: 'background-color: #5E99CC'
				},
				{
					html : 'Item 2',
					style: 'background-color: #759E60'
				},
				{
					html : 'Item 3'
				}
			]
		});
    }
});