Question

我创建了一个导航抽屉，当用户点击hamburger图标时，它会打开抽屉。我需要在drawer中添加一个关闭按钮。这就是我需要实现的目标。

我试过，bunt无法在Drawer Layout上添加图片。这是我添加Navigation Drawer的代码。请指导我如何在Drawer的右上角添加图像。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:id="@+id/base_layout">

    <include layout="@layout/header_layout"/>


</LinearLayout>


    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:id="@+id/navigation_view"
        android:layout_gravity="start"
        android:background="@drawable/sidebg"
        app:menu="@menu/drawer_menu"
        app:itemTextColor= "#ffffff"
        app:headerLayout="@layout/navigation_drawer_header"
        android:gravity="bottom|left"
        android:dividerHeight="0dp"
        app:itemIconTint="@android:color/white"
        >

    </android.support.design.widget.NavigationView>




</android.support.v4.widget.DrawerLayout>

Answer 1

ActionBarDrawerToggle会解决您的问题：

mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(
                this,                  /* host Activity */
                mDrawerLayout,         /* DrawerLayout object */
                R.drawable.ic_drawer,  /* nav drawer icon to replace 'Up' caret */
                R.string.drawer_open,  /* "open drawer" description */
                R.string.drawer_close  /* "close drawer" description */
                ) {

            /** Called when a drawer has settled in a completely closed state. */
            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
                getActionBar().setTitle(mTitle);
            }

            /** Called when a drawer has settled in a completely open state. */
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                getActionBar().setTitle(mDrawerTitle);
            }
        };

        // Set the drawer toggle as the DrawerListener
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        getActionBar().setDisplayHomeAsUpEnabled(true);
        getActionBar().setHomeButtonEnabled(true);

替代方式：

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

    <android.support.v4.widget.DrawerLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <!--your layout here -->
    </android.support.v4.widget.DrawerLayout>


    <ImageView
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:id="@+id/im_close_btn"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:visibility="gone"
        android:src="@drawable/ic_close"/>
</RelativeLayout>

Answer 2

在X图标的imageview中添加一个点击监听器。

imageView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Drawer.closeDrawer(Gravity.LEFT);
        }
    });

添加要执行某种自定义视图的图标

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<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="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android-coding.blogspot.com" />
</RelativeLayout>

<LinearLayout
    android:id="@+id/drawer"
    android:layout_width="200dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:orientation="vertical"
    android:background="@android:color/background_dark"
    android:padding="5dp" >

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="android-coding"/>
    <ImageView
        android:id="@+id/imageview"
     android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="yourdrawable"
        />
</LinearLayout>

请参阅My source

Same as your question.

Answer 3

navigation_drawer_header.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/nav_header_height"
    android:background="@drawable/side_nav_bar"
    android:gravity="bottom"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:theme="@style/ThemeOverlay.AppCompat.Dark">
    <Button
        android:id="@+id/closeButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="X"
        android:layout_gravity="right"/>
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        app:srcCompat="@android:drawable/sym_def_app_icon" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Android Studio"
        android:textAppearance="@style/TextAppearance.AppCompat.Body1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android.studio@android.com" />

</LinearLayout>

Java代码

View headerView = navigationView.getHeaderView(0);
        Button closeButton = (Button) headerView.findViewById(R.id.closeButton);

        closeButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                drawer.closeDrawer(Gravity.LEFT);
            }
        });

Answer 4

我相信你想知道如何添加＆＃34; x＆＃34;按钮。那么，你在NavigationView中看到下面一行：

app:headerLayout="@layout/navigation_drawer_header"

这是抽屉的标题布局。打开此布局并将ImageView放入其中。就如此容易。

如何在导航抽屉的右上角添加十字按钮

4 个答案: