小小画布的实现

一个简单的画板

 

博客将分为以下几个方面来写：

1.仅实现一个可操作的画板

2.给画板上添加四个按钮

3.给按钮增加监听事件

4.给按钮添加弹窗操作

5.错误解决

 

1.仅实现一个可操作的画板

xml文件

 <ImageView
       android:id="@+id/image"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_alignParentLeft="true"
       android:layout_alignParentTop="true" />

 java代码

public class MainActivity extends Activity {
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		final ImageView imageView = (ImageView) findViewById(R.id.image);

		DisplayMetrics dm = new DisplayMetrics();
		getWindowManager().getDefaultDisplay().getMetrics(dm);
		int m = dm.widthPixels, n = dm.heightPixels;

		final Bitmap bitmap = Bitmap.createBitmap(m, n, Bitmap.Config.ARGB_8888);
		final Canvas canvas = new Canvas(bitmap);
		canvas.drawColor(Color.WHITE);

		final Paint paint = new Paint();
		
		paint.setColor(Color.RED);
		paint.setStrokeWidth(4);
		paint.setAntiAlias(true);

		imageView.setImageBitmap(bitmap);
		imageView.setOnTouchListener(new OnTouchListener() {
			float x, y;

			@Override
			public boolean onTouch(View arg0, MotionEvent arg1) {
				// TODO Auto-generated method stub
				switch (arg1.getAction()) {
				case MotionEvent.ACTION_DOWN:
					x = arg1.getX();
					y = arg1.getY();
					break;
				default:
					canvas.drawLine(x, y, arg1.getX(), arg1.getY(), paint);
					imageView.setImageBitmap(bitmap);
					x = arg1.getX();
					y = arg1.getY();
					break;
				}

				return true;
			}
		});
	}

 这样我们就可以在画板上随便作画了

 

 

2.给画板上添加四个按钮

下面给画板添加四个按钮

那么如何在一行整齐的排列四个按钮呢？

下面是我的解决办法。

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
 
        <Button
            android:id="@+id/pen"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" 
            android:text="pen"/>
 
        <Button
            android:id="@+id/shape"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" 
            android:text="shape"/>
 
        <Button
            android:id="@+id/color"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" 
            android:text="color"/>
 
        <Button
            android:id="@+id/clear"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" 
            android:text="clear"/>
    </LinearLayout>

 在手机上运行之后就出现了如下的界面


 

 

 

 

 

3.给按钮增加监听事件

xml代码：

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >
 
        <Button
            android:id="@+id/pen"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" 
            android:onClick="onClick1"
            android:text="pen"/>
 
        <Button
            android:id="@+id/shape"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" 
            android:onClick="onClick2"
            android:text="shape"/>
 
        <Button
            android:id="@+id/color"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" 
            android:onClick="onClick3"
            android:text="color"/>
 
        <Button
            android:id="@+id/clear"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1" 
            android:onClick="onClick4"
            android:text="clear"/>
    </LinearLayout>

 

java代码：

        //指定onClick属性方式
	//传入的View对象，就是用户按下的那个按钮对象
    public void click(View v){
		
		
		int id=v.getId();
		switch(id){
		case R.id.pen:
			Log.i("指定onClick属性方式","请选择您喜欢的画笔");
			break;
		case R.id.shape:
			Log.i("指定onClick属性方式","请选择您喜欢的形状");
			break;
		case R.id.color:
			Log.i("指定onClick属性方式","请选择您喜欢的颜色");
			break;
		case R.id.clear:
			Log.i("指定onClick属性方式","清除您的画");
			break;
		default:
			break;
		}
	}

 

 

 

 

4.给按钮添加弹窗操作

下面给按钮添加弹窗操作

下面是点击pen按钮的代码：

// 单选提示框  
    private AlertDialog alertDialog2;  
    public void onClick1(View view){  
        final String[] items = {"粗","中","细"};  
        AlertDialog.Builder alertBuilder = new AlertDialog.Builder(this);  
        alertBuilder.setTitle("请选择您需要的笔");  
        alertBuilder.setSingleChoiceItems(items, 0, new DialogInterface.OnClickListener() {  
              
            @Override  
            public void onClick(DialogInterface arg0, int index) {  
                Toast.makeText(MainActivity.this, items[index], Toast.LENGTH_SHORT).show();  
            }  
        });  
        alertBuilder.setPositiveButton("确定", new DialogInterface.OnClickListener() {  
              
            @Override  
            public void onClick(DialogInterface arg0, int arg1) {  
                //TODO 业务逻辑代码  
                  
                // 关闭提示框  
                alertDialog2.dismiss();  
            }  
        });  
        alertBuilder.setNegativeButton("取消", new DialogInterface.OnClickListener() {  
              
            @Override  
            public void onClick(DialogInterface arg0, int arg1) {  
                // TODO 业务逻辑代码  
                  
                // 关闭提示框  
                alertDialog2.dismiss();  
            }  
        });  
        alertDialog2 = alertBuilder.create();  
        alertDialog2.show();  
    }

 接下来我们来看一下运行效果：

 

shape和color的代码同上，所以直接展示效果了。

 

 

 

 

 

5.错误解决

 

第一个错误

新建项目运行时，就出现了如下的错误：

 

解决方法：

百度大神大多说是jdk的问题，解决:

右键项目-Properties后按下图操作：

 我的原来是1.8,换成1.7点击ok解决。

 

第二个错误

 解决方法：

右键项目-Properties后按下图操作：

 将图中Is Library前面的对勾去掉，这样问题就解决了。

 

 画板还有很多功能未添加，日后慢慢实现，希望不会拖太久。