Android -- SlidingMenu

Source: Internet
Author: User

Android -- SlidingMenu
The implementation principle requires two parts in the layout of an Activity. One is the layout of menus and the other is the layout of content. The two la s are arranged horizontally. The menu is left and the content is right. During initialization, the menu layout is shifted to the left to be completely hidden, so that the content layout is fully displayed in the Activity. Then, the left offset distance of the menu layout is changed by listening to the finger sliding event to control the display and hiding of the menu layout. Layout replication Code <LinearLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "match_parent" android: layout_height = "match_parent" android: orientation = "horizontal" tools: context = ". myActivity "> <LinearLayout android: id =" @ + id/menu "android: layout_width =" fill_parent "android: layout_height =" fill_parent "android: background =" # ff00ff00" Android: orientation = "vertical"> </LinearLayout> <LinearLayout android: id = "@ + id/content" android: layout_width = "fill_parent" android: layout_height = "fill_parent" android: background = "# ffff0000" android: orientation = "vertical"> </LinearLayout> copy the code. The outermost layout of the layout file is a LinearLayout, Which is horizontally arranged. Under this LinearLayout, two sublinearlayout elements are nested, namely, the menu layout and the content layout. In order to make the layout as simple as possible, no controls are added to the menu layout and content layout. Code copy Code public class MyActivity extends Activity implements View. onTouchListener {/*** the finger slides 200 pixels per unit of time */private static final int SPEED = 200;/*** screen width */private int mScreenWidth; /* ** menu layout */private LinearLayout mMenuLayout;/* ** content layout */private LinearLayout mContentLayout;/*** menu Paramters */private LinearLayout. layoutParams mMenuParams;/*** when the menu is fully displayed Ontent width value */private int mMenuPadding = 80;/*** menu slides to the left edge at most. The value is determined by the menu layout width. After marginLeft reaches this value, you cannot reduce */private int mLeftEdge;/*** object of test speed */private VelocityTracker mVelocityTracker;/*** X coordinate pressed by finger */private float mXDown; /* X coordinate */private float mXMove when the finger moves;/* X coordinate raised by the finger */private float mXUp; /*** whether the menu is displayed again */private boolean mIsMenuVisible = false; @ Override protected void onCreate (Bun Dle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_my); initViewsAndValues (); mContentLayout. setOnTouchListener (this);}/*** initialize menu and content and set their location */private void initViewsAndValues () {// get windowManager WindowManager window = (WindowManager) getSystemService (Context. WINDOW_SERVICE); // obtain the screen width mScreenWidth = window. getdefadisplay display (). getWidth (); // find To control mMenuLayout = (LinearLayout) findViewById (R. id. menu); mContentLayout = (LinearLayout) findViewById (R. id. content); // obtain the paramter mMenuParams = (LinearLayout. layoutParams) mMenuLayout. getLayoutParams (); // set the menu width to the screen width minus mMenuPading mMenuParams. width = mScreenWidth-mMenuPadding; // copy the value of the left edge to a negative value of the menu width, so that the menu can be hidden mLeftEdge =-mMenuParams. width; // set margin to mLeftEdge mMenuParams. leftMargin = MLeftEdge; // display the content before mContentLayout. getLayoutParams (). width = mScreenWidth;} @ Override public boolean onTouch (View view, MotionEvent event) {createVelocityTracker (event); switch (event. getAction () {case MotionEvent. ACTION_DOWN: // record X coordinate mXDown = event. getRawX (); break; case MotionEvent. ACTION_MOVE: mXMove = event. getRawX (); int distanceX = (int) (mXMove-mXDown); if (mIsMenuVisible) {MMenuParams. leftMargin = distanceX;} else {mMenuParams. leftMargin = mLeftEdge + distanceX;} if (mMenuParams. leftMargin <mLeftEdge) {// because leftEdge is a negative number, the menu has been hidden, and mMenuParams cannot be hidden from the left. leftMargin = mLeftEdge;} else if (mMenuParams. leftMargin> 0) {// The menu is completely displayed and cannot be moved to the right. leftMargin = 0;} mMenuLayout. setLayoutParams (mMenuParams); break; case MotionEvent. ACTION_UP: mXUp = event. getR AwX (); if (wantToShowMenu () {if (shouldScrollToMenu () {scrollToMenu ();} else {// The condition is not met, hide the menu to continue scrollToContent () ;}} else if (wantToShowContent () {if (shouldScrollToContent () {scrollToContent () ;}else {scrollToMenu ();}} break;} recycleVelocityTracker (); return true;}/*** create a VelocityTracker object. For sliding events on the content interface, ** @ param event */private void createVelocityTracker (MotionEvent e Vent) {if (null = mVelocityTracker) {mVelocityTracker = VelocityTracker. obtain ();} mVelocityTracker. addMovement (event);}/*** determine whether the gesture is intended to display Content & menu in display status ** @ return */private boolean wantToShowContent () {return mXUp-mXDown <0 & mIsMenuVisible;}/*** is it necessary to display the menu & menu in the hidden state ** @ return */private boolean wantToShowMenu () {return mXUp-mXDown> 0 &&! MIsMenuVisible;}/*** whether menu ** @ return */private boolean shouldScrollToMenu () {return mXUp-mXDown> mScreenWidth/2 | getScrollVelocity ()> SPEED;}/*** whether to display all content ** @ return */private boolean shouldScrollToContent () {return mXDown-mXUp <mScreenWidth/2 | getScrollVelocity ()> SPEED;}/*** display menu */private void scrollToMenu () {new scrollasynctask(cmd.exe cute (30 ); }/*** Hide menu */private void scrollToContent () {new scrollasynctask(.exe cute (-30);}/*** to get the finger sliding speed, how many pixels are moved per second ** @ return */private int getScrollVelocity () {mVelocityTracker. computeCurrentVelocity (1000); int velocity = (int) mVelocityTracker. getXVelocity (); return Math. abs (velocity);}/*** reclaim the VelocityTracker object. */Private void recycleVelocityTracker () {mVelocityTracker. recycle (); mVelocityTracker = null;} class ScrollAsyncTask extends AsyncTask <Integer, Integer, Integer> {@ Override protected Integer doInBackground (Integer [] speed) {// obtain the current margin int leftMargin = mMenuParams. leftMargin; // constantly change the value of margin while (true) {leftMargin = leftMargin + speed [0]; if (leftMargin> 0) {leftMargin = 0; break;} if (LeftMargin <mLeftEdge) {leftMargin = mLeftEdge; break;} publishProgress (leftMargin); sleep ();} if (speed [0]> 0) {mIsMenuVisible = true ;} else {mIsMenuVisible = false;} return leftMargin;} @ Override protected void onPostExecute (Integer integer) {mMenuParams. leftMargin = integer; mMenuLayout. setLayoutParams (mMenuParams);} @ Override protected void onProgressUpdate (Integer... values) {mMe NuParams. leftMargin = values [0]; mMenuLayout. setLayoutParams (mMenuParams);}/*** sleep Thread sleep */private void sleep () {try {Thread. sleep (20);} catch (InterruptedException e) {e. printStackTrace () ;}} the copied code first calls the initViewsAndValues method during initialization, where the content layout width is set to the screen width, the width of the menu layout is set to the screen width minus the menuPadding value. This ensures that some content la s are displayed during the menu layout display. If you do not re-define the two layout widths during initialization, the layout will be declared as the same as in the layout file. Both layout are fill_parent, so that the sliding menu cannot be achieved. Then, set the left offset of the menu layout to the width of the negative menu layout, so that the menu layout will be completely hidden, and only the content layout will be displayed on the interface. Then register the listening event for the content layout, so that the onTouch event will be triggered when the finger slides over the content layout. In the onTouch event, the left offset of the menu layout is changed based on the sliding distance of the finger to control the display and hiding of the menu layout. When the finger leaves the screen, it will determine whether to slide to the menu layout or content layout. The judgment is based on the sliding distance or speed of the finger. For details, see the comments in the code.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.