1.在xml里面配置背景图片
1.png
2.在MainActivity里面添加按钮图片
2.1.计算dp对应的像素值
private float pixelFromDp(int size) {
//获取屏幕密度
return size * getResources().getDisplayMetrics().density;
}
2.2封装同时需要用到的方法
2.2.1创建按钮视图设置图片的大小
private void creatDot(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对应的是selected还是normal
if (res==R.drawable.selected){
dotViews.add(iv);
}
}
2.2.2计算图片的位置和是否让它显示
private void initNineDot(int res,int visible){
//图片最左和最右两边的距离
float padding = pixelFromDp(40);
//计算两个点中心点之间的间距
//1.获取屏幕宽度和高度
Point p = new Point();
getWindowManager().getDefaultDisplay().getSize(p);
//2.获取图片 便于找到图片的半径
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++) {
creatDot(res, (int) (x + space * j), (int) (y + space * i), visible);
}
}
}
2.2.3 绘制图片
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);
}
}
2.3找到容器视图
rl = findViewById(R.id.rl_root);
dotViews=new ArrayList<>();
2.4所用到的全局变量
RelativeLayout rl;
ArrayList<ImageView> dotViews;
DrawView drawView;
2.5显示
//正常显示点
initNineDot(R.drawable.normal,View.VISIBLE);
//绘制的视图
initDrawView();
//点亮的点
initNineDot(R.drawable.selected,View.INVISIBLE);
//将所有点的数组传送到DrawView
drawView.setDotViews(dotViews);(用于后面画线方便操作)
3.新建一个类为DrawView继承与View里面进行画线操作
3.1所用到的全局变量
private ArrayList<ImageView> dotViews;
private Point startPoint;
private Point endPoint;
private Paint mpaint;
private ArrayList<Path> paths;
private ArrayList<ImageView> selected;
3.2创建Touch事件用于管理是否画线等其余操作
@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);
//设置起始点
startPoint = new Point((int)(dot.getPivotX() + dot.getX()),
(int)(dot.getPivotY() + dot.getY()));
selected.add(dot);
}
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()));
selected.add(dot);
}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;
}
3.3创建画布用于画线
@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);
}
}
3.4判断触摸点是否在某个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= (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;
}
3.5创建一个清空方法
private void clear(){
for(ImageView dot:selected){
dot.setVisibility(INVISIBLE);
}
selected.clear();
paths.clear();
startPoint=null;
endPoint=null;
invalidate();
}
3.6创建一个点视图的set方法便于与点按钮的联系
public void setDotViews(ArrayList<ImageView> dotViews) {
this.dotViews = dotViews;
}
3.7在DrawView里面实现方法的调用
public DrawView(Context context){
super(context);
mpaint=new Paint(Paint.ANTI_ALIAS_FLAG);
mpaint.setColor(Color.GREEN);
mpaint.setStrokeWidth(10);
mpaint.setStyle(Paint.Style.STROKE);
paths=new ArrayList<>();
selected=new ArrayList<>();
}
4.最终结果
1573990965988.gif
