“This is the 11th day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

One, a brief introduction

The sliding event is composed of multiple steps. It is not a simple event, and it needs multiple actions to complete it together. Sliding can be divided into sliding up, sliding down, sliding left and sliding right according to different directions. Nowadays, with the rapid development of mobile Internet and short video industries, everyone is very familiar with sliding events, especially douyin, Kuaishou and other fast-food entertainment videos, which can not stop sliding.

In daily life, we often use coordinate system to determine the position, and the same is true in mobile phones. The coordinate system of mobile phones is a three-dimensional space, divided into X, Y and Z axes, with the upper left corner of the screen as the origin of the coordinate axis. The horizontal direction is x axis, the vertical direction is Y axis, and the direction perpendicular to the screen is Z axis. We don’t use the Z-axis very much.

In the process of mobile phone sliding, we record the coordinate of the finger when pressing and releasing the coordinate of the finger, calculate the difference of the coordinate can be judged to belong to the left slide, right slide, up slide, slide and other operations. Because of our sliding process, can’t completely in x or y coordinates are the same, that is fairly thick fingers sliding fast, either to the left, right, up and down sliding will have certain error, and the error range we can be seen as a sliding direction, therefore sliding is within the allowed range.

Note that all the following invariants are invariants within the range. If the allowed interval is 5 and the starting position is 0, then the end position sliding within the range of +5 and -5 can be regarded as invariants.

Slide left: y stays the same, x becomes smaller

Right slide: y unchanged, x larger

Slide down: x-coordinate stays the same, y-coordinate becomes smaller

Slide up: x-coordinate stays the same, y-coordinate increases

Two, code implementation

2.1 Coordinate Acquisition

MainAbilitySlice implementation Component. TouchEventListener interface, rewrite onTouchEvent method, in onTouchEvent approach, we can through the method of parameter TouchEvent objects coordinate related information

// The parameter of getPointerPosition() refers to the index of the finger. // There may be multiple fingers sliding at the same time, such as three fingers sliding down at the same time on the Phone. So the incoming 0 MmiPoint pointerPosition = touchEvent. GetPointerPosition (0); Float x = pointerposition.getx (); float x = pointerposition.getx (); Float y = pointerposition.gety (); float y = pointerposition.gety ();Copy the code

The complete code is shown below. This code does not take into account interval ranges, but is used to demonstrate coordinate fetching

package com.liziba.demo.slice; import com.liziba.demo.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.Component; import ohos.agp.components.DirectionalLayout; import ohos.agp.components.Text; import ohos.multimodalinput.event.MmiPoint; import ohos.multimodalinput.event.TouchEvent; Public class MainAbilitySlice extends AbilitySlice implements Component. TouchEventListener {/ * * * / Text Text components Text; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); DirectionalLayout Layout = (DirectionalLayout) this.findComponentById(resourcetable.id_DL); Text = (text) this.findComponentById(resourcetable.id_text_helloWorld); / / 3, add slip to the whole layout DirectionalLayout events layout. SetTouchEventListener (this); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } /** * @param Component component that is triggered by a slide event * * public static final int CANCEL = 6; * public static final int HOVER_POINTER_ENTER = 7; * public static final int HOVER_POINTER_EXIT = 9; * public static final int HOVER_POINTER_MOVE = 8; * public static final int NONE = 0; * public static final int OTHER_POINT_DOWN = 4; * public static final int OTHER_POINT_UP = 5; * public static final int POINT_MOVE = 3; * public static final int PRIMARY_POINT_DOWN = 1; * public static final int PRIMARY_POINT_UP = 2; * * @return */ @Override public boolean onTouchEvent(Component component, // Component is DirectionalLayout MmiPoint pointerPosition; float x; float y; int id = component.getId(); If (id == resourcetable.id_dl) {// Action type int Action = TouchEvent.getAction (); If (touchEvent.primary_point_down == action) {if (touchEvent.primary_point_down == action) {if (touchEvent.primary_point_down == action) { Three fingers slide down at the same time such as millet mobile phone screen / / there's only one finger sliding at present, so the incoming 0 pointerPosition = touchEvent. GetPointerPosition (0); x = pointerPosition.getX(); y = pointerPosition.getY(); Text. SetText (" press: "+ x + "--" + y); } else if (touchEvent.point_move == action) { We only determine the position of the press location and loosening compare pointerPosition = touchEvent. GetPointerPosition (0); x = pointerPosition.getX(); y = pointerPosition.getY(); Text. SetText (" slide: "+ x + "--" + y); } else if (TouchEvent PRIMARY_POINT_UP = = action) {/ / loosen operation pointerPosition = TouchEvent getPointerPosition (0); x = pointerPosition.getX(); y = pointerPosition.getY(); Text. SetText (" release: "+ x + "--" + y); }} // Return true; }}Copy the code

We test the effect by pressing, sliding, and releasing

\

2.2 Determine the sliding direction

To determine the change in x and y in the touchEvent. PRIMARY_POINT_UP == action operation, we need to define four variables to record the initial x and y values and the final x and Y values respectively.

float startX;

float startY;

float endX;

float endY;

Note that you can’t put it in a method; you need to extract the member variables of the class.

package com.liziba.demo.slice; import com.liziba.demo.ResourceTable; import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.Component; import ohos.agp.components.DirectionalLayout; import ohos.agp.components.Text; import ohos.multimodalinput.event.MmiPoint; import ohos.multimodalinput.event.TouchEvent; Public class MainAbilitySlice extends AbilitySlice implements Component. TouchEventListener {/ * * * / Text Text components Text; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); DirectionalLayout Layout = (DirectionalLayout) this.findComponentById(resourcetable.id_DL); Text = (text) this.findComponentById(resourcetable.id_text_helloWorld); / / 3, add slip to the whole layout DirectionalLayout events layout. SetTouchEventListener (this); } @Override public void onActive() { super.onActive(); } @Override public void onForeground(Intent intent) { super.onForeground(intent); } float startX; float startY; float endX; float endY; /** * @param Component /* @param Component /* @param touchEvent * * @return */ @override public Boolean onTouchEvent(Component Component, // Component is DirectionalLayout MmiPoint pointerPosition; int id = component.getId(); If (id == resourcetable.id_dl) {// Action type int Action = TouchEvent.getAction (); If (touchEvent.primary_point_down == action) {if (touchEvent.primary_point_down == action) {if (touchEvent.primary_point_down == action) { Three fingers slide down at the same time such as millet mobile phone screen / / there's only one finger sliding at present, so the incoming 0 pointerPosition = touchEvent. GetPointerPosition (0); startX = pointerPosition.getX(); startY = pointerPosition.getY(); } else if (touchEvent.point_move == action) { We only identify the position of the press when and loosen the position of the comparison. / / pointerPosition = touchEvent getPointerPosition (0); // x = pointerPosition.getX(); // y = pointerPosition.getY(); // text.settext (" slide: "+ x + "--" + y); } else if (TouchEvent PRIMARY_POINT_UP = = action) {/ / loosen operation pointerPosition = TouchEvent getPointerPosition (0); endX = pointerPosition.getX(); endY = pointerPosition.getY(); If (endY == startY &&endx > startX) {text.settext (" right "); } else if (endY == startY &&endx < startX) {text.settext (" left "); } else if (endX == startX &&endy < startY) {text.settext (" drop "); } else if (endX == startX &&endy > startY) {text.settext (" on "); }} return true; }}Copy the code

But the code above found that it was almost impossible to test the effect of sliding during our testing. Why? Is it a code mistake, it’s not, it’s what I said at the beginning, it’s hard to keep x constant or y constant, so let’s do a little bit of tweaking. We change the absolute value of the difference from == to <=50

If (math.abs (endy-starty) <= 50 &&endx > startX) {text.settext (" right "); } else if (math.abs (endy-starty) <= 50 &&endx < startX) {text.settext (" left slider "); } else if (math.abs (endx-startx) <= 50 &&endy < startY) {text.settext (" on "); } else if (math.abs (endx-startx) <= 50 &&endy > startY) {text.settext (" drop "); }Copy the code

Test again!

2.3 summarize

  1. The sliding action can be broken down, slide, lift (release)
  2. Sliding methods are mainly divided into up sliding, sliding, left sliding, right sliding
  1. The slide direction can be distinguished by calculating the coordinate difference by recording the x and Y coordinates when pressed and the X and Y coordinates when released
  2. Note that the direction of slide should specify a suitable interval
  1. The return value of the onTouchEvent method must be set to true, otherwise only the first action will fire the current method.