### Two implementations of sideslip menu

  1. Use DrawerLayout, flexibility is relatively high.
  2. Use DrawerLayout+NavigationView, which is Google’s standard for Material Design.

### Use DrawerLayout for sidesetting

First, we need a layout:

<? The XML version = "1.0" encoding = "utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="wrap_content" Android: background = "# D197F2 app:" title = "I am title" app: titleTextColor = "# FFF" / > <. Android support. The v4. Widget. DrawerLayout android:id="@+id/drawer" android:layout_width="match_parent" android:layout_height="match_parent"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView Android :layout_width="match_parent" Android: Layout_height ="wrap_content" Android :text=" content" /> </LinearLayout> <LinearLayout android:layout_width="200dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="@android:color/holo_blue_light" android:orientation="vertical"> <TextView Android :layout_width="match_parent" Android :layout_height="wrap_content" Android :text=" scroll menu 1"/> <TextView Android :layout_width="match_parent" Android :layout_height="wrap_content" Android :text=" slider menu 2"/> <TextView Android :layout_width="match_parent" Android: Layout_height ="wrap_content" Android :text=" slider menu 3"/> </LinearLayout> </android.support.v4.widget.DrawerLayout> </LinearLayout>Copy the code

The layout slideshow contains the menu section and the content section, wrapped in DrawerLayout. Add android:layout_gravity=”start” to the root layout of the menu, or change it to end if you swipe right.

This completes a basic sideslip effect.

DrawerLayout constructor (ViewDragHelper) DrawerLayout constructor (ViewDragHelper)

public DrawerLayout(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);

    mLeftCallback = new ViewDragCallback(Gravity.LEFT);
    mRightCallback = new ViewDragCallback(Gravity.RIGHT);

    mLeftDragger = ViewDragHelper.create(this, TOUCH_SLOP_SENSITIVITY, mLeftCallback);
    mLeftDragger.setEdgeTrackingEnabled(ViewDragHelper.EDGE_LEFT);
    mLeftDragger.setMinVelocity(minVel);
    mLeftCallback.setDragger(mLeftDragger);
}
Copy the code

#### use DrawerLayout listening to achieve some effects

For example, we can implement sideslip when the button in the upper left corner of the Toolbar changes in real time, and we can add a listener to ActionBarDrawerToggle:

toolbar = (Toolbar) findViewById(R.id.toolbar);
drawer = (DrawerLayout) findViewById(R.id.drawer);

ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, toolbar, R.string.drawer_open, R.string.drawer_close);
toggle.syncState();

drawer.addDrawerListener(toggle);
Copy the code

Let’s analyze the implementation principle:

Among them, the realized ActionBarDrawerToggle DrawerLayout. DrawerListener. And constantly refresh the Drawerable in the upper left corner as you swipe:

@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
    setPosition(Math.min(1f, Math.max(0, slideOffset)));
}
Copy the code

SetPosition is implemented as follows:

private void setPosition(float position) {
    if (position == 1f) {
        mSlider.setVerticalMirror(true);
    } else if (position == 0f) {
        mSlider.setVerticalMirror(false);
    }
    mSlider.setProgress(position);
}
Copy the code

This is done by constantly changing the Progress of the mSlider (a custom Drawerable object) as you slide, refreshing the state.

Therefore, we can do some custom effects, such as zooming and panning when sideslip:

drawer.addDrawerListener(new DrawerLayout.DrawerListener() { @Override public void onDrawerStateChanged(int newState) { } @override public void onDrawerSlide(View drawerView, float slideOffset) { 0~1 View content = drawer.getChildAt(0); float scale = 1 - slideOffset; //1~0 float leftScale = (float) (1-0.3 * scale); Float rightScale = (float) (0.7f + 0.3 * scale); / / 0.7 ~ 1 drawerView setScaleX (leftScale); / / 1 ~ 0.7 drawerView. SetScaleY (leftScale); / / 1 ~ 0.7 content. setScaleX (rightScale); content.setScaleY(rightScale); content.setTranslationX(drawerView.getMeasuredWidth() * (1 - scale)); } @override public void onDrawerOpened(View drawerView) {// open} @override public void onDrawerOpened(View) DrawerView) {// Close}});Copy the code

## Use DrawerLayout+NavigationView for sideslipping

In the same way, we need a layout. Similarly, we use DrawerLayout to wrap the content and the menu. The menu is a NavigationView, which specifies the header and menu parts and provides some properties. NavigationView (NavigationView) NavigationView (NavigationView)

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer" android:layout_width="match_parent" android:layout_height="match_parent"> <! <FrameLayout android:id="@+id/fl" android:layout_width="fill_parent" Android :layout_height="fill_parent" /> <! Part - menu - > < android. Support. The design. The widget. The NavigationView android: id = "@ + id/nav_view" android: layout_width = "wrap_content"  android:layout_height="match_parent" android:layout_gravity="start" app:headerLayout="@layout/navigation_headerlayout" app:menu="@menu/navigation_menu" /> </android.support.v4.widget.DrawerLayout>Copy the code

Here we specify the header as follows:

<? The XML version = "1.0" encoding = "utf-8"? > <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center_horizontal" android:orientation="vertical"> <ImageView android:id="@+id/iv_icon" android:layout_width="70dp" android:layout_height="70dp" android:layout_marginTop="20dp" android:src="@drawable/icon_people"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" Android :layout_marginTop="10dp" Android :text=" ruby "Android :textSize="20sp"/> </LinearLayout>Copy the code

The menu part is as follows (created under menu folder), where the menu can be nested:

<? The XML version = "1.0" encoding = "utf-8"? > <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/action_gallery" Android :icon="@android:drawable/ic_menu_gallery" Android :orderInCategory="100" Android :title=" album "/> <item android:id="@+id/action_details" android:icon="@android:drawable/ic_menu_info_details" android:orderInCategory="100" Android :id=" @android:drawable/ic_menu_help" /> <item android:id=" @android:drawable/ic_menu_help" Android :orderInCategory="100" Android :title=" about "/> <item Android :id="@+id/action_music" Android :icon="@android:drawable/ic_menu_more" Android :orderInCategory="100" Android :title=" music "> <menu> <item Android :id="@+id/action_play" Android :icon="@android:drawable/ic_media_play" Android :title=" play" /> <item Android :id="@+id/action_pause" Android :icon="@android:drawable/ic_media_pause" Android :title=" pause" /> </menu> </item> </menu>Copy the code

Now that we have sideslip, finally we add the corresponding click event and close the menu:

nav_view = (NavigationView) findViewById(R.id.nav_view); drawer = (DrawerLayout) findViewById(R.id.drawer); nav_view.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { Toast.makeText(NavigationViewActivity.this, item.getTitle(), Toast.LENGTH_SHORT).show(); drawer.closeDrawer(nav_view); return false; }}); nav_view.getHeaderView(0).findViewById(R.id.iv_icon).setOnClickListener(new View.OnClickListener() { @Override public Void onClick (View v) {Toast. MakeText (NavigationViewActivity. This, "click on the icon of the head", Toast. LENGTH_SHORT), show (); drawer.closeDrawer(nav_view); }});Copy the code

If you feel that my words are helpful to you, welcome to pay attention to my public number:

My group welcomes everyone to come in and discuss all kinds of technical and non-technical topics. If you are interested, please add my wechat huannan88 and I will take you into our group.