Navigation Drawer 中的背景图像和图像视图答案

【问题标题】：Background image and image view in Navigation DrawerNavigation Drawer 中的背景图像和图像视图
【发布时间】：2014-07-21 11:07:48
【问题描述】：

我正在尝试类似于 Play 商店应用程序的导航抽屉设计：我的菜单部分工作正常，但我想在菜单顶部添加个人资料图像和用户 ID，如下图所示。我不确定如何实现这部分：

我尝试了以下代码并将其添加到 xml 中，其中包含要显示的项目列表。

<LinearLayout
    android:id="@+id/LinearLayoutFrom1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="left|center"
    android:background="@drawable/bg"
    android:orientation="horizontal" >

    <ImageView
        android:id="@+id/clear1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/profilepic" />

    <TextView
        android:id="@+id/textViewName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="UserID"
        android:textColor="#FFFFFF"
        android:textSize="15sp"
        android:textStyle="bold" />
</LinearLayout>

但这只是为每个列表项附加背景和文本。

如何实现上述设计？

更新 1：

我在 XML 中尝试了以下内容：

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

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


<LinearLayout
    android:id="@+id/LinearLayoutFrom1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bg"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/LinearLayoutFrom2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight=".20" >

        <ImageView
            android:id="@+id/clear1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/profilepic" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/LinearLayoutFrom3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight=".80"
        android:orientation="horizontal" >

        <TextView
            android:id="@+id/textViewName"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:text="UserID"
            android:textColor="#FFFFFF"
            android:textSize="15sp"
            android:textStyle="bold" />
    </LinearLayout>

    <ListView
        android:id="@+id/left_panel"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/list"
        android:choiceMode="singleChoice"
        android:divider="@color/divider"
        android:dividerHeight="1dp"
        android:listSelector="@drawable/selector" />
</LinearLayout>

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

我收到以下错误：

http://txs.io/4bpb

更新 2：

我设法通过执行以下操作将标题添加到列表中：

    mDrawerList = (ListView) findViewById(R.id.left_menu);

    View header = getLayoutInflater().inflate(R.layout.headerlayoutfordrawer, null); 
    mDrawerList.addHeaderView(header);

    navDrawerItems = new ArrayList<NavDrawerItem>();

    navDrawerItems.add(new NavDrawerItem(navMenuTitles[0], navMenuIcons.getResourceId(0, -1)));
    navDrawerItems.add(new NavDrawerItem(navMenuTitles[1], navMenuIcons.getResourceId(1, -1),true, "2"));
    navDrawerItems.add(new NavDrawerItem(navMenuTitles[2], navMenuIcons.getResourceId(2, -1)));
    navDrawerItems.add(new NavDrawerItem(navMenuTitles[3], navMenuIcons.getResourceId(3, -1)));
    navDrawerItems.add(new NavDrawerItem(navMenuTitles[4], navMenuIcons.getResourceId(4, -1)));
    navDrawerItems.add(new NavDrawerItem(navMenuTitles[5], navMenuIcons.getResourceId(5, -1)));
    navMenuIcons.recycle();

    mDrawerList.setOnItemClickListener(new SlideMenuClickListener());

    adapter = new NavDrawerListAdapter(getApplicationContext(), navDrawerItems);
    mDrawerList.setAdapter(adapter);

但问题是标头也被计入 DrawerItems 的数组列表中，因此我得到数组 outofboundexception

  07-22 11:18:01.433: E/AndroidRuntime(14229): FATAL EXCEPTION: main
  07-22 11:18:01.433: E/AndroidRuntime(14229): java.lang.ArrayIndexOutOfBoundsException: length=6; index=7
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at com.jlk.trip.maps.displayView(maps.java:192)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at com.jlk.trip.maps.access$0(maps.java:159)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at com.jlk.trip.maps.maps$SlideMenuClickListener.onItemClick(maps.java:122)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.widget.AdapterView.performItemClick(AdapterView.java:298)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.widget.AbsListView.performItemClick(AbsListView.java:1100)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.widget.AbsListView$PerformClick.run(AbsListView.java:2788)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.widget.AbsListView$1.run(AbsListView.java:3463)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.os.Handler.handleCallback(Handler.java:730)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.os.Handler.dispatchMessage(Handler.java:92)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.os.Looper.loop(Looper.java:137)  
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at android.app.ActivityThread.main(ActivityThread.java:5103)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at java.lang.reflect.Method.invokeNative(Native Method)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at java.lang.reflect.Method.invoke(Method.java:525)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:737)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:553)
  07-22 11:18:01.433: E/AndroidRuntime(14229):     at dalvik.system.NativeStart.main(Native Method)

【问题讨论】：

为了实现这一点，您需要使用一个布局，该布局包装了导航抽屉列表视图并在其中包含您想要的图像视图。
感谢您的快速回复。有什么例子可以吗？
参考developer.android.com/training/implementing-navigation/…
@Pr38y：我已经实现了导航菜单，在那里一切正常，但我只需要标题部分，它具有背景图像和一个图像视图（个人资料图片）和电子邮件地址的文本视图。 .
我也遇到了这个错误。请回复@TheDevMan en.textsave.org/4bpb

标签： android

【解决方案1】：

更新：

查看这个项目，了解与抽屉相关的所有内容。 https://github.com/Sottti/MaterialDesignNavDrawer

旧答案：

在此处查看我的 xml： https://github.com/Sottti/BuyIt/blob/master/BuyIt/src/main/res/layout/activity_main.xml

注意上面写着“你的抽屉”的地方。

Navigation Drawer 是 android.support.v4.widget.DrawerLayout 中的第二个子项。

第二个子元素是一个 LinearLayout，包含一个 RelativeLayout 和一个 ListView。

ListView 是它自己的 Drawer 列表视图。

Relative布局是图片头所在的地方。

试试吧，它对我有用。

好运！！

【讨论】：

感谢您的快速回复。我尝试了您推荐的方法，但出现错误。请检查我的问题以获取更新。你能告诉我这里有什么问题吗？
从更简单的开始。只是一个图像和一个列表视图。当我有时间的时候，我会帮你举更多的例子。现在只是试着让它更简单。
我设法将标题添加到列表中，但我遇到了一个奇怪的问题。请在上面的问题中检查我的更新。谢谢！
这是一个非常棒的答案，想知道为什么它没有得到应得的投票！
我使用这个答案解决了错误stackoverflow.com/questions/17939798/…

【解决方案2】：

您可以在 Google IO 的 Android 应用的navdrawer_content layout 中了解 Google 如何处理此问题。
简短的回答：他们不使用 ListView。

【讨论】：

【解决方案3】：

使用 ListView 提供的 addHeaderView() 方法。注意：这将导致 ArrayAdapter 将图像解释为列表中的第一项。要解决这个问题，请使用 addHeaderView 中的选项来禁用单击，并将数组中的所有元素向上移动 1（实际上是在第 0 个元素处创建一个虚拟值）。当你的导航抽屉第一次被调用时，你可能需要像下面这样添加一个 sn-p：

if (savedInstanceState == null) {
            selectItem(1);
        }

【讨论】：