Toolbar+DrawerLayout+NavigationView个人解析

导读:

      最近在做一个音乐APP,用Toolbar+DrawerLayout+NavigationView做侧滑栏效果很好(个人觉得比slidingMenu好)

符合Material  Desigen设计风格,那么开始介绍使用方法。


准备:

  开始之前需要导包:

  这里需要注意,需要导入对应自己的sdk版本号的包

Toolbar :

 注意事项:

使用Toolbar一定要在styles里将ActionBar设成NoActionBar,并在清单文件中引入;


 Toolbar的xml属性:


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.设置点击事件即可


实现效果:






猜你喜欢

转载自blog.csdn.net/qq_38812658/article/details/80171505
今日推荐