DrawerLayout is a control to achieve the effect of the slide menu.

DawerLayout is divided into side menu and main content area:

  • The main content area should be placed in front of the side menu, and the main content area should have the best DrawerLayout as the root layout of the interface, otherwise it may appear that touch events are shielded.

  • The layout of the slide menu section must have the layout_gravity property set to indicate whether the slide menu is on the left or right, and views with layout_gravity=”start/left” are considered to be slide menus.

Precautions for use

  • The main content view must be the first subview of DrawerLayout
  • The main content view width and height need to be match_parent
  • Android :layout_gravity = “start”, slide from left to right from menu android:layout_gravity = “end”, Slide out menu from right to left, left and right are not recommended!!
  • The width of the sideslip view is in dp, not more than 320DP is recommended (in order to always see some main content view)

Set the sideslip events: mDrawerLayout. SetDrawerListener (DrawerLayout DrawerListene

DrawerLayout example:

To use DrawerLayout, you can set DrawerLayout as the root view in the Layout XML file.

Drawer view that slides out from the left (side slider)

A simple example of sliding out of a sideslip bar from the left.

When the slider slides out, the view behind it will have a shadow.

Layout file

<? The XML version = "1.0" encoding = "utf-8"? > <androidx.drawerlayout.widget.DrawerLayout 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="vertical" tools:openDrawer="start"> <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" Android :layout_centerInParent="true" Android :text=" I'm home "/> </RelativeLayout> <RelativeLayout android:layout_width="250dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="#ffffff"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" Android :layout_centerInParent="true" Android :text=" RelativeLayout "/> </RelativeLayout> </androidx.drawerlayout.widget.DrawerLayout>Copy the code

Effect:

OpenDrawer =”start”; Android :layout_gravity=”start”

If you change tools:openDrawer=”end”, the slider layout should be set android:layout_gravity=”end”. The sideslip can slide out from the right.

The sidebar now has a RelativeLayout. You can also put a RecyclerView.

Drawer out when push the page

Listen for the slider slide event using ActionBarDrawerToggle. When the slider slides out, calculate the slide distance in the onDrawerSlide method. The main view then sets the horizontal relative offset distance setTranslationX.

You can perform configuration operations in the activity’s onCreate method

DrawerLayout root = findViewById(R.id.root); final View contentView = findViewById(R.id.content_field); ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this, root, android.R.string.yes, android.R.string.cancel) { @Override public void onDrawerSlide(View drawerView, float slideOffset) { super.onDrawerSlide(drawerView, slideOffset); float slideX = drawerView.getWidth() * slideOffset; contentView.setTranslationX(slideX); }}; root.addDrawerListener(actionBarDrawerToggle);Copy the code

Change the shadow when sliding out

Use the setScrimColor method of DrawerLayout to change the shadow color. The default shadow color is DEFAULT_SCRIM_COLOR = 0x99000000.

DrawerLayout root = findViewById(R.id.root);
root.setScrimColor(Color.TRANSPARENT);
Copy the code

Locking DrawerLayout
root.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED); / / unlock root. SetDrawerLockMode (DrawerLayout. LOCK_MODE_LOCKED_CLOSED); // Do not detect left-to-right slidingCopy the code

Android Zero Basics tutorial video reference