Android custom controls slide to unlock the nine Cells

Android custom controls slide to unlock the nine Cells
Overview:

Analysis of sliding and unlocking the jiugongge:
1. custom controls are required;
2. You need to override the event onTouchEvent ();
3. You need to set the sequence number and coordinates for the nine points. Here you can use the Map class;
4. You need to determine whether to slide to one of the nine points and store the serial numbers of the sliding points. You also need a method to return them. Here you can use the List class;

Slide unlocking is still quite popular. Today I wrote a simple slide unlocking routine for beginners.

Mine is like this:

Demo

First, define a View

/*** */Public class NineGridView extends View {private int width; // width of the control private int height; // high private Paint mPaintBigCircle of the control; // used to draw the external circle private Paint mPaintSmallCircle; // used to draw the incircle private Paint mPaintLine; // used to draw the line private Paint mPaintText; // used to draw the text private Path path; // private Map is required for gesture dashes.
  
   
PointContainer; // stores the coordinate private List of nine vertices
   
    
PointerSlipped; // The nine-cell password public List
    
     
GetPointerSlipped () {return pointerSlipped;} public void setPointerSlipped (List
     
      
PointerSlipped) {this. pointerSlipped = pointerSlipped;} public NineGridView (Context context) {super (context);} public NineGridView (Context context, AttributeSet attrs) {super (context, attrs ); mPaintBigCircle = new Paint (); mPaintBigCircle. setColor (Color. BLUE); mPaintBigCircle. setStyle (Paint. style. STROKE); // not full of mPaintBigCircle. setAntiAlias (true); // enable mPaintSmallCircle = new Paint (); mPaintSmallCircle. setColor (Color. GREEN); mPaintSmallCircle. setStyle (Paint. style. FILL); // filled, that is, the drawn body is solid mPaintSmallCircle. setAntiAlias (true); mPaintLine = new Paint (); mPaintLine. setColor (Color. GREEN); mPaintLine. setStyle (Paint. style. STROKE); mPaintLine. setStrokeWidth (20); mPaintLine. setAntiAlias (true); mPaintText = new Paint (); mPaintText. setColor (Color. WHITE); mPaintText. setTextAlign (Paint. align. CENTER); // align mPaintText to the CENTER. setTextSize (50); mPaintText. setAntiAlias (true); path = new Path (); pointContainer = new HashMap <> (); pointerSlipped = new ArrayList <> () ;}@ Override protected void onMeasure (int widthMeasureSpec, int heightMeasureSpec) {super. onMeasure (widthMeasureSpec, heightMeasureSpec); width = getDefaultSize (rows (), widthMeasureSpec); height = getDefaultSize (rows (), heightMeasureSpec);} private float limit TX; // The x coordinate private float Ty obtained from the touch screen; // The y coordinate private float selectedX obtained from the touch screen; // The x coordinate private float selectedY of the currently selected dot; // The y coordinate private float selectedXOld of the currently selected dot; // The x coordinate private float selectedYOld of the previously selected dot; // The y coordinate of the previously selected dot private boolean isHasMoved = false; // used to determine whether the path has called the moveTo () method @ Override public boolean onTouchEvent (MotionEvent event) {switch (event. getAction () {case MotionEvent. ACTION_DOWN: Required Tx = event. getX (); entity ty = event. getY (); // you need to clear pointerSlipped every time you touch the screen, that is, reset the password pointerSlipped. clear (); Log. d (pointTouched, 1_tx +, + 1_ty); getSelectedPointIndex (1_tx, 1_ty); invalidate (); // re-paint break; case MotionEvent. ACTION_MOVE: Required Tx = event. getX (); entity ty = event. getY (); getSelectedPointIndex (optional Tx, interval ty); invalidate (); break; case MotionEvent. ACTION_UP:/*** reset path */path when the finger leaves the screen. reset (); isHasMoved = false; String indexSequence =; // print the value of the last gesture password for (int index: pointerSlipped) {indexSequence ++ index;} Log. d (index, indexSequence); break;} invalidate (); return true ;} /*** obtain and store the serial number of the dot that passes through * @ param destination TX * @ param destination ty */private void getSelectedPointIndex (float destination Tx, float destination ty) {int index = 0; if (faster TX> patternMargin & faster TX <patternMargin + bigCircleRadius * 2) {if (faster ty> height/2 & more ty 
        PatternMargin + added * 2 & Symbol TX <patternMargin + added * 2 + bigCircleRadius * 2) {if (symbol ty> height/2 & Symbol ty 
     
    
   
  

Why avoid repetition?
Because the onTouchEvent () method is called many times on the touch screen, the stored gesture password will certainly be inaccurate. I have done so in the above code, and I have already avoided repeated operations, view printed information:

Obviously, there are no adjacent numbers in the password. Of course, there is also a situation where the fingers go back and forth between two points. This situation also needs to be avoided and is not handled here. Of course, I am not doing enough...

Tool class for mutual conversion of dp and px used in custom view:

Public class SizeConvert {/*** converts dp to sp */public static int dip2px (Context context, float dipValue) {final float scale = context. getResources (). getDisplayMetrics (). density; return (int) (dipValue * scale + 0.5f);}/*** sp to dp */public static int px2dip (Context context, float pxValue) {final float scale = context. getResources (). getDisplayMetrics (). density; return (int) (pxValue/scale + 0.5f );}}

Main activity:

public class NineGridActivity extends BaseActivity{    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.view_nine_grid);    }}

Layout file view_nine_grid in layout:

Summary

I only wrote the most basic nine-palace lattice sliding decryption project. The actual nine-palace lattice decryption is more complex than this one. There are many special effects and other more rigorous processing, the handling of events is not the case. If you want to write well, you have to spend more time.