在导航抽屉的背景图象和图象视图

时间:2014-07-21 11:07:49

标签: android

我正在尝试类似于Play商店的导航抽屉设计App:我已经让菜单部分工作正常但我想在菜单顶部添加个人资料图片和用户ID,如下图所示。我不确定如何实现这一部分:

enter image description here

我尝试了以下代码并将其添加到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中的arraylist中计算,因此我得到数组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)

3 个答案:

答案 0 :(得分:6)

更新:

看一下这个项目,了解与抽屉有关的一切。 https://github.com/Sottti/MaterialDesignNavDrawer

老答案:

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

注意“你的抽屉”的位置。

导航抽屉是android.support.v4.widget.DrawerLayout中的第二个子项。

第二个子节点是一个包含RelativeLayout和ListView的LinearLayout。

ListView是它自己的抽屉列表视图。

相对布局是图像标题所在的位置。

试试看,它对我有用。

运气!!

答案 1 :(得分:0)

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

答案 2 :(得分:0)

使用ListView提供的addHeaderView()方法。注意:这将导致ArrayAdapter将图像解释为列表中的第一项。要解决此问题,请使用addHeaderView中的选项禁用单击,并将数组中的所有元素向上移动1(实际上在第0个元素处创建虚拟值)。首次调用导航抽屉时,您可能需要添加如下代码段:

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