Android中DrawerLayout以及NavigationView的使用

由于接收新事物的速度有点慢,这段时间在补着几年缺失的一些Android相关的新内容,看到了抽屉效果的DrawerLayout以及导航View的NavigationView,这里进行一些总结。

首先我先贴出来这个layout布局的代码

<?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"
    tools:context=".DrawerLayoutDemoActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/app_name" />
    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/nav_menu">

        <android.support.v4.widget.NestedScrollView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            android:scrollbars="vertical">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <android.support.design.widget.NavigationView
                    android:id="@+id/nav_view"
                    app:elevation="0dp"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="start"
                    app:headerLayout="@layout/header_view"
                    app:menu="@menu/nav_menu" />
                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="50dp" android:background="@android:color/holo_red_dark">

                </RelativeLayout>
            </LinearLayout>
        </android.support.v4.widget.NestedScrollView>
    </android.support.design.widget.NavigationView>


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

一下贴出用到的资源的代码

用到的menu layout的布局

<?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_profile"
            android:icon="@drawable/ic_account_circle_black"
            android:checkable="false"
            android:title="个人资料" />
        <item
            android:id="@+id/nav_shopping"
            android:icon="@drawable/ic_shopping"
            android:checkable="false"
            android:title="购物车" />
        <item
            android:id="@+id/nav_favorite"
            android:icon="@drawable/ic_stars_black"
            android:checkable="false"
            android:title="我的收藏" />
        <item
            android:id="@+id/nav_videos"
            android:icon="@drawable/ic_theaters_black"
            android:checkable="false"
            android:title="我的视频" />
        <item
            android:id="@+id/nav_setting"
            android:icon="@drawable/ic_settings_black"
            android:checkable="false"
            android:title="设置" />
    </group>
</menu>

header layout的布局如下

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:background="?attr/colorPrimary"
    android:padding="10dp">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/image"
        android:layout_centerInParent="true"/>
    <TextView
        android:id="@+id/user_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/user_mail"
        android:text="Toney"
        android:textColor="@android:color/white"
        android:textSize="14sp"/>
    <TextView
        android:id="@+id/user_mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="mingmingsuper@gmail.com"
        android:textColor="@android:color/white"
        android:layout_alignParentBottom="true"
        android:textSize="14sp"/>
</RelativeLayout>

代码中用到的图片资源我就不贴过来,就是一些菜单能用到的图片。

Activity中的代码如下:

package com.study.helloworld;

import android.support.annotation.NonNull;
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.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;

public class DrawerLayoutDemoActivity extends AppCompatActivity {

    DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer_layout_demo);
        Toolbar toolbar = findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        mDrawerLayout = findViewById(R.id.drawer_layout);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
//            actionBar.setHomeAsUpIndicator(R.drawable.image);
        }

        NavigationView navigationView = findViewById(R.id.nav_view);
        navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                mDrawerLayout.closeDrawers();
                return true;
            }
        });

    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);
                break;
            default:
                break;
        }
        return true;
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.main_menu,menu);
        return true;
    }

    private void updateMenu() {
        supportInvalidateOptionsMenu();
    }
}

所有代码中用到的库如下:

implementation 'com.android.support:appcompat-v7:27.1.1'
implementation 'com.android.support:design:27.1.1'
implementation 'de.hdodenhof:circleimageview:2.2.0'

有可能你会有疑问,为什么会有两层NavigationView的嵌套,这是我为了给NavigationView添加一个footer才这么做的。

整体就是这样,如果有什么不明白的,可以留言给我。

0 0 vote
Article Rating
Subscribe
提醒
guest
0 评论
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x