侧滑框DrawerLayout和NavigationView完美合作

【楔子】写之前讲下这个两个各自功能，DrawerLayout是管理抽屉拉进拉出，Navigation负责侧滑页面就是抽屉里面的东西，Google在Android5.0之后推出的NavigationView，导航栏菜单，这个菜单是什么呢？

Navigation分为上半部和下半部，为了适应我们现在的大部分App上半部分是头像资料信息，下半部分一些设置功能

<strong>app:headerLayout="@layout/head_layout"
        app:menu="@menu/slidmenu"</strong>

headLayout上半部，管理上图profile，下半部就是功能用menu实现。

【准备工作】：

AS的准备工作大部分是添加依赖包：

built.gradle(Module):

<strong> implementation 'com.android.support:design:27.1.1'</strong>

【主页面MainActivity.xml配置】：

首先了解一下，DrawerLayout里面包括一个主页面布局和侧拉框Navigation，主页面布局一定要在NavigationView之前，

【避坑操作】由于之前做的发现自己的侧滑页面一直实现不了侧滑功能，一打开主页面只能看到侧滑菜单，后来发现自己把主页面布局包括了NavigationView，哭死，调了两个小时，下面代码

<strong>LinearLayout</strong>

就是我的主布局，你的主布局一定要在NavigationView前面，XML 顺序意味着按 z 序（层叠顺序）排序

现在看代码：

<?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/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Activity.MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <include layout="@layout/main_layout"/>
        
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/head_layout"
        app:menu="@menu/slidmenu"

        >

    </android.support.design.widget.NavigationView>



</android.support.v4.widget.DrawerLayout>

【注意点敲黑板】：现在市面上大部分博客

<strong>android:layout_gravity="start"</strong>

这个地方start是用left的，试验一下效果没区别但是AS会提示你使用“start”代替“left”

所以看博客看官方，看不了官方就看看最新

app:headerLayout="@layout/head_layout"

定义NavigationView里面导航栏上半部界面：

【head_layout.xml】

<strong><?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:orientation="vertical"
    android:background="?attr/colorPrimary"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        android:scaleType="centerCrop"
        android:src="@drawable/icon" />

</LinearLayout></strong>

其实就是简单的一个图片，大家可以自我添加有意思的界面

【slidmenu.xml】

功能栏：如何新建menu项目首先项目右键new-Android resources Derectory-选择menu，建立后再menu文件夹下再建立xml

<strong><?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/media"
        android:icon="@drawable/ic_media"
        android:title="媒资管理"/>
    <item
        android:id="@+id/upload"
        android:icon="@drawable/ic_up"
        android:title="上传管理"/>
    <item
        android:id="@+id/shortcut"
        android:icon="@drawable/ic_shortvideo"
        android:title="短视频"/>
    <item android:title="全局设置">
        <menu>
    <item
        android:id="@+id/splite"
        android:icon="@drawable/ic_splite"
        android:title="分类"/>
    <item
        android:id="@+id/system"
        android:icon="@drawable/ic_system"
        android:title="设置"/>
        </menu>


    </item>


</menu></strong>

【tips】：想要menu分模块显示，可以用group也可以像我这样，再新建一个子menu里面再填充item

其实到这里运行就已经可以出现侧滑，手指右拉即可：

【效果】：

================================================================================================

【提升】：大家看到这里会问，如何点击菜单栏然后可以出现侧滑框，两种方式都是调出侧滑框

如下：

【准备工作】：首先让系统不显示actionbar

在styles.xml文件进行整改

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>
    <style name="AppTheme.Base" parent="Theme.AppCompat">
        <item name="windowActionBar">false</item>
        <item name="android:windowNoTitle">true</item>
    </style>

</resources>

然后AndroidManifest里面检查主题样式名字是否为刚才我们设立的。

  android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">

【activity_main】:

<strong><?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/drawerlayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Activity.MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">



        <include layout="@layout/main_layout"/>
        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="主页面" />

        <ImageView
            android:id="@+id/imageView10"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_launcher_background" />
    </LinearLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/head_layout"
        app:menu="@menu/slidmenu"

        >

    </android.support.design.widget.NavigationView>



</android.support.v4.widget.DrawerLayout></strong>

可以看到我的配置文件包括了

<include layout="@layout/main_layout"/>

这里其实就是导航栏，里面定义了一个toolbar，网上大部分介绍toolbar的都是把 include 放到主页面外显示也是习惯，但是我的代码放在外面时候发现会覆盖主页面，导致主页面都不显示，所以就把它放在了主页面显示布局里面了，不知道是什么问题，很蛋疼，暂时这样效果也一样。

看下toolbar配置：

【main_layout.xml】

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.AppBarLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:subtitle="subtitle"
        app:layout_scrollFlags="scroll|enterAlways"
        app:tabIndicatorColor="@android:color/white"
        app:title="title" />
</android.support.design.widget.AppBarLayout>

【MainActivity代码】：

package com.rolarun.vvvv.shortmedia.Activity;

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.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

import com.rolarun.vvvv.shortmedia.R;



public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener{


    DrawerLayout drawlayout;
    NavigationView navigationView;
    Toolbar toolbar;
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

       navigationView=(NavigationView)findViewById(R.id.navigation_view);
       toolbar=(Toolbar)findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

       drawlayout=(DrawerLayout)findViewById(R.id.drawerlayout);
        //设置可旋转的导航菜单控件
       ActionBarDrawerToggle actionBarDrawerToggle=  new ActionBarDrawerToggle(this,drawlayout,toolbar,R.string.open,R.string.close);
        //同步状态，刷新页面

      drawlayout.addDrawerListener(actionBarDrawerToggle);
        actionBarDrawerToggle.syncState();

    }


    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        return false;
    }
}

监听方法还没写，显示效果如上

========================================================================================================

需要自己写的

首先button样式：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <corners android:radius="3dp"/>
    <stroke android:width="1dp"
        android:color="#d1d1d1"
        />

</shape>

其次就是大家需要换上自己的图片，当然想要完全使用可以去我博客下载demo包

地址点击下面链接即可

点击打开链接

侧滑框DrawerLayout和NavigationView完美合作

猜你喜欢