先上图：
其实很简单，不用过多解释，一点点注释就够了。
Java代码：
package com.example.graphicunlock;import android.os.Bundle;import android.os.Handler;import android.app.Activity;import android.content.Context;import android.content.pm.ActivityInfo;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Bitmap.Config;import android.graphics.Paint.Style;import android.graphics.Path;import android.graphics.PointF;import android.graphics.PorterDuff.Mode;import android.graphics.PorterDuffXfermode;import android.util.DisplayMetrics;import android.view.MotionEvent;import android.view.View;import android.view.View.OnTouchListener;import android.view.ViewGroup.LayoutParams;import android.view.Window;import android.view.WindowManager;import android.widget.ImageView;import android.widget.RelativeLayout;public class MainActivity extends Activity implements OnTouchListener { private RelativeLayout relativeLayout;// 用来摆放九个圆形 private ImageView view;// 用来绘制解锁路径 private Path path;// 划过的路径 private Paint paint; private Canvas canvas; private Dot[] array = new Dot[9];// 圆形的数组 private Dot lastDot;// 上一个经过的点 private Bitmap bitmap;// 绘制用的bitmap private boolean drawing = false;// 是否正在画图 private int radius = 0;// 圆形半径 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 锁定竖屏 setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); // 不显示标题栏 requestWindowFeature(Window.FEATURE_NO_TITLE); // 全屏 getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.activity_main); relativeLayout = (RelativeLayout) findViewById(R.id.rela); view = (ImageView) findViewById(R.id.view); view.setOnTouchListener(this); drawDots(); } /** * 放置九个圆形 将九个圆形在屏幕中居中放置，每屏幕的三分之一宽度为一格，横竖排各三个，每个圆宽度是屏幕宽度的1/6 */ protected void drawDots() { int TopMars = (getScreenHeight() - getScreenWidth()) / 2; radius = getScreenWidth() / 12; for (int i = 0; i < 3; i++) { for (int j = 0; j < 3; j++) { RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams( radius * 2, radius * 2); params.leftMargin = (int) (radius * 4 * (j + 0.25)); params.topMargin = (int) (TopMars + radius * 4 * (i + 0.25)); // 新建半径为radius的圆形 Dot dot = new Dot(this, radius); array[i * 3 + j] = dot; relativeLayout.addView(dot, params); } } } /** * 检查pointF是否在某个圆形范围内 * * @param point * 要检查的点 * @return 如果确实在某个圆形范围内，则返回该圆形，反之返回null */ private Dot hitValidDot(PointF point) { for (int i = 0; i < array.length; i++) { Dot dot = array[i]; if (!dot.getPassed()) { int[] location = { 0, 0 }; dot.getLocationOnScreen(location); if (Math.sqrt((point.x - location[0] - radius) * (point.x - location[0] - radius) + (point.y - location[1] - radius) * (point.y - location[1] - radius)) < radius) { return dot; } } } return null; } /** * 要绘制到的目标图片上的触摸事件 本方法里view.invalidate()并不是必须的，有没有一样…… */ @Override public boolean onTouch(View v, MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: // 检查手机按下的点是否在某个圆形内，如果是则以此圆形为起点开始绘制图形 PointF point = new PointF(event.getRawX(), event.getRawY()); Dot dot = hitValidDot(point); if (dot != null) { // 开始绘制 先实例化要绘制的bitmap canvas paint 和绘制的路径path bitmap = Bitmap.createBitmap(getWindowWidth(), getWindowHeight(), Config.ARGB_8888); canvas = new Canvas(bitmap); paint = new Paint(); path = new Path(); // 获取此圆形中心点的位置 RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) dot .getLayoutParams(); PointF startPoint = new PointF(params.leftMargin + radius, params.topMargin + radius); // 将loasDot赋值给dot，并将dot设置为经过状态 lastDot = dot; lastDot.drawPassed(); // 将圆形的中心点设置为路径的起点 并设置要绘制路径的颜色的宽度 path.moveTo(startPoint.x, startPoint.y); paint.setARGB(255, 0, 0, 255); paint.setStrokeWidth(8); paint.setStyle(Style.STROKE); // 绘制到屏幕 view.setImageBitmap(bitmap); // 标记为正在绘图中 drawing = true; } break; case MotionEvent.ACTION_MOVE: if (drawing) { // 先清空图片 否则看到的是每次绘制的叠加效果 clear(); // 同MotionEvent.ACTION_DOWN中一样 检查是否经过了某一点 PointF point2 = new PointF(event.getRawX(), event.getRawY()); Dot dot2 = hitValidDot(point2); if (dot2 != null) { // 不过有时候两点之间可能会有第三个点，如果第三个点为非经过状态，则将此点设置为经过状态 Dot dotBetween = checkDotBetween(lastDot, dot2); if (dotBetween != null) { lastDot = dotBetween; lastDot.drawPassed(); RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) dot2 .getLayoutParams(); path.lineTo(params.leftMargin + radius, params.topMargin + radius); } lastDot = dot2; lastDot.drawPassed(); RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) dot2 .getLayoutParams(); path.lineTo(params.leftMargin + radius, params.topMargin + radius); } // 绘制出经过的所有点的路径 canvas.drawPath(path, paint); // 绘制出上一个点到手指触摸的位置的路径 RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) lastDot .getLayoutParams(); canvas.drawLine(params.leftMargin + radius, params.topMargin + radius, event.getX(), event.getY(), paint); view.invalidate(); } break; case MotionEvent.ACTION_UP: if (drawing) { // 手指抬起后，清空并重新绘制所有经过的点的路径，这样就会清除上一个点到手指触摸的位置的路径了 clear(); canvas.drawPath(path, paint); view.invalidate(); // 绘制完毕，将绘制状态改为false drawing = false; // 三秒种后重置，放在这仅仅是为了测试重置功能 new Handler().postDelayed(new Runnable() { @Override public void run() { clearAllDrawing(); } }, 3000); } break; default: break; } return true; } /** * 重置所有为初始状态 */ protected void clearAllDrawing() { clear(); for (int i = 0; i < array.length; i++) { Dot dot = array[i]; if (dot != null) { dot.drawNormal(); } } drawing = false; } /** * 查检两点之间是否经过第三点，如果是则返回第三点，否则返回null */ protected Dot checkDotBetween(Dot dot1, Dot dot2) { int[] loc1 = { 0, 0 }; int[] loc2 = { 0, 0 }; dot1.getLocationOnScreen(loc1); dot2.getLocationOnScreen(loc2); // 两点之间的中点 PointF pointF = new PointF((loc1[0] + loc2[0]) / 2 + radius, (loc1[1] + loc2[1]) / 2 + radius); return hitValidDot(pointF); } /** * 清空画面 */ protected void clear() { if (canvas != null && paint != null) { paint.setXfermode(new PorterDuffXfermode(Mode.CLEAR)); canvas.drawPaint(paint); paint.setXfermode(new PorterDuffXfermode(Mode.SRC)); view.invalidate(); } } /** * @return 屏幕宽度 */ public int getScreenWidth() { DisplayMetrics metrics = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(metrics); return metrics.widthPixels; } /** * @return 屏幕高度 */ public int getScreenHeight() { DisplayMetrics metrics = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(metrics); return metrics.heightPixels; } /** * @return 返回窗口内容的宽度，不包括通知栏的标题栏，其实跟getScreenWidth()一样 */ public int getWindowWidth() { return getWindow().findViewById(Window.ID_ANDROID_CONTENT).getWidth(); } /** * @return 返回窗口内容的高度，不包括通知栏的标题栏，但是在这里是全屏，所以与getScreenHeight()返回的其实是一致的 */ public int getWindowHeight() { return getWindow().findViewById(Window.ID_ANDROID_CONTENT).getHeight(); } /** * 圆形 */ public class Dot extends ImageView { private int dotradius = 0;// 圆形半径 private boolean passed = false;// 是否经过的状态 public Dot(Context context) { super(context); } public Dot(Context context, int rad) { super(context); dotradius = rad; setLayoutParams(new LayoutParams(dotradius * 2, dotradius * 2)); drawNormal(); } /** * 绘制未经过时的状态 */ public void drawNormal() { passed = false; Bitmap bm = Bitmap.createBitmap(dotradius * 2, dotradius * 2, Config.ARGB_8888); Paint paint = new Paint(); Canvas canvas = new Canvas(bm); paint.setAntiAlias(true); paint.setARGB(255, 156, 156, 156); paint.setStyle(Style.STROKE); paint.setStrokeWidth(5); canvas.drawCircle(dotradius, dotradius, dotradius - paint.getStrokeWidth(), paint); paint.setStrokeWidth(1); paint.setStyle(Style.FILL_AND_STROKE); canvas.drawCircle(dotradius, dotradius, 3, paint); setImageBitmap(bm); } /** * 绘制经过时的状态 */ public void drawPassed() { passed = true; Bitmap bm = Bitmap.createBitmap(dotradius * 2, dotradius * 2, Config.ARGB_8888); Paint paint = new Paint(); Canvas canvas = new Canvas(bm); paint.setAntiAlias(true); paint.setARGB(255, 0, 0, 255); paint.setStyle(Style.STROKE); paint.setStrokeWidth(5); canvas.drawCircle(dotradius, dotradius, dotradius - paint.getStrokeWidth(), paint); paint.setStyle(Style.FILL_AND_STROKE); canvas.drawCircle(dotradius, dotradius, dotradius / 3, paint); setImageBitmap(bm); } public boolean getPassed() { return passed; } }} 布局xml代码，很简单：