Android happy Snake Game Development tutorial-04 virtual arrow key (3) Triangle button effect, android-04

Android happy Snake Game Development tutorial-04 virtual arrow key (3) Triangle button effect, android-04

Overview and directory of this series of tutorials: http://www.cnblogs.com/chengyujia/p/5787111.html

I. knowledge point explanation

When we click the button that comes with the system, the appearance of the button changes. In the previous blog, we drew a triangle button, but the click cannot change color. Next we will implement the click color change function.

From the knowledge system, we need to understand the following two knowledge points:

• 1. How do I know that my fingers have clicked on our controls?

The method is to override the onTouchEvent method in the View. When your fingers touch our controls, the system will tell us through this method. This method also has a parameter of the MotionEvent type, through which we can know the specific type of the current touch event, such as pressing, moving, and lifting.
We can enable the button to display a darker color under normal circumstances, display a brighter color when pressed, and then restore to a darker color. In this way, the click color effect is achieved.

• 2. How to change color?

View provides a method called invalidate. Every time this method is called, the system will re-call the onDraw method to reproduce the picture control. What we need to do is to judge the current touch action in onDraw. If it is pressed, draw a highlighted triangle without touching or drawing a dark triangle after pressing it.

After learning about related knowledge, we can use the code below.

Ii. Code Implementation

The following is the full code of the current DirectionKeys class:

Package net. chengyujia. happysnake; import android. content. context; import android. graphics. canvas; import android. graphics. paint; import android. graphics. path; import android. util. attributeSet; import android. view. motionEvent; import android. view. view;/*** Created by ChengYuJia on 2016/8/19. * virtual arrow keys on the screen */public class DirectionKeys extends View {// color (highlighted) when the Left triangle is pressed private int leftPressedColor = 0xFFFF0000; // The normal color (darker) of the Left triangle private int leftNormalColor = 0xFFAA0000; // the action of touching the screen by hand. The initial value is the action value not used in a MotionEvent, such as-10, indicates that no touch screen action has taken place. Private int action =-10; // The width of the canvas private int width; // The height of the canvas private int height; // draw the Path of the Left triangle private Path pathLeft = new Path (); // brush private Paint paint = new Paint (); // whether the initialization method has been executed, make sure that the initialization method is executed only once. Private boolean initDone = false; // The constructor with only one parameter is called when an instance is created using the "new" keyword in the program. Public DirectionKeys (Context context) {super (context) ;}// the constructor with two parameters is called when the system creates an instance in the XML layout file. Public DirectionKeys (Context context, AttributeSet attrs) {super (context, attrs);} // initialization method private void init (Canvas canvas) {/* obtain the length and width of the canvas */width = canvas. getWidth (); height = canvas. getHeight ();/* (TIPS: Generally, the upper left corner is used as the coordinate origin in the computer) the coordinates of the four vertices and the center points on the canvas are as follows: Top left vertex 0, bottom left vertex 0, height top right point width, 0 bottom right point width, height center point width/2, height/2 * // * set the path data of the Left triangle * // start pathLeft from the top left of the canvas. moveTo (0, 0); // draw a straight line to the canvas center pathLeft. lineTo (wid Th/2, height/2); // draw a straight line to the bottom left of the canvas. pathLeft. lineTo (0, height); // automatically close the image. Draw a straight line from the last vertex (lower left vertex) to the first vertex (upper left vertex ). PathLeft. close ();}/*** use the onDraw method of the parent class to draw the image we need * This method will be called by the system when the control is displayed for the first time, the system calls the invalidate method each time later. ** @ Param canvas the canvas here is a rectangle canvas provided by the system. What we need to do is to draw what we want on this canvas. * // @ Override protected void onDraw (Canvas canvas) {if (! InitDone) {init (canvas); // make sure that the initialization method is executed only once. initDone = true;} if (action = MotionEvent. ACTION_DOWN) {// highlight the paint when pressed by hand. setColor (leftPressedColor);} else {// The paint color is darker after being lifted by or without pressing. setColor (leftNormalColor);} // draw the Left triangle canvas. drawPath (pathLeft, paint);}/*** if you touch our control, the system will use this method to notify us ** @ param event the touch event parameter * @ return passed to us by the system. If this touch event is processed, true is returned, and false is returned. * // @ Override public boolean onTouchEvent (MotionEvent event) {action = event. getAction (); // ACTION_DOWN indicates holding the mouse to the screen, and ACTION_UP indicates lifting the hand from the screen. We only process these two actions. If (action = MotionEvent. ACTION_DOWN | action = MotionEvent. ACTION_UP) {// The invalidate method indicates that the current control needs to be repainted, and the system will call the onDraw method again for repainting. Invalidate (); return true;} return false ;}}

 

The above comments are more detailed, mainly for the three methods onDraw (drawing), onTouchEvent (Listening for touch events), invalidate (let the system call the onDraw Method for re-painting ).

In addition, you only need to initialize the Path object and the Paint object once, and there is no need to re-create each onDraw to improve program performance.

Iii. Running Effect

When normal, the display is dark:

Highlighted when pressed:

During the test, we will find that the non-triangular area will also change color, because we have not made a judgment on the position of the click, which will be explained later.

First come here. continue later. :)