1. First guide the package
- compile 'com.android.support:design:26.1.0'
First, use DrawerLayout as an outer package in the main layout file, which contains a main page and a side-sliding menu page, and the side-sliding menu page is implemented with NavigationView. The drawerLayout contains the main page and the side-sliding menu page :
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_na"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.app.ui.MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/blue"
android:gravity="center_vertical"
android:orientation="horizontal">
<ImageView
android:id="@+id/main_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/mm"
android:background="@color/blue"
android:layout_margin="20dp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Demo"
android:textColor="#ffffff"
android:textSize="20sp"
android:layout_marginLeft="16dp"/>
<ImageView
android:id="@+id/search"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/three"
android:background="@color/blue"
android:layout_margin="20dp"/>
</LinearLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:text="Home"
android:textSize="22sp"
android:gravity="center"/>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/nav"
android:layout_gravity="left"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
xmlns:app="http://schemas.android.com/apk/res-auto"
app:headerLayout="@layout/head"
app:menu="@menu/new_menu"
>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
head.xml
<?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:orientation="vertical"
android:gravity="center"
android:background="@color/blue"
>
<ImageView
android:id="@+id/person"
android:layout_width="72dp"
android:layout_height="72dp"
android:layout_marginTop="42dp"
android:src="@drawable/touxiang"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="20sp"
android:layout_marginTop="24dp"
android:textColor="#ffffff"
android:text="超宇"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="16sp"
android:layout_marginTop="12dp"
android:textColor="#ffffff"
android:layout_marginBottom="18dp"
android:text="Don't forget your original intention, you will always be."/>
</LinearLayout>
<?xml version="1.0" encoding="UTF-8" ?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group
android:checkableBehavior="single">
<item
android:id="@+id/favorite"
android:icon="@drawable/huiyuan"
android:checkable="true"
android:title="Member"/>
</group>
<item
android:id="@+id/wallet"
android:icon="@drawable/money"
android:title="Wallet"/>
<item
android:id="@+id/photo"
android:icon="@drawable/xiangce"
android:title="Album"/>
<item
android:id="@+id/dress"
android:icon="@drawable/zhuangban"
android:title=" Dress up"/>
<item
android:id="@+id/file"
android:icon="@drawable/wenjian"
android:title="File"/>
</menu>
import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.design.widget.NavigationView;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.view.MenuItem;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private DrawerLayout drawerLayout;
private NavigationView navigationView;
ImageView menu;
LinearLayout contentView ;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate (savedInstanceState);
setContentView(R.layout.activity_main);
drawerLayout = (DrawerLayout) findViewById(R.id.activity_na);
navigationView = (NavigationView) findViewById(R.id.nav);
menu= (ImageView) findViewById(R.id.main_menu);
View headerView = navigationView.getHeaderView(0);//Get the header layout
menu.setOnClickListener(this);
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
//item.setChecked(true);
Toast.makeText(MainActivity.this,item.getTitle().toString(),Toast.LENGTH_SHORT).show();
drawerLayout.closeDrawer(navigationView);
return true;
}
});
//Add a listener for the DrawerLayout control
drawerLayout.addDrawerListener(new DrawerLayout.SimpleDrawerListener() {
//The method triggered when the side sliding menu is sliding
/**
The first parameter: the sliding menu that is being slid
The second parameter: the percentage of the width of the menu slide
**/
@Override
public void onDrawerSlide(View drawerView, float slideOffset) {
super.onDrawerSlide(drawerView, slideOffset);
//Get the width of the side slide menu
int drawerViewWidth = drawerView.getMeasuredWidth();
// Calculate the distance that the content part should move to the right according to the sliding percentage
int marginLeft = (int)(drawerViewWidth * slideOffset) ;
//Get the View object of the content part (the content View object is the first, so it is 0)
contentView = (LinearLayout) drawerLayout.getChildAt(0);
//Modify the left margin of the content section
contentView.setLeft(marginLeft);
//To solve the problem that DrawerLayout cannot slide in full screen, pass displayWidthPercentage 1 to achieve full screen slide.
// If you want to make the right menu also full screen, just change the corresponding "mLeftDragger" to "mRightDragger"
setDrawerLeftEdgeSize(MainActivity.this,drawerLayout,1);
}
});
}
@Override
public void onClick(View v) {
switch (v.getId()){
case R.id.main_menu://Click on the menu to jump out of the sliding menu
if (drawerLayout.isDrawerOpen(navigationView)){
drawerLayout.closeDrawer(navigationView);
}else{
drawerLayout.openDrawer(navigationView);
}
break;
}
}
@Override
public void onPointerCaptureChanged(boolean hasCapture) {
}
private void setDrawerLeftEdgeSize (Activity activity, DrawerLayout drawerLayout, float displayWidthPercentage) {
if (activity == null || drawerLayout == null) return;
try {
// Find ViewDragHelper and set Accessible to true
Field leftDraggerField =
drawerLayout.getClass().getDeclaredField("mLeftDragger");//Right
leftDraggerField.setAccessible(true);
ViewDragHelper leftDragger = (ViewDragHelper) leftDraggerField.get(drawerLayout);
// Find edgeSizeField and set Accessible to true
Field edgeSizeField = leftDragger.getClass().getDeclaredField("mEdgeSize");
edgeSizeField.setAccessible(true);
int edgeSize = edgeSizeField.getInt(leftDragger);
// set new edge size
Point displaySize = new Point();
activity.getWindowManager().getDefaultDisplay().getSize(displaySize);
edgeSizeField.setInt(leftDragger, Math.max(edgeSize, (int) (displaySize.x *
displayWidthPercentage)));
} catch (NoSuchFieldException e) {
} catch (IllegalArgumentException e) {
} catch (IllegalAccessException e) {
}
}
}
In addition to the above, the side sliding menu header layout can also set click events, which are implemented through View
head
=
navigtionview
.getHeaderView. I did not write the click events here. Here I also changed the color of the status bar to the color of the title bar to achieve the overall interface coordination. For the specific implementation method, please refer to the article http://blog.csdn.net/s1674521/article/details/59480114
Thinking how to turn off gesture swipe? NavigationView does not have properties related to closing the side sliding gesture, but don't forget, drawerLayout can, and the sliding gesture operation can be closed through the following properties:
In android drawer development, you need to close the gesture sliding to slide out the pop-up box
mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED) //Close gesture sliding
mDrawer_layout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);//Open gesture sliding
The NavigationView Item icon does not display the original color Solution:
navigationView.setItemIconTintList(null);