当前位置: 首页 > 知识库问答 >
问题:

在带有页眉和列表的NavigationDrawer中使用自定义布局

勾安翔
2023-03-14

如何在NavigationView中添加自定义布局并设计我创建自定义NavigationView使用材料设计,我想将我的抽屉图标放在右边,文本放在左边,如下所示

共有1个答案

扶开诚
2023-03-14

我搜索了太多,这是我的经验很好

首先为标题创建布局。它的名称是nav_header_main.xml,然后将它放入res中的layouts文件夹中,并将此代码放入其中。

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

然后我将它作为NavigationView的子项包括在内,对于菜单项,我使用RecyclerView来显示菜单和图标,因此我的NavigationView

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

只是您必须记住将NavigationView放入DrawerLayout

然后我用ImageViewTextView为菜单项创建布局,这个布局的名称是Card_Drawer_Item.xml,它的代码在这里

<?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>
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);
    }
}
<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>
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();
    }
}

一切都很好..刚才我们要在活动中设置NavigationView。

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();
    }
 类似资料:
  • 我第一次尝试在request angular js中添加customer头,但遇到以下错误 Angular.js:10671错误:在“XMLHttpRequest”上执行“set requestheader”失败:“x-api-key:”不是有效的HTTP标头字段名。 下面是我的代码,在最高的“应用程序”级别: 我做错了什么/错过了什么/不明白什么?我如何将这个头添加到所有(甚至一个)请求中?

  • 问题内容: 我最近一直在研究CSS布局,该布局将显示固定宽度(最小宽度,最好可扩展)的单个居中列,占据整个高度(减去页眉和页脚)。 有什么建议吗?我已经尝试过这里发布的几种方法,但是没有一种符合我的标准。另外,我不想为此使用JS,因此它必须是纯CSS。 我不是专家,所以我不知道采用哪种方法: 三列,每列的边距减去中心列宽度的一半再加上一个假的中心列,以拉伸到100%的高度?我有点不喜欢这个想法,因

  • 显示WooCommerce产品列表,除了默认方式或使用WooCommerce Shortcode外,还可以使用自定义查询,利用wc_get_products()函数,本文介绍的方法可以实现带分页的WooCommerce自定义产品列表,既可以直接嵌入模板,也能做成shortcode在任何地方使用。 WooCommerce Custom Product Loop代码 下面的代码定义了一个模板标签sol

  • 所以我正在创建一个列表视图,其中每一行都有一个Imageview(用于预览图像)、一个textView和一个按钮(用于删除图像)。 问题: 单击该项目的 但有时代码工作正常,有时只是显示错误的项目编号。 更新: 我忘了补充,文本视图中显示的值是:“标志:#”其中#是该项目的当前计数号。我不能理解的总是正确的,但不是我得到的祝酒词: s 背景工作: 页面顶部有一个按钮,用户可以通过该按钮单击照片,当

  • 我在jasper报告中使用了这个表。当我把表放在详细信息部分时,它重复了这个表,所以我把它放在摘要带上。我也想在我的报告中添加页脚。 我怎么做这个jasper报告5.5?

  • 问题内容: 静态HTML /XHTML是否有一种不错的方法来创建要显示在网站的每个页面上的通用页眉/页脚文件?我知道您显然可以使用PHP或服务器端指令来执行此操作,但是有没有办法完全不依赖服务器将所有内容拼接在一起呢? 编辑:所有非常好的答案,这是我所期望的。HTML是静态的。没有运行服务器端或客户端的东西,没有真正的方法来改变它。我发现Server Side Includes似乎是我最好的选择,