toolbar + DrawerLayout 实现抽屉菜单

最新推荐文章于 2019-10-28 12:50:32 发布

原创最新推荐文章于 2019-10-28 12:50:32 发布 · 1.5k 阅读

2 ·

CC 4.0 BY-SA版权

Android开发专栏收录该内容

44 篇文章

订阅专栏

本文介绍如何在Android应用中实现带有Toolbar和DrawerLayout的布局设计。通过XML布局文件配置及Activity代码实现，可以创建出美观且实用的侧边菜单。文章还提供了自定义按钮监听控制DrawerLayout开关的方法。

编写公共toolbar+DrawerLayout 布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorBase"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme">

    </androidx.appcompat.widget.Toolbar>

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="220dp"
        android:layout_height="match_parent"
        android:layout_gravity="right">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical">
            <ListView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:divider="@color/colorWhite"
                android:dividerHeight="3dp"
                android:id="@+id/slide_menu"/>
        </LinearLayout>
    </androidx.drawerlayout.widget.DrawerLayout>
</LinearLayout>

在activity 代码中添加：

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.menu_realtime_data)
        initView()

        setSupportActionBar(toolbar)
        /*显示Home图标*/
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        toolbar.subtitle = "test"
        
        var toggle = ActionBarDrawerToggle(this, drawer, toolbar, 0, 0)
        toggle.syncState()
        drawer.addDrawerListener(toggle)
     
        drawer.setScrimColor(0x70bbbbbb)
... ...

默认使用系统toggle 监听，控制drawerlayout的弹出，回收。

如果居右边抽屉滑出：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorBase"
        android:minHeight="?attr/actionBarSize"
        android:theme="?attr/actionBarTheme"
        app:navigationIcon="@drawable/back">

        <ImageView android:id="@+id/menu_btn"
        android:contentDescription="返回"
        android:layout_marginTop="1dp"
        android:layout_width="35dp"
        android:layout_height="35dp"
        android:paddingRight="5dp"
        android:layout_gravity="right"
        android:src="@drawable/menu_slide"/>

    </androidx.appcompat.widget.Toolbar>

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawer"
        android:layout_width="220dp"
        android:layout_height="match_parent"
        android:layout_gravity="right">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_gravity="right">
            <ListView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:divider="@color/colorWhite"
                android:dividerHeight="3dp"
                android:id="@+id/slide_menu"/>
        </LinearLayout>
    </androidx.drawerlayout.widget.DrawerLayout>
</LinearLayout>

那么就不能使用toggle,需要自己定义button监听和控制DrawerLayout

package com.daobo.wand.childmenu


import android.graphics.Color
import android.os.Bundle
import android.view.Gravity
import android.view.View
import android.widget.AdapterView
import android.widget.AdapterView.OnItemClickListener
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.daobo.wand.R
import androidx.appcompat.app.ActionBarDrawerToggle
import androidx.drawerlayout.widget.DrawerLayout
import com.daobo.wand.BR
import com.daobo.wand.adapter.ListAdapter

import kotlinx.android.synthetic.main.app_bar.*


class AboutActivity : AppCompatActivity(), View.OnClickListener {
    val listMenuText = listOf<String>("关于", "下载升级")

    private var drawerOpenFlag : Boolean  = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.menu_about)

        setSupportActionBar(toolbar)
        /*显示Home图标*/
        supportActionBar?.setDisplayHomeAsUpEnabled(true)
        toolbar.subtitle = "国家电网山东省供电公司"
        toolbar.setNavigationOnClickListener {
            finish()
        }
        drawer.setDrawerListener(object : DrawerLayout.DrawerListener {
            override fun onDrawerStateChanged(arg0: Int) {
            }
            override fun onDrawerSlide(arg0: View, arg1: Float) {
            }
            override fun onDrawerOpened(arg0: View) {
                drawerOpenFlag = true
            }
            override fun onDrawerClosed(arg0: View) {
                drawerOpenFlag= false
            }
        })
        drawer.setScrimColor(0x70bbbbbb)

        var adapter = ListAdapter<String>(this, listMenuText,
            R.layout.tab_item_simple, BR.name)

        slide_menu.adapter = adapter

        Toast.makeText(this, "关于本app版本，以及升级！", Toast.LENGTH_SHORT).show()

        slide_menu.onItemClickListener =
            OnItemClickListener { parent, view, position, id ->
                if(position == 0){
                    Toast.makeText(this, "关于菜单！", Toast.LENGTH_SHORT).show()
                }else{
                    Toast.makeText(this, "下载升级！", Toast.LENGTH_SHORT).show()
                }
            }

        menu_btn.setOnClickListener(this)
    }

    override fun onClick(v: View?) {
        //TODO("not implemented")
        // To change body of created functions use File | Settings | File Templates.
        when(v?.id) {
            R.id.menu_btn ->{
                //点击了
                if(!drawerOpenFlag) {
                    drawer.openDrawer(Gravity.RIGHT)
                } else{
                    drawer.closeDrawer(Gravity.RIGHT)
                }
            }
        }
    }
}

注意别忘了在manifest文件中，将activity 设置如下 android:theme="@style/Theme.AppCompat.Light.NoActionBar"

<activity android:name=".MainActivity"
            android:theme="@style/Theme.AppCompat.Light.NoActionBar"
            android:screenOrientation="landscape"/>

不然使用setSupportActionBar(toolbar) 会异常！