导航抽屉 Header

Question

我正在尝试实现带有可点击项目的导航抽屉 header，如下图所示：

我应该如何实现抽屉右下角的倒三角形 header？

以及header中views的点击事件应该怎么监听呢？我直接试了 findViewById，它返回 null object; 我试过onNavigationItemSelected，没有反应。

现实生活中的例子是 Gmail（while 三角形在下面打开不同的列表）和 Google Play 商店，ImageView 是可点击的

谢谢！

空 object 错误部分：我的 MainActivity 定义包括屏幕其余部分的另一个布局（即 non-drawer 部分）

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start"
android:id="@+id/drawer_layout">

<include
    layout="@layout/app_bar_main_screen"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_drawer_header_main"
    app:menu="@menu/menu_nav_drawer"/>

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

和nav_drawer_header_main.xml：

<?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="@dimen/nav_header_height"
android:background="@color/colorPrimary"
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"
android:gravity="bottom"
android:id="@+id/nav_header_layout"
android:clickable="true">

<ImageView
    android:id="@+id/nav_head_avatar"
    android:layout_width="100dp"
    android:layout_height="80dp"
    android:paddingTop="@dimen/nav_header_vertical_spacing"
    android:layout_marginLeft="-10dp"
    android:src="@mipmap/ic_default_avatar"
    android:layout_above="@+id/nav_head_appname"
    android:layout_alignParentLeft="true"/>

<TextView
    android:id="@+id/nav_head_appname"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="10dp"
    android:textSize="16dp"
    android:text="@string/app_name"
    android:textAppearance="@style/TextAppearance.AppCompat.Body1"
    android:layout_alignParentLeft="true"
    android:layout_above="@+id/nav_head_username"/>

<TextView
    android:id="@+id/nav_head_username"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/nav_head_username"
    android:textSize="20dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"/>

<Button
    android:id="@+id/nav_log_in_out"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:background="@color/colorTransparent"
    android:text="@string/login"
    style="?android:attr/borderlessButtonStyle"
    android:foreground="?android:attr/selectableItemBackground"
    android:clickable="true"
    />

</RelativeLayout>

以及引用 header 中项目的代码块：

navLogInOut = (Button) navigationView.findViewById(R.id.nav_log_in_out);
//navLogInOut = (Button) findViewById(R.id.nav_log_in_out);  // doesn't work either
navLogInOut.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        Toast.makeText(MainScreen.this, "Clicked", Toast.LENGTH_SHORT).show();
    }
});

Logcat:

Caused by: java.lang.NullPointerException: Attempt to invoke virtual method 'void android.widget.Button.setOnClickListener(android.view.View$OnClickListener)' on a null object reference

Answer 1

这是我制作三角形扩展器的方法：

在header XML:

        <ToggleButton
            android:id="@+id/account_view_icon_button"
            android:layout_width="24dp"
            android:layout_height="24dp"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true"
            android:layout_gravity="center"
            android:layout_marginBottom="16dp"
            android:alpha=".54"
            android:background="@drawable/toggle_expand_collapse"
            android:textOff="@null"
            android:textOn="@null"/>

注意下边距。封闭的 RelativeLayout 两侧有一个 16dp 的垫。这会正确定位按钮。

现在可绘制 XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:drawable="@drawable/ic_arrow_drop_up_black_24dp" android:state_checked="true" />
    <item android:drawable="@drawable/ic_arrow_drop_down_black_24dp" />

</selector>

这些图标来自这里：Material Icons | Google Design

我在 header 中使用浅色背景，所以我有黑色图标。如果您的图片背景是深色 header，您可能需要白色图标。

代码如下：

  mAccountToggle = (ToggleButton) view.findViewById(R.id.account_view_icon_button);
  mAccountToggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
     @Override
     public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        mAdapter.setUseAccountMode(isChecked);
     }
  });

我有自己的自定义导航抽屉，它使用 ListView，因此是适配器。

导航抽屉 Header

Navigation Drawer Header

user-interface

android

android-layout

navigation-drawer

material-design