Android DrawerLayout+ToolBar+NavigationView实现策划效果,沉浸式状态栏

最近看到很多APP都使用了Android Support Library的DrawerLayout实现侧滑效果,下面我就自己写了一个Demo来实现,其中还用到了Toolbar,NavigationView,沉浸式状态栏效果

先看效果图

添加依赖 compile 'com.android.support:design:24+'

首先是布局文件,一共有四个xml文件两个menu文件,先看xml

activity_main.xml, 主页面的布局文件引用了app_bar_main.xml主内容页面布局文件和activity_main_drawer.xml侧滑菜单的menu文件,并使用了NavigationView来作为侧拉页面的容器,引用了nav_header_main.xml文件最为侧滑页面的头布局

<?xml version="1.0" encoding="utf-8"?><android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    tools:context="com.jd.demo.MainActivity">    <include        layout="@layout/app_bar_main"        android:layout_width="match_parent"        android:fitsSystemWindows="true"        android:layout_height="match_parent" />    <android.support.design.widget.NavigationView        android:id="@+id/nav_view"        android:layout_width="wrap_content"        android:layout_height="match_parent"        android:layout_gravity="start"        android:fitsSystemWindows="true"        app:headerLayout="@layout/nav_header_main"        app:menu="@menu/activity_main_drawer" /></android.support.v4.widget.DrawerLayout>

app_bar_main.xml, 使用CoordinatorLayout作为最外层的容器,主要是用来协调子布局的动画效果,这里没有效果,当使用一些滑动列表view比如scrollview或者recyclerview等就会有相应的效果;Tollbar外面包裹一层AppBarLayout来作为标题栏,实现自定义;FloatingActionButton浮动的button

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true"    android:orientation="vertical"    tools:context=".MainActivity">    <android.support.design.widget.AppBarLayout        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:theme="@style/AppTheme.AppBarOverlay">        <android.support.v7.widget.Toolbar            android:id="@+id/toolbar"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:background="?attr/colorPrimary"            app:popupTheme="@style/AppTheme.PopupOverlay" />    </android.support.design.widget.AppBarLayout>    <include layout="@layout/content_main" />    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab"        android:layout_width="wrap_content"        android:layout_margin="@dimen/fab_margin"        android:layout_height="wrap_content"        android:layout_gravity="bottom|end"        android:src="@android:drawable/ic_input_add"/></android.support.design.widget.CoordinatorLayout>

content_main.xml, 内容布局,这里用了一个textView来简单实现一下效果

<?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="horizontal">    <TextView        android:id="@+id/tv_main"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:gravity="center"        android:text="Hello World"        android:textColor="@android:color/holo_red_dark"        android:textSize="20sp"        /></LinearLayout>

nav_header_main.xml, 包含一个imgeview和两个textview

<?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="@dimen/nav_header_height"    android:background="@mipmap/side_nav_bar"    android:gravity="bottom"    android:orientation="vertical"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    android:theme="@style/ThemeOverlay.AppCompat.Dark">    <ImageView        android:id="@+id/imageview"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:paddingTop="@dimen/nav_header_vertical_spacing"        android:src="@android:drawable/sym_def_app_icon" />    <TextView        android:id="@+id/nav_tv1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:paddingTop="@dimen/nav_header_vertical_spacing"        android:text="京东电商云"        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />    <TextView        android:id="@+id/nav_tv2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="http://www.jcloud.com/" /></LinearLayout>

下面就是两个menu文件, activity_main_drawer.xml,侧滑页面的item

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android">    <item        android:id="@+id/favorite"        android:checked="true"        android:icon="@mipmap/ic_launcher"        android:title="收藏" />    <item        android:id="@+id/wallet"        android:icon="@mipmap/ic_launcher"        android:title="钱包" />    <item        android:id="@+id/photo"        android:icon="@mipmap/ic_launcher"        android:title="相册" />    <item        android:id="@+id/file"        android:icon="@mipmap/ic_launcher"        android:title="文件" />    <group android:id="@+id/id">        <item            android:id="@+id/navigation_daily"            android:icon="@mipmap/ic_daily"            android:title="@string/common_navigation_daily" />        <item            android:id="@+id/navigation_welfare"            android:icon="@mipmap/ic_welfare"            android:title="@string/common_welfare" />        <item            android:id="@+id/navigation_android"            android:icon="@mipmap/ic_android"            android:title="@string/common_android" />        <item            android:id="@+id/navigation_ios"            android:icon="@mipmap/ic_ios"            android:title="@string/common_ios" />        <item            android:id="@+id/navigation_js"            android:icon="@mipmap/ic_js"            android:title="@string/common_js" />        <item            android:id="@+id/navigation_video"            android:icon="@mipmap/ic_video"            android:title="@string/common_video" />        <item            android:id="@+id/navigation_resources"            android:icon="@mipmap/ic_resources"            android:title="@string/common_resources" />        <item            android:id="@+id/navigation_app"            android:icon="@mipmap/ic_app"            android:title="@string/common_app" />    </group></menu>

base_toolbar_menu.xml, Toolbar右侧的item

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto">    <item    android:id="@+id/menu_main_about"    android:icon="@mipmap/ic_about"    android:orderInCategory="6"    android:title="关于"    app:showAsAction="ifRoom" />    <item    android:id="@+id/menu_main_home_page"    android:orderInCategory="26"    android:title="item1"    app:showAsAction="never" />    <item    android:id="@+id/menu_main_top_github"    android:orderInCategory="26"    android:title="item2"    app:showAsAction="never" /></menu>

styles.xml, 样式文件,自定义一下主题

<resources>    <!-- Base application theme. -->    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">        <!-- Customize your theme here. -->        <item name="colorPrimary">@color/colorPrimary</item>        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>        <item name="colorAccent">@color/colorAccent</item>    </style>    <style name="AppTheme.NoActionBar">        <item name="windowActionBar">false</item>        <item name="windowNoTitle">true</item>    </style>    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" /></resources>

MainActivity的java代码

package com.jd.demo;import android.graphics.Color;import android.os.Bundle;import android.support.annotation.NonNull;import android.support.design.widget.FloatingActionButton;import android.support.design.widget.NavigationView;import android.support.design.widget.Snackbar;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.Menu;import android.view.MenuItem;import android.view.View;import android.widget.TextView;import android.widget.Toast;public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {    private Toolbar toolbar;    private FloatingActionButton fab;    private DrawerLayout drawerLayout;    private TextView textView;    private NavigationView navigationView;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        //设置状态栏透明        setStatus();        textView = (TextView) findViewById(R.id.tv_main);        //设置Toolbar        initToobar();        //按钮点击事件        initButton();        //设置菜单打开关闭的监听        initDrawerLayout();        //菜单的设置        initgNavagationView();    }    //菜单的设置    private void initgNavagationView() {        navigationView = (NavigationView) findViewById(R.id.nav_view);        navigationView.setNavigationItemSelectedListener(this);    }    //设置菜单打开关闭的监听    private void initDrawerLayout() {        drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);        ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.nav_open, R.string.nav_close);        drawerLayout.addDrawerListener(toggle);        toggle.syncState();    }    //按钮点击事件    private void initButton() {        fab = (FloatingActionButton) findViewById(R.id.fab);        fab.setOnClickListener(new View.OnClickListener() {            @Override            public void onClick(View v) {                Snackbar.make(v, "Snack", Snackbar.LENGTH_LONG)                        .setAction("clickSnack", new View.OnClickListener() {                            @Override                            public void onClick(View v) {                                Toast.makeText(MainActivity.this, "Snack被点击了", Toast.LENGTH_LONG).show();                            }                        })                        .show();            }        });    }    //设置Toolbar    private void initToobar() {        toolbar = (Toolbar) findViewById(R.id.toolbar);        setSupportActionBar(toolbar);    }    //设置状态栏透明    private void setStatus() {        getWindow().setStatusBarColor(Color.TRANSPARENT);        getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE);    }    //添加Toolbar右上方的菜单    @Override    public boolean onCreateOptionsMenu(Menu menu) {        getMenuInflater().inflate(R.menu.base_toolbar_menu, menu);        return true;    }    //Toolbar右上方菜单item的点击回调    @Override    public boolean onOptionsItemSelected(MenuItem item) {        switch (item.getItemId()) {            case R.id.menu_main_about:            case R.id.menu_main_home_page:            case R.id.menu_main_top_github:                textView.setText(item.getTitle());                return true;        }        return super.onOptionsItemSelected(item);    }    //左侧菜单item点击时回调    @Override    public boolean onNavigationItemSelected(@NonNull MenuItem item) {        switch (item.getItemId()) {            case R.id.favorite:            case R.id.wallet:            case R.id.photo:            case R.id.file:            case R.id.navigation_daily:            case R.id.navigation_welfare:            case R.id.navigation_android:            case R.id.navigation_ios:            case R.id.navigation_js:            case R.id.navigation_video:            case R.id.navigation_resources:            case R.id.navigation_app:                textView.setText(item.getTitle());                break;        }        drawerLayout.closeDrawer(GravityCompat.START);        return true;    }    //返回键的处理    @Override    public void onBackPressed() {        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {            drawerLayout.closeDrawer(GravityCompat.START);        } else {            super.onBackPressed();        }    }}

以上就是本Demo的全部代码,点击toolbar的item和侧滑菜单上的item更改主页面的文字
github仓库地址 ：https://github.com/githubyzd/Drawerlayout