最近的项目中要实现一个左侧滑菜单,需求是点击导航栏中的图标,弹出左侧滑菜单。所以用了DrawerLayout + Toolbar + NavigationView来实现。
先看效果图
点击红框中的图标,弹出左侧滑菜单,如下图
看一下代码是怎么实现的吧。
xml文件
<?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:id="@+id/activity_main"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<android.support.v4.widget.DrawerLayout
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--主视图-->
<RelativeLayout
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="60dp"
android:background="@drawable/title_bar_bg"
android:minHeight="?attr/actionBarSize"
android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<TextView
android:id="@+id/title_nav"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:textColor="@android:color/white"
android:textSize="20dp"
android:gravity="center"
android:layout_marginRight="65dp"
android:text="导航栏"/>
</android.support.v7.widget.Toolbar>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="主视图"
android:textSize="40dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
<!--左侧滑菜单-->
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="250dp"
android:layout_height="match_parent"
android:background="@android:color/white"
android:layout_gravity="start">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="左侧滑菜单"
android:textSize="40dp"
android:layout_centerInParent="true"/>
</RelativeLayout>
</android.support.design.widget.NavigationView>
</android.support.v4.widget.DrawerLayout>
</LinearLayout>
代码实现
package com.lb.studyandroid;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.View;
public class MainActivity extends AppCompatActivity {
private Toolbar mToolbar;
private DrawerLayout mContainerDL;
private NavigationView mNavigationView;
private ActionBarDrawerToggle mToggle;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mToolbar = (Toolbar) findViewById(R.id.toolbar);
mContainerDL = (DrawerLayout) findViewById(R.id.drawer);
setSupportActionBar(mToolbar);
mNavigationView = (NavigationView) findViewById(R.id.navigation);
//设置导航栏主菜单选项关联侧滑菜单
mToggle = new ActionBarDrawerToggle(this, mContainerDL, R.string.open, R.string.close) {
@Override
public void onDrawerOpened(View drawerView) {
invalidateOptionsMenu();
}
@Override
public void onDrawerClosed(View drawerView) {
invalidateOptionsMenu();
}
};
mToggle.syncState();
mToggle.setDrawerIndicatorEnabled(false);
//设置Toolbar图标
mToggle.setHomeAsUpIndicator(R.drawable.drawer_icon);
mToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
mContainerDL.openDrawer(GravityCompat.START);
}
});
mContainerDL.setDrawerListener(mToggle);
getSupportActionBar().setDisplayHomeAsUpEnabled(true);
}
}
下面这行代码可以替换掉Toolbar自带的图标
mToggle.setHomeAsUpIndicator(R.drawable.drawer_icon);