Andorid - Material Design之NavigationView和DrawerLayout

老婆保佑，代码无BUG

前言

Material Design 系列第五篇 NavigationView

---

目录

• 一：使用
  • 1. XML
  • 2. heard_layout(头部的布局)
  • 3. activity_main_drawer(侧边栏的选项)
  • 4. Activity 代码
• 二： Toolbar 显示下上面

---

Untitled.gif

一：使用

1. XML

2. heard_layout

3. activity_main_drawer

屏幕快照 2018-01-02 下午6.18.05.png

4. Activity 代码

package com.allens.designdemo;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
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.view.View;
import android.widget.ImageView;
import android.widget.Toast;

/**
 * 描述:
 * 

 * Created by allens on 2018/1/2.
 */

public class NavigationViewAct extends AppCompatActivity {
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_navigation);


        /***
         * 设置ToolBar
         */
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        //显示返回按钮
        getSupportActionBar().setHomeButtonEnabled(true);
        //设置返回按钮可点击
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        //设置返回按钮图标
        toolbar.setNavigationIcon(R.mipmap.ic_launcher);
        //去掉原标题
        getSupportActionBar().setDisplayShowTitleEnabled(false);
        //设置LOGO
        toolbar.setLogo(R.mipmap.ic_launcher);
        //设置主标题
        toolbar.setTitle("Title");
        //设置副标题
        toolbar.setSubtitle("SubTitle");
        //设置最左边那三条杠，侧滑按钮加入动画
        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.addDrawerListener(toggle);
        toggle.syncState();


        /**
         * 初始化NavigationView
         */
        NavigationView navigationView = findViewById(R.id.navigation_view);
        View view = navigationView.getHeaderView(0);
        //通过view的findViewById 获取具体某个空间
        ImageView hearImg = view.findViewById(R.id.imageView);
        hearImg.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(NavigationViewAct.this, "点击头部 IMG", Toast.LENGTH_SHORT).show();
            }
        });

        
        //NavigationView 选项选择
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                int id = item.getItemId();
                if (id == R.id.nav_camera) {
                } else if (id == R.id.nav_gallery) {

                } else if (id == R.id.nav_slideshow) {

                } else if (id == R.id.nav_manage) {

                } else if (id == R.id.nav_share) {

                } else if (id == R.id.nav_send) {

                }

                //自动隐藏
                DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
                drawer.closeDrawer(GravityCompat.START);

                return true;
            }
        });
    }
}

二： Toolbar 显示下上面

Untitled.gif

---

源码地址

点击进入GitHub

最后

全部系列

Andorid - Material Design之Snackbar

Andorid - Material Design之TextInputLayout

Andorid - Material Design之FloatingActionButton

Andorid - Material Design之TabLayout

Andorid - Material Design之NavigationView和DrawerLayout

Andorid - Material Design之CoordinatorLayout