导读:
最近在做一个音乐APP,用Toolbar+DrawerLayout+NavigationView做侧滑栏效果很好(个人觉得比slidingMenu好)
符合Material Desigen设计风格,那么开始介绍使用方法。
准备:
开始之前需要导包:
这里需要注意,需要导入对应自己的sdk版本号的包
Toolbar :
注意事项:
使用Toolbar一定要在styles里将ActionBar设成NoActionBar,并在清单文件中引入;
Toolbar的xml属性:
app:showAsAction属性说明:
当你的应用程序目标设为蜂巢平台(即 Android 3.0)时,你可以利用Action Bar部件提供的全部功能,将你的选项菜单项放在Action Bar的右上角,对用户来说使用更方便,控制该行为的主菜单项属性是android:showAsAction。 这个属性可接受的值有:
1).alaways:这个值会使菜单项一直显示在ActionBar上。
2).ifRoom:如果有足够的空间,这个值会使菜单显示在ActionBar上。
3).never:这个值菜单永远不会出现在ActionBar是。
4).withText:这个值使菜单和它的图标,菜单文本一起显示。
android:background="?attr/colorPrimary" <--!可以设置沉浸状态-->
Toolbar的Java代码:
toolbar.setTitle("");
setSupportActionBar(toolbar);//设置成ActionBar
//getSupportActionBar().setDisplayHomeAsUpEnabled(true);默认返回图标是箭头
这样Toolbar就设置成功了。
补充Toolbar常用:
1.NavigationIcon
2.Logo
3.Title
4.subTitle
5.menu
实际上Toolbar+optionMenu,Toolbar+serachView等等,Toolbar组合能实现的功能很多,这里就不一一介绍了。
DrawerLayout+NavigationView :
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:openDrawer="start">
<include
layout="@layout/app_bar_main"
android:layout_width="match_parent"
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:itemIconTint="@color/colorPrimary"
app:menu="@menu/activity_main_drawer" />
</android.support.v4.widget.DrawerLayout>
NavigationView要放在DrawerLayout中
DrawerLayout+NavigationView属性:
DrawerLayout:
android:fitsSystemWindows="true"
可以实现沉浸式状态效果,5.0以后的设备
NavigationView:
android:layout_gravity="start" 不写会布满全屏,start左侧滑,end右侧滑
app:headerLayout="@layout/nav_header_main" 设置头部布局
app:itemIconTint="@color/colorPrimary" 设置menu图标颜色
app:menu="@menu/activity_main_drawer" 设置菜单布局内容
app:itemBackground 设置menu背景颜色
app:itemTextColor 设置menu字体颜色
headerLayout头部布局:
<?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:layout_width="match_parent"
android:layout_height="@dimen/nav_header_height"
android:gravity="bottom"
android:orientation="vertical"
android:padding="10dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
<ImageView
android:id="@+id/imageView"
android:layout_width="60dp"
android:layout_height="60dp"
android:layout_centerVertical="true"
android:src="@mipmap/hander"
android:onClick="click"/>
<LinearLayout
android:layout_toRightOf="@id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_centerVertical="true"
android:layout_marginLeft="5dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="安卓菜鸟"
android:textColor="#121111"
android:textSize="18sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="QQ:2808380274"
android:textColor="#121111"
android:textSize="14sp"/>
</LinearLayout>
</RelativeLayout>
<TextView
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#121111"/>
</LinearLayout>
menu布局:
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
<item
android:id="@+id/action_setting"
android:icon="@mipmap/ic_menu_settings"
android:title="功能设置" />
<item
android:id="@+id/action_night"
android:icon="@mipmap/ic_menu_night"
android:title="夜间模式" />
<item
android:id="@+id/action_timer"
android:icon="@mipmap/ic_menu_timer"
android:title="定时停止播放" />
<item
android:id="@+id/action_exit"
android:icon="@mipmap/ic_menu_exit"
android:title="退出应用" />
<item
android:id="@+id/action_about"
android:icon="@mipmap/ic_menu_about"
android:title="关于我的音乐" />
</group>
</menu>
补:menu可以分组,
<group android:checkableBehavior="single"> 设置item选择状态
Java代码
package com.example.administrator.mymusic;
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.MenuItem;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener {
Toolbar toolbar;
NavigationView navigationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
toolbar = (Toolbar) findViewById(R.id.toolbar);
toolbar.setTitle("");
setSupportActionBar(toolbar);
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle); //绑定ActionBarDrawerToggle
toggle.syncState();//显示"三"
navigationView = (NavigationView) findViewById(R.id.nav_view);
navigationView.setNavigationItemSelectedListener(this); //注册点击事件
}
//点击弹出侧滑栏
@Override
public void onBackPressed() {
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
if (drawer.isDrawerOpen(GravityCompat.START)) {
drawer.closeDrawer(GravityCompat.START);
} else {
super.onBackPressed();
}
}
//NavigtaonView菜单点击事件
@SuppressWarnings("StatementWithEmptyBody")
@Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
switch (item.getItemId()){
case R.id.action_about:
Toast.makeText(this,"关于我们",Toast.LENGTH_SHORT).show();
break;
}
// DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
// drawer.closeDrawer(GravityCompat.START);
return true;
}
}
补充头部点击事件:
1.获取id
View headerView = navigationView.getHeaderView(0);
ImageView imageView= headerView.findViewById(R.id.imageView);
2.设置点击事件即可
实现效果: