时间戳

首页 > 解决方案 > 如何在我的活动中实现导航抽屉？

android - 如何在我的活动中实现导航抽屉？

问题描述

我正在编写一个简单的优惠券应用程序，但我正在努力在我的活动中实现一个导航抽屉。

我有一个带有选项卡式导航的工具栏。我想在我的工具栏中有一个“汉堡包”风格的按钮，它可以让我打开我的导航抽屉。我不知道如何实现这一点。

如果有人帮助我，我会非常高兴！

我在 Android Studio 中的布局照片： 

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

    <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorSecondaryDark"
            android:minHeight="?attr/actionBarSize"
            android:theme="?attr/actionBarTheme"
            app:title="Makdolan Native"
            app:titleTextColor="@android:color/white" />

    <com.google.android.material.tabs.TabLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" android:id="@+id/tabLayout"
            android:background="@color/colorSecondaryDark"
            app:tabTextColor="@android:color/white" app:tabIndicatorColor="@android:color/white"
            app:tabMode="scrollable"/>
    <androidx.viewpager.widget.ViewPager
            android:layout_width="match_parent"
            android:layout_height="match_parent" android:id="@+id/viewPager"
            android:background="@color/colorPrimary"/>
</LinearLayout>

标签： androidandroid-studiokotlin

解决方案

首先创建一个toolbar_layout.xml文件

举个例子：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/dark_gray">

<ImageButton
        android:layout_width="50dp"
        android:layout_height="match_parent"
        android:src="@drawable/ic_menu"
        android:layout_marginStart="10dp"
        android:id="@+id/menubutton_toolbar"
        android:background="@color/transparent"
        tools:ignore="ContentDescription"/>

<ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textAlignment="center"
        android:gravity="center"
        android:padding="14dp"
        android:src="@drawable/logo" tools:ignore="ContentDescription"/>

</RelativeLayout>

将以下几行添加到活动中的 onCreate 方法中：

    getSupportActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM)
    getSupportActionBar().setDisplayShowCustomEnabled(true)
    getSupportActionBar().setCustomView(R.layout.toolbar_layout)

    val view = getSupportActionBar().getCustomView()

要为您的工具栏实现触摸侦听器，您只需调用

var back = view.menubutton_toolbar as ImageButton;
back.setOnClickListener {
  //Open Drawer
  drawer?.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNDEFINED)
  if(drawer?.getDrawerLockMode(Gravity.LEFT) != DrawerLayout.LOCK_MODE_LOCKED_CLOSED) {
            drawer?.openDrawer(Gravity.LEFT)
        }
}

更新

首先，我们需要一个抽屉布局，如下所示：

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

               <TextView
                    android:id="@+id/user_name_drawer"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:layout_marginTop="5dp"
                    android:layout_marginEnd="0dp"
                    android:textColor="@color/white"
                    android:textSize="18sp"
                    android:textStyle="bold" />
 </LinearLayout>

然后在 MainActivity 中初始化抽屉：

    var drawer = findViewById(R.id.drawer_layout) as DrawerLayout
    var toggle : ActionBarDrawerToggle = ActionBarDrawerToggle(this,drawer, R.string.srn_drawer_open, R.string.srn_drawer_close)

    drawer?.addDrawerListener(toggle)

我希望这会对你有所帮助^^

推荐阅读