我们在Android开发第三天的时候也做了手势解锁这样一个项目，但由于当时还没学习画板
对点与点之间的线的处理是通过图片来处理的，所以今天这个项目运用到画板来代替图片，也相当于手势解锁的一个进阶版吧，话不多说直接上吧！！
手势解锁
activity_main.xml：选择RelativeLayout方式进行布局，另外图片的布局都由MainActivity代码完成，所以此处只添加了一个背景图片
MainActivity：封装函数与RelativeLayout布局
public class MainActivity extends AppCompatActivity {
RelativeLayout rl;
ArrayList dotViews;
DrawView drawView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
rl = findViewById(R.id.rl_root);
dotViews=new ArrayList<>();
//正常显示的点
initNineDot(R.drawable.normal, View.VISIBLE);
//绘制的视图
initDrawView();
//点亮的点
initNineDot(R.drawable.selected,View.INVISIBLE);
//将所有点的数组传递给DrawView
drawView.setDotViews(dotViews);
}
private void initDrawView(){
//创建视图
drawView = new DrawView(this);
//创建布局容器
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
//添加
rl.addView(drawView, params);
}
//图片 隐藏 tag
private void initNineDot(int res,int visible){
float padding = pixelFromDp(40);
//计算两个点中心点之间的间距
Point p = new Point();
getWindowManager()
.getDefaultDisplay()
.getSize(p);
//获取图片
Bitmap bitmap = BitmapFactory
.decodeResource(getResources()
,res);
float space = (p.x - 2 * padding - bitmap.getWidth())/2;
//确定第一个点的x和y
float x = padding;
float y = p.y/2 - space - bitmap.getHeight();
int index = 1;
for (int i = 0; i < 3; i++){
for (int j = 0; j < 3; j++){
createDot(res,
(int) (x + space*j),
(int) (y + space*i),
visible);
}
}
}
private void createDot(int res, int left, int top,int visible) {
//创建图片视图
ImageView iv = new ImageView(this);
iv.setBackgroundResource(res);
iv.setVisibility(visible);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
params.leftMargin = left;
params.topMargin = top;
//添加视图
rl.addView(iv, params);
//判断res对应的是seleced还是normal
if (res == R.drawable.selected) {
dotViews.add(iv);
}
}
//计算dp对应的像素值
private float pixelFromDp(int size){
//获取屏幕的密度
return size * getResources()
.getDisplayMetrics()
.density;
}
}
DrawView： 画板视图放在normal图片与select图片中间，方便点亮但，所以将onTouchEvent也放在里面，相互调用
public class DrawView extends View {
private ArrayList dotViews;
private Point startPoint;
private Point endPoint;
private Paint mPaint;
private ArrayList paths;
private ArrayList selected;
public DrawView(Context context) {
super(context);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.WHITE);
mPaint.setStrokeWidth(20);
mPaint.setStyle(Paint.Style.STROKE);
paths = new ArrayList<>();
selected = new ArrayList<>();
}
public void setDotViews(ArrayList dotViews) {
this.dotViews = dotViews;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
ImageView dot;
switch (event.getAction()){
case MotionEvent.ACTION_DOWN:
dot = viewContainedPoint(x,y);
if (dot != null){
dot.setVisibility(VISIBLE);
selected.add(dot);
//设置起始点
startPoint = new Point((int)(dot.getPivotX() + dot.getX()),
(int)(dot.getPivotY() + dot.getY()));
}
break;
case MotionEvent.ACTION_MOVE:
dot = viewContainedPoint(x,y);
if (dot == null){
//划线
endPoint = new Point((int)x,(int)y);
//刷新
invalidate();
}else{
//判断是第⼀个点还是其他
if (startPoint == null){
//第⼀个点
dot.setVisibility(VISIBLE);
//设置起始点
startPoint = new Point((int)(dot.getPivotX() + dot.getX()),
(int)(dot.getPivotY() + dot.getY()));
}else{
//点亮点
dot.setVisibility(VISIBLE);
//在之前和现在的点之间产⽣⼀个path
Path path = new Path();
path.moveTo(startPoint.x,startPoint.y);
path.lineTo(dot.getPivotX() + dot.getX(),
dot.getPivotY() + dot.getY());
paths.add(path);
//当前这个这个点就是起始点
//设置起始点
startPoint = new Point((int)(dot.getPivotX() + dot.getX()),
(int)(dot.getPivotY() + dot.getY()));
endPoint = startPoint;
//刷新
invalidate();
}
selected.add(dot);
}
break;
case MotionEvent.ACTION_UP:
clear();
break;
}
return true;
}
private void clear(){
for (ImageView dot: selected){
dot.setVisibility(INVISIBLE);
}
selected.clear();
paths.clear();
startPoint = null;
endPoint = null;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
if (paths.size() > 0){
for (Path path: paths){
canvas.drawPath(path, mPaint);
}
}
if (startPoint != null && endPoint != null) {
canvas.drawLine(startPoint.x, startPoint.y,
endPoint.x, endPoint.y, mPaint);
}
}
//判断触摸点是否在某个dot⾥⾯
private ImageView viewContainedPoint(float x,float y){
for (ImageView dot: dotViews){
int[] point = new int[2];
dot.getLocationOnScreen(point);
//获取dot的x和y坐标
//int px = point[0];
//int py = point[1];
int px = (int) dot.getX();
int py = (int) dot.getY();
if ((x >= px && x <= px + dot.getWidth())
&&(y >= py && y <= py +dot.getHeight())){
return dot;
}
}
return null;
}
}