Android仿摩拜單車側滑菜單

曾經的側滑菜單通常是使用SlidingMenu，但是用起來設置屬性太多，使用繁瑣。後來官方出來DrawerLayout，使側滑控制項得以轉正，功能效果更佳。這裡是我用DrawerLayout+NavigationView仿摩拜單車做的主界面。

視覺效果：

製作步驟：

使用到了NavigationView，來自於design包，需添加依賴：

‍

    compile 'com.android.support:design:26.0.0-alpha1'
添加主布局，在activity_main.xml中：
DrawerLayout有兩個子view，分別主界面布局和側滑界面布局。android:layout_gravity="start"屬性，
app:headerLayout="@layout/navigation_header"app:menu="@menu/navigation_menu"
<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout android:id="@+id/drawerlayout"    android:layout_width="match_parent"    android:layout_height="match_parent"    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto">
    <LinearLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:orientation="vertical">
        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="48dp"            xmlns:android="http://schemas.android.com/apk/res/android">
            <ImageView                android:layout_width="80dp"                android:layout_height="16dp"                android:background="@mipmap/ic_mobike"/>        </android.support.v7.widget.Toolbar>
        <ImageView            android:layout_width="match_parent"            android:layout_height="wrap_content"            android:background="@mipmap/location"/>    </LinearLayout>
    <android.support.design.widget.NavigationView        android:id="@+id/navigationview"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_gravity="start"        app:headerLayout="@layout/navigation_header"        app:menu="@menu/navigation_menu"/>
</android.support.v4.widget.DrawerLayout>
navigation_header.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="wrap_content"    android:orientation="vertical">
    <RelativeLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:padding="20dp">
        <ImageView            android:id="@+id/iv_avator"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_marginRight="25dp"            android:background="@mipmap/internet_star"/>
        <TextView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:textSize="16sp"            android:textColor="#000"            android:textStyle="bold"            android:layout_marginTop="8dp"            android:layout_toRightOf="@id/iv_avator"            android:text="182****8234"/>
        <TextView            android:id="@+id/tv_author"            android:layout_width="wrap_content"            android:layout_height="23dp"            android:layout_marginTop="32dp"            android:background="@drawable/btn_halftransparent_roundshape"            android:gravity="center"            android:layout_toRightOf="@id/iv_avator"            android:text="信用積分 193  >"            android:textColor="#fff"            android:textSize="11sp"/>    </RelativeLayout>
    <ImageView        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@mipmap/bg_header"        android:scaleType="centerCrop"/>
</LinearLayout>
創建menu包，menu包下的navigation_menu菜單文件：
<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/one"          android:icon="@mipmap/my_favorites"          android:title="我的錢包"/>
    <item android:id="@+id/two"        android:icon="@mipmap/my_competition"        android:title="我的卡券"/>
    <item android:id="@+id/three"        android:icon="@mipmap/my_honor"        android:title="我的行程"/>
    <item android:id="@+id/four"        android:icon="@mipmap/my_offline_cache"        android:title="邀請好友"/>
    <item android:id="@+id/five"        android:icon="@mipmap/my_help_and_feedback"        android:title="我的貼紙"/>
    <item android:id="@+id/six"        android:icon="@mipmap/my_set_up"        android:title="設置"/></menu>
setSupportActionBar(toolbar)
設置toolbar；
setHomeButtonEnabled(true)
設置是否使用自帶返回鍵；
setDisplayHomeAsUpEnabled(true)
給左上角圖標的左邊加上一個返回的圖標 ;
mDrawerLayout.setDrawerListener(mToggle)
給drawerlayout設置開關事件觸發。
toolbar = (Toolbar) findViewById(R.id.toolbar);        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);        navigationView = (NavigationView) findViewById(R.id.navigationview);        toolbar.setTitle("");        setSupportActionBar(toolbar);        getSupportActionBar().setHomeButtonEnabled(true);        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.open,R.string.close){            @Override            public void onDrawerOpened(View drawerView) {                super.onDrawerOpened(drawerView);
            }
            @Override            public void onDrawerClosed(View drawerView) {                super.onDrawerClosed(drawerView);
            }        };
        mToggle.syncState();        mDrawerLayout.setDrawerListener(mToggle);
給菜單添加點擊事件：
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(@NonNull MenuItem item) {                switch (item.getItemId()){                    case R.id.one:                        Toast.makeText(getApplicationContext(),"one",Toast.LENGTH_SHORT).show();                        break;                    case R.id.two:                        Toast.makeText(getApplicationContext(),"two",Toast.LENGTH_SHORT).show();                        break;                    case R.id.three:                        Toast.makeText(getApplicationContext(),"three",Toast.LENGTH_SHORT).show();                        break;                    case R.id.four:                        Toast.makeText(getApplicationContext(),"four",Toast.LENGTH_SHORT).show();                        break;                    case R.id.five:                        Toast.makeText(getApplicationContext(),"five",Toast.LENGTH_SHORT).show();                        break;                    case R.id.six:                        Toast.makeText(getApplicationContext(),"six",Toast.LENGTH_SHORT).show();                        break;                }                return true;            }        });
MainActivity完整代碼：
package com.example.drawerlayout;
import android.support.annotation.NonNull;import android.support.design.widget.NavigationView;import android.support.v4.widget.DrawerLayout;import android.support.v7.app.ActionBarDrawerToggle;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.support.v7.widget.Toolbar;import android.view.MenuItem;import android.view.View;import android.widget.Toast;
public class MainActivity extends AppCompatActivity {    private Toolbar toolbar;    private ActionBarDrawerToggle mToggle;    private DrawerLayout mDrawerLayout;    private NavigationView navigationView;
    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);
        init();    }
    private void init() {        toolbar = (Toolbar) findViewById(R.id.toolbar);        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerlayout);        navigationView = (NavigationView) findViewById(R.id.navigationview);        toolbar.setTitle("");        setSupportActionBar(toolbar);        getSupportActionBar().setHomeButtonEnabled(true);        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        mToggle = new ActionBarDrawerToggle(this,mDrawerLayout,toolbar,R.string.open,R.string.close){            @Override            public void onDrawerOpened(View drawerView) {                super.onDrawerOpened(drawerView);
            }
            @Override            public void onDrawerClosed(View drawerView) {                super.onDrawerClosed(drawerView);
            }        };
        mToggle.syncState();        mDrawerLayout.setDrawerListener(mToggle);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {            @Override            public boolean onNavigationItemSelected(@NonNull MenuItem item) {                switch (item.getItemId()){                    case R.id.one:                        Toast.makeText(getApplicationContext(),"one",Toast.LENGTH_SHORT).show();                        break;                    case R.id.two:                        Toast.makeText(getApplicationContext(),"two",Toast.LENGTH_SHORT).show();                        break;                    case R.id.three:                        Toast.makeText(getApplicationContext(),"three",Toast.LENGTH_SHORT).show();                        break;                    case R.id.four:                        Toast.makeText(getApplicationContext(),"four",Toast.LENGTH_SHORT).show();                        break;                    case R.id.five:                        Toast.makeText(getApplicationContext(),"five",Toast.LENGTH_SHORT).show();                        break;                    case R.id.six:                        Toast.makeText(getApplicationContext(),"six",Toast.LENGTH_SHORT).show();                        break;                }                return true;            }        });    }}
使用技巧：
獲取頭布局控制項：
        View headerView = navigationView.getHeaderView(0);        ImageView ivAvatar = headerView.findViewById(R.id.iv_avator);
需要添加 app:itemIconTint="@color/blue"設置統一顏色。
調用navigationView.setItemIconTintList(null)，https://github.com/18380438200/DrawerLayout