Android 英文原文：Building Paint like Application in Android

当你第一次登陆到一台计算机时，你做的第一件事是什么？对我而言，它是微软的画板。对一生中都没有画过一个圆圈线的小孩说，画出一个完美的圆形、长方形和直线是多么令人兴奋的事。现在当我看到小孩在Android应用上画出第一幅画时，让我想起了我的童年时光。所以在这篇教程中我打算创建一个简单的画刷应用。这个应用非常简单，但它可以让你明白如何应用Android API来创建一个画图应用的基本概念。所以，让我们开始吧！！

第一步：在Eclipse中创建工程

正如看到的上一篇教程，在你为eclipse安装好android插件后，你就可以在Eclipse中创建android工程了。

清单（Mainfest)文件是默认有的一个文件。文件内容应该是这样的：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
   package="org.developerfeed.ankita.mypaintbrush"
   android:versionCode="1"
   android:versionName="1.0" >
    <uses-sdk
       android:minSdkVersion="8"
       android:targetSdkVersion="17" />
    <application
       android:allowBackup="true"
       android:icon="@drawable/ic_launcher"
       android:label="@string/app_name"
       android:theme="@style/AppTheme" >
        <activity
           android:name="org.developerfeed.ankita.mypaintbrush.PaintActivity"
           android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

第二步：视图

对于绘图应用，视图是非常重要的元素。这里我们不打算依靠XML视图，我们会创建一个定制视图来代替。为了创建一个定制的视图，我们需要一个继承自android.view.View的Java类。初始化这个类的代码如下所示：

package org.developerfeed.ankita.mypaintbrush;
import android.content.Context;
import android.view.View;
public class BrushView extends View {
        public BrushView(Context context) {
        super(context);
    }
}

画图和路径

在这个应用中神奇的部分是android.graphics.Paint类。该类有我们所需要的方法来在canvas上画图。我们也需要android.graphics.Path类对象。按照Android文档，该类负责封装复合的几何路径，可以由直线线段、二次曲线、三次曲线组成。听起来很复杂却的确用在了我们的应用里，它只会告诉我们用户触碰屏幕所绘制的路径。

private Paint brush = new Paint();
private Path path = new Path();

除了这两个对象，我认为现在我们还应该增加一个简单的重置按钮。所以又弄了个Button类对象。同时用LayoutParams对象来设置按钮参数。因而，现在你看到的应该像这么个样子。

package org.developerfeed.ankita.mypaintbrush;
import android.content.Context;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.Button;
public class BrushView extends View {
    private Paint brush = new Paint();
    private Path path = new Path();
    public Button btnEraseAll;
    public LayoutParams params;
    public BrushView(Context context) {
        super(context);
        brush.setAntiAlias(true);
        brush.setColor(Color.BLUE);
        brush.setStyle(Paint.Style.STROKE);
        brush.setStrokeJoin(Paint.Join.ROUND);
        brush.setStrokeWidth(10f);
        btnEraseAll=new Button(context);
        btnEraseAll.setText("Erase Everything!!");
        params = new LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.WRAP_CONTENT);
        btnEraseAll.setLayoutParams(params);
    }
}

按钮的点击事件

接下的你需要为按钮添加一个简单的点击事件，所以你可以加入如以下代码到构造函数中。

btnEraseAll.setOnClickListener(new View.OnClickListener() {
   
	@Override
	public void onClick(View view) {
		//reset the path
		path.reset();
		//invalidate the view
		postInvalidate();
	   
	}
});

Wow，我们正在取得进展，不是吗？但输出却仍然看不见！亲爱的朋友耐心点，我们很快就能实现目标。

路径的制作

一个Path对象只封装一个路径。我们需要给路径增加点，用来描绘用户触碰屏幕和拖动他的手指。所以我们需要处理View的一些事件，它们能告诉我们用户正触摸的区域。这个事件称为onTouchEvent，我们需要增加一个方法来显示得处理它。这儿是让它启用的代码。

@Override
public boolean onTouchEvent(MotionEvent event) {
   return false;
}

这个方法将会帮助我们创建路径，之后会用另外的方法来绘制这个路径。我们将会像这样处理MotionEvent：

首先，在我们第一次触碰屏幕（即MotionEvent.ACTION_DOWN）时创建一个路径。然后，当用户拖动时，我们不断增加点到路径里（即MotionEvent.ACTION_MOVE）。最后，当用户停止时，我们也停止增加点并且invalidate视图强行重绘。让我们看看如何实现：

public boolean onTouchEvent(MotionEvent event) {
        float pointX = event.getX();
        float pointY = event.getY();
        // Checks for the event that occurs
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            path.moveTo(pointX, pointY);
            return true;
        case MotionEvent.ACTION_MOVE:
            path.lineTo(pointX, pointY);
            break;
        default:
            return false;
        }      
         // Force a view to draw again
        postInvalidate();
        return false;
    }

其它翻译版本 (1) 加载中

实际绘画

下一步就是实际进行绘画了。这个工作将由 onDraw 方法完成，如下：

@Override
    protected void onDraw(Canvas canvas) {
        canvas.drawPath(path, brush);
    }

好，让我们进行下一步吧！

步骤3：使用“视图”

任何视图都可用于与 Activity 相关联。 这正是我们要做的。 为此，创建一个名为 PaintActivity 的 Activity 类。 并在构造函数中设置布局为我们的自定义视图(view)类对象。

类如下：

package org.developerfeed.ankita.mypaintbrush;
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class PaintActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        BrushView view=new BrushView(this);
        setContentView(view);
        addContentView(view.btnEraseAll, view.params);
    }
    @Override
    protected void onPause() {
        super.onPause();
        finish();
    }
}

瞧！完成了。现在让我们看看输出。在你的 AVD 中哦功能运行项目，看看你亲手完成的工作。

运行结果

哇，搞定了！开始征服下一个目标吧！

本教程的完整的 Android 项目源码可通过下面链接下载。

下载完整代码：MyPaintBrush.zip

本文中的所有译文仅用于学习和交流目的，转载请务必注明文章译者、出处、和本文链接。 2KB翻译工作遵照 CC 协议，如果我们的工作有侵犯到您的权益，请及时联系我们。

2KB项目（www.2kb.com，源码交易平台）,提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务