Android导航抽屉 - 将列表替换为其他列表onClick

Question

我正在尝试在材料设计中实现一个简单的导航抽屉,因此我的抽屉顶部有一个标题和一些文本项(A:CompactHeader Drawer,...)(见图1).单击标题图像时,应打开一个列表(B:mikepenz@gmail.com,...)并"覆盖"我现有的文本项(A)(见图2).如果选择了文本项(B),则原始列表(A)应该返回其原始位置,并且(B)不再可见(参见图1).

注意:这些截图来自教程,但代码太混乱了.我正在寻找一个相对简单的解决方案......我在想Fragments,但我不知道这是否是解决这个问题的正确方法.

Answer 1

此用例不存在 API，这意味着它应该手动处理。您不应该从资源 ( /res/menu) 中扩充菜单项，而应该通过 提供自定义布局app:headerLayout，它会模拟这些菜单项：此布局包含使用普通布局构造的标题部分和菜单项部分。

因此，定义你的根布局如下：

<?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"
    android:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#7e25d1" />

    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="300dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/navigation_view" />

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

哪里navigation_view.xml：

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

    <include
        android:id="@+id/include"
        layout="@layout/header"
        android:layout_width="match_parent"
        android:layout_height="190dp" />

    <FrameLayout
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

并且header.xml是：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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="190dp"
    android:background="@drawable/background_material">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/profile_image"
        android:layout_width="60dp"
        android:layout_height="0dp"
        android:layout_marginLeft="24dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="40dp"
        android:src="@drawable/profile"
        app:civ_border_color="#FF000000"
        app:layout_constraintDimensionRatio="h,1:1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="4dp"
        android:text="John Doe"
        android:textColor="#FFF"
        android:textSize="14sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/email"
        app:layout_constraintLeft_toLeftOf="@+id/profile_image"
        app:layout_constraintStart_toStartOf="@+id/profile_image" />

    <TextView
        android:id="@+id/email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="john.doe@gmail.com"
        android:textColor="#fff"
        android:textSize="14sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/username"
        app:layout_constraintStart_toStartOf="@+id/username" />

    <ImageButton
        android:id="@+id/arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:layout_marginEnd="16dp"
        android:background="?selectableItemBackgroundBorderless"
        android:src="@drawable/ic_arrow_drop_down_black_24dp"
        android:tint="#ffffff"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />

</android.support.constraint.ConstraintLayout>

然后在活动中：

    public class MainActivity extends AppCompatActivity {

        boolean initial = true;

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);

            NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_view);
            View headerView = navigationView.getHeaderView(0);
            ImageButton arrow = headerView.findViewById(R.id.arrow);
            ViewGroup frame = headerView.findViewById(R.id.frame);
            frame.setOnClickListener(v -> toggle(arrow, frame));
            changeContent(frame);
            arrow.setOnClickListener(v -> toggle(arrow, frame));
        }

        private void toggle(ImageButton arrow, ViewGroup frame) {
            initial = !initial;
            arrow.setImageDrawable(ContextCompat.getDrawable(MainActivity.this, initial ? R.drawable.ic_arrow_drop_down_black_24dp : R.drawable.ic_arrow_drop_up_black_24dp));
            changeContent(frame);
        }

        private void changeContent(ViewGroup frame) {
            frame.removeAllViews();
            getLayoutInflater().inflate(initial ? R.layout.content1 : R.layout.content2, frame);
        }

    }

你会得到这样的输出：

提供您的布局content_1和content_2布局文件以适合您的用例。