Android小白_努力中Android开发经验谈Android开发

Android-NavigationView+DrawerLay

2017-08-26  本文已影响135人  秦子帅

效果图:

qzs.gif
源码下载:[ http://download.csdn.net/download/qq_34908107/9951529 ]
首先看看布局:
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawlayout"
    android:layout_height="match_parent">
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:id="@+id/main_content"
        android:layout_height="match_parent">
        <android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
            
        </android.support.design.widget.AppBarLayout>
    </android.support.design.widget.CoordinatorLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_view" />

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

用DrawerLayout包含了整个的布局,主要是为了侧滑,我们现在主要看看NavigationView的布局。app:headerLayout="@layout/nav_header"这个属性是可以引用头部文件,也就是所谓的头布局; app:menu="@menu/drawer_view"这个属性是指引入菜单的布局。

下面是头布局header:

<?xml version="1.0" encoding="utf-8"?><!--
  ~ Copyright (C) 2015 The Android Open Source Project
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="192dp"
    android:background="?attr/colorPrimaryDark"
    android:padding="16dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark"
    android:orientation="vertical"
    android:gravity="bottom">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="最漆黑那段路 最终要自己走完"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

</LinearLayout>

下面是布局菜单drawer_view:

<?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/nav_photo"
            android:icon="@mipmap/ic_dashboard"
            android:title="图片" />
        <item
            android:id="@+id/nav_video"
            android:icon="@mipmap/ic_event"
            android:title="视频" />
        <item
            android:id="@+id/nav_music"
            android:icon="@mipmap/ic_headset"
            android:title="音乐" />

    </group>

    <item android:title="设置">
        <menu>
            <item
                android:icon="@mipmap/ic_dashboard"
                android:title="日夜模式" />
            <item
                android:icon="@mipmap/ic_forum"
                android:title="Sub item 2" />
        </menu>
    </item>

</menu>

附加:

  1. <group android:checkableBehavior="single">这个属性指的是只能每次只能有一个item被选中。
    2.分割线:每个group 都是一个分组,每添加一个分组,就自动添加了一根分割线。

监听菜单点击调用这个方法setNavigationItemSelectedListener。
下面是整个代码:

package com.example.qzs.materialdesigndemo;

import android.content.Intent;
import android.os.Bundle;
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.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.MenuItem;

/**
 * Created by qzs on 2017/8/26.
 */

 public class NavigationviewActivity  extends AppCompatActivity{
    private Toolbar toolbar;
    private NavigationView  nav_view;
    private DrawerLayout drawlayout;
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.layout_home);
        initView();
        initToobar();
        if (nav_view != null) {
            setupDrawerContent(nav_view);
        }
    }
    //这个写点击逻辑
    private void setupDrawerContent(NavigationView nav_view) {
        nav_view.setNavigationItemSelectedListener(
                new NavigationView.OnNavigationItemSelectedListener() {
                    @Override
                    public boolean onNavigationItemSelected(MenuItem menuItem) {
                        drawlayout.closeDrawers();
                        drawlayout.setSelected(true);
                        return true;
                    }
                });
    }
    private void initToobar() {
        //toolbar的设置
        setSupportActionBar(toolbar);
        final ActionBar ab = getSupportActionBar();
        if (ab != null) {
            ab.setHomeAsUpIndicator(R.mipmap.ic_menu);
            ab.setTitle("嘿嘿");
            ab.setDisplayHomeAsUpEnabled(true);
        }
    }
    private void initView() {
        toolbar= (Toolbar) findViewById(R.id.toolbar);
        nav_view= (NavigationView) findViewById(R.id.nav_view);
        drawlayout= (DrawerLayout) findViewById(R.id.drawlayout);
    }
    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                drawlayout.openDrawer(GravityCompat.START);
                break;
        }
        return super.onOptionsItemSelected(item);
    }
}

我的公众号如下:

qzs1.jpg
上一篇下一篇

猜你喜欢

热点阅读