在带有标题和列表的 NavigationDrawer 中使用自定义布局 [英] Use Custom Layout in NavigationDrawer With Header And list

问题描述

如何在 NavigationView 中添加自定义布局并设计我创建的自定义 NavigationView 使用材料设计，我想将我的抽屉图标放在右侧，将文本放在左侧这个

解决方案

我搜索的太多了，这是我的经验

首先为标题创建布局.它的名字是 nav_header_main.xml 然后把它放在 res 的 layouts 文件夹中，然后把这段代码放进去..

<相对布局android:layout_width="match_parent"android:layout_height="wrap_content"android:padding="16dp"><de.hdodenhof.circleimageview.CircleImageViewandroid:id="@+id/cv_nave_profile_image"android:layout_width="@dimen/nav_profile_image"android:layout_height="@dimen/nav_profile_image"android:layout_alignParentRight="true"android:layout_alignParentTop="true"android:src="@drawable/profile"/><线性布局android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_toLeftOf="@id/cv_nave_profile_image"android:layout_alignParentTop="true"android:padding="@dimen/activity_horizo​​ntal_margin"机器人:方向=垂直"><文本视图android:layout_width="wrap_content"android:layout_height="wrap_content"android:id="@+id/tv_nav_name"android:textStyle="粗体"机器人:字体=sans"android:textColor="#ffffff"机器人:重力=正确"机器人:layout_gravity =正确"android:text="رخداد جدید"机器人:paddingBottom =5dp"android:textSize="@dimen/body"/></LinearLayout><文本视图android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentBottom="true"机器人:字体=sans"android:textColor="#ffffff"android:id="@+id/tv_nav_phone"机器人:layout_alignParentLeft =真"机器人:文本=0370077315"/></RelativeLayout></LinearLayout>

然后我将它包含为 NavigationView 的子项，对于菜单项，我使用 RecyclerView 来显示菜单和图标，所以我的 NavigationView 是 >

<android.support.design.widget.AppBarLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/AppTheme.AppBarOverlay"><android.support.v7.widget.Toolbarandroid:id="@+id/工具栏"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:background="?attr/colorPrimary"app:popupTheme="@style/AppTheme.PopupOverlay"></android.support.v7.widget.Toolbar></android.support.design.widget.AppBarLayout><include layout="@layout/content_search"/><android.support.design.widget.FloatingActionButtonandroid:id="@+id/fab"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="底部|结束"android:layout_margin="@dimen/fab_margin"android:src="@android:drawable/ic_dialog_email"/></android.support.design.widget.CoordinatorLayout><android.support.design.widget.NavigationView android:id="@+id/nav_view"android:layout_width="fill_parent" android:layout_height="match_parent"android:layout_gravity="right" android:fitsSystemWindows="true"android:layout_marginLeft="@dimen/nav_margin"><线性布局android:layout_width="fill_parent"android:layout_height="fill_parent"机器人:方向=垂直"><include layout="@layout/nav_header_main"/><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v7.widget.RecyclerViewandroid:id="@+id/drawer_slidermenu"android:layout_width="fill_parent"android:layout_height="match_parent"android:layout_marginTop="16dp"/></RelativeLayout></LinearLayout></android.support.design.widget.NavigationView>

只是你必须记住把你的 NavigationView 放在 DrawerLayout

然后我使用 ImageView 和 TextView 这个布局为菜单项创建布局，这个名称是 card_drawer_item.xml 并且它的代码在这里

<图像视图android:id="@+id/drawer_icon"android:layout_width="25dp"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_marginLeft="12dp"机器人:layout_marginRight="12dp"android:src="@drawable/ic_about"android:layout_centerVertical="true"/><文本视图android:id="@+id/drawer_text"android:layout_width="wrap_content"android:layout_height="match_parent"android:layout_toLeftOf="@id/drawer_icon"android:minHeight="?android:attr/listPreferredItemHeightSmall"android:textAppearance="?android:attr/textAppearanceListItemSmall"机器人:重力=center_vertical"机器人:字体=sans"android:paddingRight="40dp"/></RelativeLayout>

然后我为此布局创建 ViewHolder 文件夹.

public class DrawerItemHolder extends RecyclerView.ViewHolder {公共 ImageView itemIcon;公共 TextView itemText;公共 DrawerItemHolder(查看 itemView){超级(项目视图)；itemIcon= (ImageView) itemView.findViewById(R.id.drawer_icon);itemText = (TextView) itemView.findViewById(R.id.drawer_text);}}

现在我将菜单项的文本定义为字符串数组和包含 strings.xml 中菜单中菜单图标的数组

<item>设置</item><item>添加记录</item><item>广告</item><item>关于</item><item>调用</item><item>帮助</item><item>隐私</item></字符串数组><array name="drawers_icons"><item>@drawable/ic_action_settings</item><item>@drawable/ic_plus</item><item>@drawable/ic_ads</item><item>@drawable/ic_about</item><item>@drawable/ic_phone</item><item>@drawable/ic_help</item><item>@drawable/ic_policy</item></阵列>

那么我们只需要一个像这样的Adapter

public class DrawerItemAdapter extends RecyclerView.Adapter{//滑动菜单项私人列表项目;私人列表<整数>抽屉图标；公共 DrawerItemAdapter(List items) {极好的();this.items = 物品；}@覆盖public DrawerItemHolder onCreateViewHolder(ViewGroup parent, int viewType) {查看 itemView = LayoutInflater.从(parent.getContext()).膨胀(R.layout.card_drawer_item，父，假)；返回新的 DrawerItemHolder(itemView);}@覆盖公共无效 onBindViewHolder(DrawerItemHolder 持有人，int 位置){holder.itemIcon.setImageResource(items.get(position).getIconId());holder.itemText.setText(items.get(position).getText());}@覆盖公共 int getItemCount() {返回 items.size();}}

一切正常..刚才我们必须在Activity中设置NavigationView.

protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_search);工具栏工具栏 = (工具栏) findViewById(R.id.toolbar);setSupportActionBar(工具栏);drawer = (DrawerLayout) findViewById(R.id.drawer_layout);recList = (RecyclerView) findViewById(R.id.drawer_slidermenu);recList.setHasFixedSize(true);LinearLayoutManager llm = new LinearLayoutManager(this);llm.setOrientation(LinearLayoutManager.VERTICAL);recList.setLayoutManager(llm);String []itemsTitle=getResources().getStringArray(R.array.drawer_items);TypedArray 图标=getResources().obtainTypedArray(R.array.drawers_icons);ListdrawerItems= new ArrayList();for(int i=0;i

How to do add custom layout in NavigationView and design my create custom NavigationView use material design,i want put my drawer icon to right and text left of it something like this

解决方案

I Search too much and this is my experience that works fine

at first create layout for header. its name is nav_header_main.xml then put it in layouts folders in res and put this code in it..

<?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="@dimen/nav_header_height"
    android:background="@drawable/header"
    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="top">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"

        android:padding="16dp">
        <de.hdodenhof.circleimageview.CircleImageView
            android:id="@+id/cv_nave_profile_image"
            android:layout_width="@dimen/nav_profile_image"
            android:layout_height="@dimen/nav_profile_image"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:src="@drawable/profile"
            />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@id/cv_nave_profile_image"
            android:layout_alignParentTop="true"
            android:padding="@dimen/activity_horizontal_margin"
            android:orientation="vertical"

            >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/tv_nav_name"
                android:textStyle="bold"
                android:typeface="sans"
                android:textColor="#ffffff"
                android:gravity="right"
                android:layout_gravity="right"
                android:text="رخداد جدید"
                android:paddingBottom="5dp"
                android:textSize="@dimen/body"
                />

        </LinearLayout>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:typeface="sans"
            android:textColor="#ffffff"
            android:id="@+id/tv_nav_phone"
            android:layout_alignParentLeft="true"
            android:text="0370077315"
            />

    </RelativeLayout>


</LinearLayout>

then i include it as child of NavigationView and For menu item i use RecyclerView to show menu and icon so my NavigationView is

<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="spydroid.ir.dorobar.Activities.SearchActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay">


        </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

    <include layout="@layout/content_search" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@android:drawable/ic_dialog_email" />

</android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.NavigationView android:id="@+id/nav_view"
    android:layout_width="fill_parent" android:layout_height="match_parent"
    android:layout_gravity="right" android:fitsSystemWindows="true"
    android:layout_marginLeft="@dimen/nav_margin"
    >
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        >
        <include layout="@layout/nav_header_main" />
        <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <android.support.v7.widget.RecyclerView
                android:id="@+id/drawer_slidermenu"
                android:layout_width="fill_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="16dp"/>

        </RelativeLayout>
    </LinearLayout>

</android.support.design.widget.NavigationView>

just you have to remember put your NavigationView in DrawerLayout

then i create layout for menu item with ImageView and TextView this layout and this name is card_drawer_item.xml and its code is here

<?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="48dp">

    <ImageView
        android:id="@+id/drawer_icon"
        android:layout_width="25dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="12dp"
        android:layout_marginRight="12dp"
        android:src="@drawable/ic_about"
        android:layout_centerVertical="true" />

    <TextView
        android:id="@+id/drawer_text"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_toLeftOf="@id/drawer_icon"
        android:minHeight="?android:attr/listPreferredItemHeightSmall"
        android:textAppearance="?android:attr/textAppearanceListItemSmall"
        android:gravity="center_vertical"
        android:typeface="sans"
        android:paddingRight="40dp"/>

</RelativeLayout>

then i create ViewHolder folder for this layout.

public class DrawerItemHolder extends RecyclerView.ViewHolder {

    public ImageView  itemIcon;
    public TextView itemText;
    public DrawerItemHolder(View itemView) {
        super(itemView);
        itemIcon= (ImageView) itemView.findViewById(R.id.drawer_icon);
        itemText= (TextView) itemView.findViewById(R.id.drawer_text);
    }
}

now i define text of menu items as string array and array that contains menu icons in menu in strings.xml

<string-array name="drawer_items">
        <item>setting</item>
        <item>add record</item>
        <item>ads</item>
        <item>about</item>
        <item>call</item>
        <item>help</item>
        <item>privacy</item>
    </string-array>
    <array name="drawers_icons">
        <item>@drawable/ic_action_settings</item>
        <item>@drawable/ic_plus</item>
        <item>@drawable/ic_ads</item>
        <item>@drawable/ic_about</item>

        <item>@drawable/ic_phone</item>
        <item>@drawable/ic_help</item>
        <item>@drawable/ic_policy</item>
    </array>

then we just need an Adapter like this

public class DrawerItemAdapter extends RecyclerView.Adapter<DrawerItemHolder> {

    // slide menu items
    private List<DrawerItem> items;
    private List<Integer> drawerIcons;
    public DrawerItemAdapter(List<DrawerItem>  items) {
        super();
        this.items = items;


    }

    @Override
    public DrawerItemHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View itemView = LayoutInflater.
                from(parent.getContext()).
                inflate(R.layout.card_drawer_item, parent, false);

        return new DrawerItemHolder(itemView);
    }

    @Override
    public void onBindViewHolder(DrawerItemHolder holder, int position) {
        holder.itemIcon.setImageResource(items.get(position).getIconId());
        holder.itemText.setText(items.get(position).getText());
    }

    @Override
    public int getItemCount() {
        return items.size();
    }
}

every thing is ok .. just now we have to set NavigationView in Activity.

protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_search);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
           drawer = (DrawerLayout) findViewById(R.id.drawer_layout);

           recList = (RecyclerView) findViewById(R.id.drawer_slidermenu);
        recList.setHasFixedSize(true);
        LinearLayoutManager llm = new LinearLayoutManager(this);
        llm.setOrientation(LinearLayoutManager.VERTICAL);
        recList.setLayoutManager(llm);

        String []itemsTitle=getResources().getStringArray(R.array.drawer_items);
        TypedArray icons=getResources().obtainTypedArray(R.array.drawers_icons);
        List<DrawerItem>drawerItems= new  ArrayList<DrawerItem>();
        for(int i=0;i<itemsTitle.length;i++){
                drawerItems.add(new DrawerItem(icons.getResourceId(i,-1),itemsTitle[i]));
        }

        DrawerItemAdapter ad= new DrawerItemAdapter(drawerItems);
        recList.setAdapter(ad);

    }

     @Override
    public void onBackPressed() {

        if (drawer.isDrawerOpen(GravityCompat.END)) {
            drawer.closeDrawer(GravityCompat.END);
            return;
        }
        super.onBackPressed();
    }

这篇关于在带有标题和列表的 NavigationDrawer 中使用自定义布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！