导航抽屉标题

时间:2015-10-22 20:28:13

标签: android android-layout user-interface navigation-drawer material-design

我正在尝试使用可点击的项目实现导航抽屉标题,如下图所示:

enter image description here

我应该如何在抽屉头的右下方实施倒三角形?

我应该如何在标题中听取视图的点击事件? 我直接尝试了findViewById,它返回了null对象; 我试过onNavigationItemSelected,它没有给出响应。

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

谢谢!

null对象错误部分: 我的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

1 个答案:

答案 0 :(得分:2)

这是我如何做三角形扩展器:

标题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,因此适配器。

相关问题