1. MainActivity extends AppCompatActivity
實(shí)現(xiàn)圖片的添加封裝
image.png
image.png
詳細(xì)代碼
public class MainActivity extends AppCompatActivity {
// ArrayList<ImageView> dotlist;
float padding;
RelativeLayout rl;
ArrayList<ImageView> dotViews;
DrawView drawView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//創(chuàng)建正常的點(diǎn)
initNineDot(R.drawable.normal,View.VISIBLE);
//添加一層視圖
DrawView();
//創(chuàng)建點(diǎn)亮的點(diǎn)
initNineDot(R.drawable.selected,View.INVISIBLE);
//將所有點(diǎn)的數(shù)組傳遞給DrawView
drawView.setDotViews(dotViews);
}
private void DrawView(){
drawView = new DrawView(this);
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
rl.addView(drawView, params);
}
private void initNineDot(int res,int visible){
rl = findViewById(R.id.parent);
dotViews = new ArrayList<>();
//確定左右間距大小
padding = piexlFromDp(50);
//計(jì)算兩個(gè)點(diǎn)中心點(diǎn)之間的間距
//得到屏幕寬度
Point p = new Point();
getWindowManager().getDefaultDisplay().getSize(p);
//獲取圖片
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.normal);
float space = (p.x - 2 * padding - bitmap.getWidth()) / 2;
//確定第一個(gè)點(diǎn)的x,y
float x = padding;
float y = p.y / 2 - space - bitmap.getHeight();
//使用for循環(huán)快速添加九個(gè)點(diǎn)
for (int i = 0; i < 3; i++){
for(int j = 0; j < 3; j++){
//調(diào)用函數(shù)添加圖片
creatDot(res,(int) (x + space * j),(int) (y + space * i),visible);
}
}
}
//將添加圖片的功能進(jìn)行封裝
private void creatDot(int res,int left,int top,int visible){
//創(chuàng)建圖片視圖
ImageView iv = new ImageView(this);
iv.setBackgroundResource(res);
iv.setVisibility(visible);
//創(chuàng)建容器
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對(duì)應(yīng)的是否為selected
if (res == R.drawable.selected){
dotViews.add(iv);
}
}
//計(jì)算dp對(duì)應(yīng)的像素值
private float piexlFromDp(int size){
//獲取屏幕的密度
return size * getResources().getDisplayMetrics().density;
}
}
2. DrawView extends View
實(shí)行主要功能劃線
詳細(xì)代碼
public class DrawView extends View {
private ArrayList<ImageView> dotViews;
private Point startPoint;
private Point endPoint;
private Paint mPaint;
private ArrayList<Path>paths;
private ArrayList<ImageView> 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<ImageView> 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);
//設(shè)置起始點(diǎn)
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 {
//判斷是第一個(gè)點(diǎn)還是其他
if(startPoint==null){
dot.setVisibility(VISIBLE);
//設(shè)置起始點(diǎn)
startPoint = new Point((int)(dot.getPivotX() + dot.getX()),
(int)(dot.getPivotY() + dot.getY()));
}else{
//點(diǎn)亮點(diǎn)
dot.setVisibility(VISIBLE);
//在之前和現(xiàn)在的點(diǎn)之間產(chǎn)生一個(gè)path
Path path=new Path();
path.moveTo(startPoint.x,startPoint.y);
path.lineTo(dot.getPivotX() + dot.getX(),
dot.getPivotY() + dot.getY());
paths.add(path);
//當(dāng)前這個(gè)這個(gè)點(diǎn)就是起始點(diǎn)
//設(shè)置起始點(diǎn)
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;
}
@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);
}
}
private void clear(){
for (ImageView dot: selected)
{ dot.setVisibility(INVISIBLE);
} selected.clear();
paths.clear();
startPoint = null;
endPoint = null;
invalidate();
}
//判斷觸摸點(diǎn)是否在某個(gè)dot里面
private ImageView viewContainedPoint(float x,float y){
for (ImageView dot: dotViews){
int[] point = new int[2];
dot.getLocationOnScreen(point);
//獲取dot的x和y坐標(biāo)
//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;
}
}
3.xml配置
很基礎(chǔ)
image.png
