【楔子】写之前讲下这个两个各自功能,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包
地址点击下面链接即可