如何在我的活动中实现导航抽屉?

时间:2019-11-12 19:04:26

标签: android android-studio kotlin

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

我有一个带有选项卡式导航的工具栏。我想在工具栏上有一个“汉堡”样式的按钮,该按钮将允许我打开导航抽屉。我不知道如何实现这一点。

如果有人帮助我,我将非常高兴!

我在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>

1 个答案:

答案 0 :(得分:2)

首先创建一个.catch() 文件

例如:

toolbar_layout.xml

将以下各行添加到您的活动的onCreate方法中:

<?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>

要在工具栏上实现触摸监听器,您只需调用

    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)
        }
}

然后在MainActivity中初始化抽屉:

<?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>

希望这对您有所帮助^^