如何制作自定义导航抽屉（带图像视图的列表视图）

Question

如何制作自定义导航抽屉。

1图像视图

2个列表视图

我使用此链接作为参考Creating a Navigation Drawer

但本教程仅适用于列表视图

请告诉我如何在导航栏中添加带列表视图的图像视图。

如果有任何教程链接，那么它会更好

Answer 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 to display Fragments -->

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

    <RelativeLayout
        android:id="@+id/slider"
        android:layout_width="260dp"

        android:layout_height="match_parent"
        android:layout_gravity="start" >

        <LinearLayout
            android:id="@+id/header_view"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:background="#AA000000"
            android:orientation="horizontal"
            android:padding="5dp" >

            <com.wholesaleraja.model.RoundImage
                android:id="@+id/profile_icon"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_gravity="center_vertical"
                android:layout_margin="1dp"
                android:padding="3dp"
                android:scaleType="fitCenter"
                android:src="@drawable/default_image_male" />

            <LinearLayout
                android:id="@+id/profile_name_layout"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:orientation="vertical"
                 android:layout_marginLeft="5dp"
                android:padding="5dp" >

                <TextView
                    android:id="@+id/profile_name"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_vertical"
                    android:textColor="#ffffff"
                    android:textSize="18sp" />

                <TextView
                    android:id="@+id/profile_email"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:textColor="#ffffff"
                    android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>

        <View
            android:id="@+id/header_divider"
            android:layout_width="fill_parent"
            android:layout_height="2dp"
            android:layout_below="@+id/header_view"
            android:background="@color/list_divider" />

        <ListView
            android:id="@+id/list_slidermenu"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_below="@+id/header_divider"
            android:background="@color/white"
            android:choiceMode="singleChoice"
            android:divider="@color/list_divider"
            android:dividerHeight="1dp"
            android:overScrollMode="never" />
    </RelativeLayout>

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

Answer 2

您需要根据自己的要求自定义listview。就像您可以使用自定义适配器并根据您的要求制作逻辑。浏览此链接

http://www.androidhive.info/2013/11/android-sliding-menu-using-navigation-drawer/

希望它有所帮助!!

Answer 3

示例

<!-- The main context view -->

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

<!-- The navigation drawer -->

<ScrollView
    android:id="@+id/leftDrawer"
    android:layout_width="240dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="#fff" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="10dp"
            android:paddingBottom="3dp"
            android:src="@drawable/ic_launcher"
            android:text="@string/menu_account"
            android:textColor="@color/nav_headingsColor"
            android:textStyle="bold" />

        <View
            android:layout_width="fill_parent"
            android:layout_height="2dip"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="@color/nav_headingsColor" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/imgProfilePic"
                android:layout_width="0dp"
                android:layout_height="70dp"
                android:layout_weight="3"
                android:scaleType="fitXY"
                android:src="@drawable/ic_launcher" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal" >

                <ImageView
                    android:id="@+id/imgProfilePic"
                    android:layout_width="0dp"
                    android:layout_height="70dp"
                    android:layout_weight="3"
                    android:clickable="true"
                    android:contentDescription="@null"
                    android:scaleType="fitXY"
                    android:src="@drawable/ic_launcher" />

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="7"
                    android:gravity="center"
                    android:orientation="vertical"
                    android:padding="5dp" >

                    <TextView
                        android:id="@+id/lblName"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="Christian Bale"
                        android:textColor="@color/nav_textColor"
                        android:textSize="18sp" />

                    <TextView
                        android:id="@+id/lblEmail"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="christianbale@imhot.com"
                        android:textColor="@color/nav_textColor"
                        android:textSize="10sp" />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:layout_marginTop="20dp"
            android:paddingBottom="3dp"
            android:src="@drawable/ic_launcher"
            android:text="@string/menu_menu"
            android:textColor="@color/nav_headingsColor"
            android:textStyle="bold" />

        <View
            android:layout_width="fill_parent"
            android:layout_height="2dip"
            android:layout_marginLeft="10dp"
            android:layout_marginRight="10dp"
            android:background="@color/nav_headingsColor" />

        <RadioGroup
            android:id="@+id/radioGroup"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dip"
            android:layout_marginTop="2dip" >

            <RadioButton
                android:id="@+id/radioTopTen"
                style="@style/RadioButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_launcher"
                android:paddingLeft="20dp"
                android:text="@string/menu_topTen" />

            <View
                android:layout_width="fill_parent"
                android:layout_height="1dip"
                android:background="@color/nav_itemSep" />

            <RadioButton
                android:id="@+id/radioWish"
                style="@style/RadioButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_launcher"
                android:paddingLeft="20dp"
                android:text="@string/menu_wish" />

            <View
                android:layout_width="fill_parent"
                android:layout_height="1dip"
                android:background="@color/nav_itemSep" />

            <RadioButton
                android:id="@+id/radioGifts"
                style="@style/RadioButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_launcher"
                android:paddingLeft="20dp"
                android:text="@string/menu_gifts" />

            <View
                android:layout_width="fill_parent"
                android:layout_height="1dip"
                android:background="@color/nav_itemSep" />

            <RadioButton
                android:id="@+id/radioLibrary"
                style="@style/RadioButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_launcher"
                android:paddingLeft="20dp"
                android:text="@string/menu_library" />

            <View
                android:layout_width="fill_parent"
                android:layout_height="1dip"
                android:background="@color/nav_itemSep" />

            <RadioButton
                android:id="@+id/radioWhatsOn"
                style="@style/RadioButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_launcher"
                android:paddingLeft="20dp"
                android:text="@string/menu_whatsOn" />

            <View
                android:layout_width="fill_parent"
                android:layout_height="1dip"
                android:background="@color/nav_itemSep" />

            <RadioButton
                android:id="@+id/radioDownload"
                style="@style/RadioButton"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_launcher"
                android:paddingLeft="20dp"
                android:text="@string/menu_download" />
        </RadioGroup>

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="40dp"
            android:padding="10dp"
            android:src="@drawable/footer_image" />
    </LinearLayout>
</ScrollView>

Answer 4

以下是使用ListView顶部的用户信息的抽屉布局示例。希望这会有所帮助。

<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"
android:background="@color/black">


<LinearLayout
    android:id="@+id/drawer_linear"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:orientation="vertical" >

    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="80dp"
        android:background="@color/blue"
        android:padding="15dp"
        >

        <ImageView
            android:id="@+id/avatar"
            android:contentDescription="@string/drawer_icon"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@drawable/ic_launcher" />

        <TextView 
            android:id="@+id/name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingTop="6dp"                
            android:textSize="18sp"
            android:textStyle="bold"
            android:layout_toRightOf="@id/avatar"
            android:background="@color/blue"
            android:textColor="@color/white"
            />

        <TextView 
            android:id="@+id/role"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingLeft="10dp"
            android:paddingTop="5dp"
            android:textSize="12sp"
            android:layout_toRightOf="@id/avatar"
            android:layout_below="@id/name"
            android:background="@color/blue"
            android:textColor="@color/white"

            />

    </RelativeLayout>
    <!-- Listview to display slider menu -->

    <ListView
        android:id="@+id/drawer_list"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/white"
        android:choiceMode="singleChoice"
        android:dividerHeight="1dp" />

 </LinearLayout>