导航抽屉标题

Question

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

我应该如何在抽屉标题的右下角实现那个倒三角形？

我应该如何在标题中收听视图的点击事件？ 我直接尝试了 findViewById，它返回了 null 对象； 我试过onNavigationItemSelected，它没有响应。

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

谢谢！

空对象错误部分： 我的 MainActivity 定义，包括屏幕其余部分的另一个布局（即非抽屉部分）

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

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

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

下面是我做三角形扩展器的方法：

在标头 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"/>

注意marginBottom。封闭的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

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

这是代码：

  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，因此是适配器。