天天看點

Android實作側滑抽屜菜單,Android實作側滑抽屜菜單(DrawerLayout+NavigationView+toolbar)

目錄:

1.概述

2.實作過程與代碼

1.概述

在android開發中,咱們常常會有需求開發抽屜菜單,縱觀當下的主流APP,大多首頁都會有側滑抽屜菜單,它的好處就在于,它能夠

在有限的空間内顯示盡可能多的控件。

抽屜菜單的實作方式也有不少種方式,下面我僅僅是經過官方的DrawerLayout+NavigationView+toolbar來實作與導航欄相關聯的抽屜

菜單。

2.實作過程與代碼

2.1 效果截圖

Android實作側滑抽屜菜單,Android實作側滑抽屜菜單(DrawerLayout+NavigationView+toolbar)
Android實作側滑抽屜菜單,Android實作側滑抽屜菜單(DrawerLayout+NavigationView+toolbar)

由上面的效果圖能夠看出,其中的布局包括3部分,(1)主體布局,抽屜菜單未滑出時的顯示布局 (2)抽屜菜單的頭部布局 (3)抽屜菜單的菜單項布局

ok,下面會依次貼出上面的布局。

2.2 主布局檔案activity_main.xml

android:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:id="@+id/toolbar"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:minHeight="?attr/actionBarSize"

/>

注:能夠看出除了toolbar控件外,還導入了其drawerlayout_main布局,看看drawerlayout_main的布局以下

2.3 主布局檔案中include包含檔案drawerlayout_main.xml

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

android:id="@+id/drawer_layout"

android:layout_height="match_parent"

android:layout_width="match_parent">

android:id="@+id/main_layout"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:src="@drawable/background"

android:layout_width="match_parent"

android:layout_height="match_parent" />

android:id="@+id/drawer_navigation"

android:layout_width="480dp"

android:layout_height="match_parent"

android:layout_gravity="left"

app:menu="@menu/drawer_menu"

app:headerLayout="@layout/drawer_header"/>

注:看drawerlayout_main布局以DrawerLayout未根布局,并在裡面包含了FrameLayout布局和NavigationView控件,其中FrameLayout布局

就是主體布局内容,而NavigationView則是導航抽屜,細心的朋友能夠看見裡面的app:menu="@menu/drawer_menu"和

app:headerLayout="@layout/drawer_header"屬性,他們分别指定的是側滑抽屜菜單的menu和header,下面分别是抽屜菜單的頭部布局和菜單項

2.4 抽屜菜單header布局drawer_header.xml

android:layout_width="match_parent"

android:background="@drawable/navication_header"

android:layout_height="match_parent">

android:layout_marginTop="15dp"

android:id="@+id/header_icon"

android:layout_centerHorizontal="true"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:src="@mipmap/ic_launcher"/>

android:layout_marginTop="10dp"

android:layout_marginLeft="20dp"

android:layout_below="@+id/header_icon"

android:layout_alignParentLeft="true"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/nick_name"

android:text="Andy Lau"

android:textSize="18sp"/>

android:layout_marginLeft="20dp"

android:layout_below="@+id/nick_name"

android:layout_alignParentLeft="true"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:id="@+id/desc"

android:text="作一稞低頭的麥穗,飽滿而謙遜!"

android:textSize="18sp"/>

2.5 menu布局檔案drawer_menu.xml

android:title="購物愛好">

android:icon="@drawable/film"

android:title="電影"/>

android:icon="@drawable/mall"

android:title="商場"/>

android:title="我的中心">

android:icon="@drawable/wallet"

android:title="錢包"/>

android:icon="@drawable/collect"

android:title="收藏"/>

android:icon="@drawable/setting"

android:title="設定"/>

注:ok,布局基本貼完,下面是主要類代碼

2.6 主布局java類MainActivity,

package com.example.drawerlayout;

import android.support.design.widget.NavigationView;

import android.support.v4.widget.DrawerLayout;

import android.support.v7.app.ActionBarDrawerToggle;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.support.v7.widget.Toolbar;

import android.view.Menu;

import android.view.MenuItem;

import android.view.View;

import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

private Toolbar toolbar;

private DrawerLayout drawerLayout;

private NavigationView navigation;

private ActionBarDrawerToggle drawerToggle;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

initView();

//設定toolbar标題文本

toolbar.setTitle("首頁");

//設定toolbar

setSupportActionBar(toolbar);

//設定左上角圖示是否可點選

getSupportActionBar().setHomeButtonEnabled(true);

//左上角加上一個傳回圖示

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

//初始化ActionBarDrawerToggle(ActionBarDrawerToggle就是一個開關同樣用來打開或者關閉drawer)

drawerToggle = new ActionBarDrawerToggle(MainActivity.this,drawerLayout,toolbar,R.string.openString,R.string.closeString){

@Override

public void onDrawerOpened(View drawerView) {

Toast.makeText(MainActivity.this,"菜單打開了",Toast.LENGTH_SHORT).show();

super.onDrawerOpened(drawerView);

}

@Override

public void onDrawerClosed(View drawerView) {

Toast.makeText(MainActivity.this,"菜單關閉了",Toast.LENGTH_SHORT).show();

super.onDrawerClosed(drawerView);

}

};

navigation.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {

@Override

public boolean onNavigationItemSelected(MenuItem menuItem) {

Toast.makeText(MainActivity.this,menuItem.getTitle(),Toast.LENGTH_SHORT).show();

menuItem.setChecked(true);

drawerLayout.closeDrawers();

return false;

}

});

drawerToggle.syncState();

//設定DrawerLayout的抽屜開關監聽

drawerLayout.setDrawerListener(drawerToggle);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.toolbar_menu,menu);

return super.onCreateOptionsMenu(menu);

}

private void initView() {

toolbar = (Toolbar) findViewById(R.id.toolbar);

drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);

navigation = (NavigationView) findViewById(R.id.drawer_navigation);

}

}

注:最後在附上對theme的自定義style

2.7 Theme風格自定義

false

@color/customArrayColor

@style/CustomNoActionBarTheme.drawerArrowStyle

@color/customColorPrimary

@color/colorAccent

@color/customArrayColor