0
点赞
收藏
分享

微信扫一扫

[Android Material Design]组件02 - DrawerLayout

暮晨夜雪 2022-03-18 阅读 40

文章目录

效果图

DrawerLayout

关键代码

xml布局文件代码如下:

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout
    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_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <!-- 显示的内容区,只有一个Toolbar -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@color/purple_700"
            app:titleTextColor="@color/white"/>
    </RelativeLayout>

    <!-- 隐藏的侧滑内容,这里是ListView -->
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/purple_700"
        android:scrollbars="none"
        android:choiceMode="singleChoice"
        android:fitsSystemWindows="true" />
</androidx.drawerlayout.widget.DrawerLayout>

布局文件最外侧是DrawerLayout,依次有两个子视图,第一个是RelativeLayout,这是主要的显示视图,第二个是ListView,这是侧滑内容,layout_gravity="start"指定在左侧侧滑。
kotlin逻辑代码如下:

val drawerLayout = findViewById<DrawerLayout>(R.id.drawer_layout)
val drawerList = findViewById<ListView>(R.id.left_drawer)
drawerList.adapter = ArrayAdapter<String>(this,
		R.layout.drawer_list_item, arrayOf("a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n"))

// 初始化toolbar
val toolbar = findViewById<Toolbar>(R.id.toolbar)
setSupportActionBar(toolbar)
// 设置左上角的图标可以点击
supportActionBar!!.setHomeButtonEnabled(true)
// 左上角图标的左边加上一个返回的图标
supportActionBar!!.setDisplayHomeAsUpEnabled(true)

//ActionBarDrawerToggle用来设置在DrawerLayout状态改变时,toolbar状态也随之改变
mDrawerToggle = ActionBarDrawerToggle(
		this, drawerLayout, toolbar, R.string.drawer_open, R.string.drawer_close)
mDrawerToggle!!.syncState()
drawerLayout.addDrawerListener(mDrawerToggle!!)

drawerLayout一般和toolbar搭配使用,这两个控件通过ActionBarDrawerToggle关联起来,ActionBarDrawerToggle有如下3个方法可以被复写:

源码地址

https://github.com/yurensan/MaterialDesignDemo

举报

相关推荐

0 条评论