Directory:

1, the preface

2, the background,

3. Effect display

4. Sample analysis

5. Library parsing

6, “Hongmeng Open Source third-party components” collection of articles

preface

SlidingMenu component based on Android platform (github.com/jfeinstein1…

The code has been open sourced to (gitee.com/isrc\_ohos/…

Welcome to download and use and put forward valuable advice!

background

SlidingMenu_ohos provides a navigation framework that slides menus so that they can be hidden on the left, right, or left side of the phone’s screen. When users use it, they can swipe left or right to call it up, which not only saves the space on the main screen, but also makes it convenient for users to operate. It is widely used in many mainstream apps.

Results show

Since menus displayed from the left and right are similar, this section uses menus displayed from the left as an example.

The application displays the home page when the component is not enabled. Touch the left side of the screen with one finger and slide to the right gradually. The menu page is gradually displayed and the home page is gradually hidden. When you swipe to the right beyond a certain threshold, the menu page is fully displayed, as shown in Figure 1.

Figure 1 Menu shows and hides the renderings

The Sample analysis

The content of Sample is relatively simple, mainly consisting of two parts. The first is to create the object of the SlidingMenu_ohos component, which can be set by calling the Library interface according to the actual needs of the user. The second is to add the set components to Ability. The following details how to use components.

Import the SlidingMenu class

import com.jeremyfeinstein.slidingmenu.lib.SlidingMenu;
Copy the code

2, set the layout of Ability

This layout is used as a layout for the main page and is displayed when the component is hidden.

DirectionalLayout directionalLayout = (DirectionalLayout)LayoutScatter.getInstance(this).parse(ResourceTable.Layout_activity_main,null,false); setUIContent(directionalLayout);Copy the code

3. Instantiate the component’s object

SlidingMenu slidingMenu = null; Try {// Initialize SlidingMenu instance SlidingMenu = new SlidingMenu(this); } catch (IOException e) { e.printStackTrace(); } catch (NotExistException e) { e.printStackTrace(); }Copy the code

4. Set component properties

This step allows you to set the location, trigger range, layout, and maximum width of the component as required.

// slidingmenu.setmode (slidingmenu.left); / / set the component to trigger the range slidingMenu. SetTouchScale (100); // Set the layout of the component slidingmenu. setMenu(resourcetable. Layout_layout_left_menu); // Set the maximum menu width slidingmenu.setmenuWidth (800);Copy the code

5, Ability

The attachToAbility() method is an important one provided by the Library to associate menu components with Ability. Its parameters SLIDING_WINDOW and SLIDING_CONTENT are different menu modes. The menu in SLIDING_WINDOW mode contains the Title/ActionBar part, and the menu should be displayed on the whole mobile page, as shown in Figure 2. The menu in SLIDING_CONTENT mode does not include the section containing Title/ActionBar, and the menu can be displayed locally on the mobile page, as shown in Figure 3.

Try {/ / association Ability, access to the page display the root node slidingMenu. AttachToAbility (directionalLayout, this, slidingMenu. SLIDING_WINDOW); } catch (NotExistException e) { e.printStackTrace(); } catch (WrongTypeException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); }Copy the code

Figure 2 SLIDING_WINDOW shows the rendering

Figure 3 SLIDING_CONTENT shows the rendering

The Library parsing

CustomViewAbove represents the main page, CustomViewBehind represents the menu page, SlidingMenu is mainly used to control the main page above the menu page, and can also set the width of the menu, trigger range, display mode and other attributes. For the sake of explanation, the following are illustrated by touching the screen from the left and sliding it to the right. All menus use the display mode of SLIDING_WINDOW.

FIG. 4 Engineering structure of Library

1. CustomViewAbove Main page

CustomViewAbove needs to listen for Touch events, such as Touch, move, lift, and cancel, and record the distance and speed of the finger swipe.

(1) Processing of Touch events

The Touch event determines how the menu is displayed, moved, and hidden. For example, in the trigger range of the menu, when you swipe right (POINT_MOVE), the menu will follow the slide to the position of the finger. When a finger lifts (PRIMARY_POINT_UP) or cancels (CANCEL), the next state of the menu page is hidden or shown entirely depending on how far and how fast the finger slides.

Switch (action) {// Press case TouchEvent.PRIMARY_POINT_DOWN:..... mInitialMotionX=mLastMotionX=ev.getPointerPosition(mActivePointerId).getX(); break; // Swipe Case TouchEvent.POINT_MOVE:...... // The menu slides to the position of the finger (x) left_scrollto(x); break; // Lift case TouchEvent.PRIMARY_POINT_UP:...... / / get the next state of the menu (full screen or all hidden) int nextPage = determineTargetPage (pageOffset initialVelocity, totalDelta); // Set the next state of the menu setCurrentItemInternal(nextPage,initialVelocity); . endDrag(); break; // CANCEL case TouchEvent.CANCEL:...... SetCurrentItemInternal (mCurItem); setCurrentItemInternal(mCurItem); // endDrag endDrag(); break; }Copy the code

(2) Processing of sliding distance and speed

When the finger is lifted, the sliding speed and distance are greater than the minimum sliding speed and minimum moving distance respectively. It is judged that the operation at this time is fast dragging, and the menu immediately pops up and all displays, as shown in FIG. 5.

Private int determineTargetPage(float pageOffset, int velocity, int deltaX) {private int determineTargetPage(float pageOffset, int velocity, int deltaX) { Int targetPage = getCurrentItem(); If (math.abs (deltaX) > mFlingDistance && math.abs (velocity) > mMinimumVelocity) {if (velocity > 0 && deltaX  > 0) { targetPage -= 1; } else if (velocity < 0 && deltaX < 0){ targetPage += 1; }}}Copy the code

Figure 5 Quick drag effect diagram

If the finger is lifted and does not meet the fast drag standard, you need to determine whether to hide or display the menu according to the sliding distance. If the expanded part of the menu is more than 1/2 of its width, the menu will immediately pop up to display all, and the effect picture is shown in Figure 1. If it is less than 1/2 of its width, it immediately springs back and hides all of it, as shown in Figure 6.

Switch (mCurItem){case 0: targetPage=1- math.round (pageOffset); break; Case 1: // If (current_State == slidingmenu. LEFT){targetPage = math. round(1-pageoffset); } if(current_state == SlidingMenu.RIGHT){ targetPage = Math.round(1+pageOffset); } break; case 2: targetPage = Math.round(1+pageOffset); break; }Copy the code

FIG. 6 Drag the rendering slowly

(3) the implementation of menu display and hiding

The left edge of the main page is bound to the position of the finger. When the finger slides to the right, the main page will also slide to the right. In this process, the menu page is gradually displayed, and the visual effect of the menu page is slowly expanded by sliding with the finger.

Void setCurrentItemInternal(int item,int velocity) {item = mViewBehind. GetMenuPage (item); mCurItem = item; final int destX = getDestScrollX(mCurItem); DestX =0, the left edge of the home page is aligned with the left edge of the screen, and the menu is completely covered, so that the menu can be hidden. */ if (mviewBack.getMode () == slidingmenu.left) {McOntent.setleft (destX); mViewBehind.scrollBehindTo(destX); }... Public void left_scrollto(float x) {if(x>getMenuWidth()){public void left_scrollto(float x) { x=getMenuWidth(); } // The main page (left edge of the main page) and the menu (right edge of the menu) are moved to the specified position. mViewBehind.scrollBehindTo((int)x); }Copy the code

2. CustomViewBehind menu page

CustomViewBehind is the menu page, the logic is much simpler than the main page. It is mainly responsible for changing its state value according to the Touch event in the main page, and exposing the interface to the outside, which is used to set or obtain the maximum width of the menu page, its state and other attributes.

Public void setMenuWidth(int menuWidth) {this.menuWidth = menuWidth; } public int getMenuWidth() {return menuWidth; }Copy the code

3. SlidingMenu

Instantiate the CustomViewAbove and CustomViewBehind objects, respectively, and add them to the SlidingMenu container in the order that the home page is below the upper menu page.

// Add the menu control addComponent(mViewBehind, behindParams); AddComponent (mViewAbove, aboveParams);Copy the code

Project contributor

Xu Zexin, Zheng Senwen, Zhu Wei, Chen Mei, Wang Jia Si, Zhang Xinxin

Author: Zhu Wei ISRC

For more information, visit Harmonyos.51cto.com, a collaboration between 51CTO and Huawei