### Two implementations of sideslip menu
- Use DrawerLayout, flexibility is relatively high.
- 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.