我們在Android開發(fā)第三天的時(shí)候也做了手勢解鎖這樣一個(gè)項(xiàng)目，但由于當(dāng)時(shí)還沒學(xué)習(xí)畫板
對點(diǎn)與點(diǎn)之間的線的處理是通過圖片來處理的任洞，所以今天這個(gè)項(xiàng)目運(yùn)用到畫板來代替圖片枚抵，也相當(dāng)于手勢解鎖的一個(gè)進(jìn)階版吧蹬耘，話不多說直接上吧３饧尽欺嗤！
手勢解鎖
activity_main.xml：選擇RelativeLayout方式進(jìn)行布局参萄，另外圖片的布局都由MainActivity代碼完成，所以此處只添加了一個(gè)背景圖片
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:id="@+id/rl_root"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@drawable/bg"
android:scaleType="center"
/>
</RelativeLayout>
MainActivity：封裝函數(shù)與RelativeLayout布局
public class MainActivity extends AppCompatActivity {
RelativeLayout rl;
ArrayList<ImageView> 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<>();
//正常顯示的點(diǎn)
initNineDot(R.drawable.normal, View.VISIBLE);
//繪制的視圖
initDrawView();
//點(diǎn)亮的點(diǎn)
initNineDot(R.drawable.selected,View.INVISIBLE);
//將所有點(diǎn)的數(shù)組傳遞給DrawView
drawView.setDotViews(dotViews);
}
private void initDrawView(){
//創(chuàng)建視圖
drawView = new DrawView(this);
//創(chuàng)建布局容器
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);
//計(jì)算兩個(gè)點(diǎn)中心點(diǎn)之間的間距
Point p = new Point();
getWindowManager()
.getDefaultDisplay()
.getSize(p);
//獲取圖片
Bitmap bitmap = BitmapFactory
.decodeResource(getResources()
,res);
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();
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) {
//創(chuàng)建圖片視圖
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對應(yīng)的是seleced還是normal
if (res == R.drawable.selected) {
dotViews.add(iv);
}
}
//計(jì)算dp對應(yīng)的像素值
private float pixelFromDp(int size){
//獲取屏幕的密度
return size * getResources()
.getDisplayMetrics()
.density;
}
}
DrawView： 畫板視圖放在normal圖片與select圖片中間煎饼，方便點(diǎn)亮但讹挎，所以將onTouchEvent也放在里面，相互調(diào)用
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);
selected.add(dot);
//設(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){
//第?個(gè)點(diǎn)
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;
}
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);
}
}
//判斷觸摸點(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;
}
}
