DrawerLayout 内 NavigationView 顶部的布局图像答案

【问题标题】：Layout Image at the top of NavigationView inside DrawerLayoutDrawerLayout 内 NavigationView 顶部的布局图像
【发布时间】：2017-07-03 03:23:16
【问题描述】：

我在 DrawerLayout 中有一个 NavigationView，NavigationView 为来自屏幕左侧的抽屉提供布局。我使用它是为了向后兼容，我需要在顶部有一个图像，就像你通常在导航抽屉中一样。我已向 NavigatonView 添加了一个图像视图，但该图像视图位于我的抽屉中间。我需要它在菜单项上方的顶部。这是我的示例代码...

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:aapp="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/image_background">

    <!-- This LinearLayout represents the contents of the screen  -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <!-- The ActionBar displayed at the top -->
        <include
            layout="@layout/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <!-- The main content view where fragments are loaded -->
        <FrameLayout
            android:id="@+id/flContent"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>

    <!-- The navigation drawer that comes from the left -->
    <!-- Note that `android:layout_gravity` needs to be set to 'start' -->
    <android.support.design.widget.NavigationView
        android:id="@+id/nvView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="?attr/colorPrimaryDark"
        app:menu="@menu/menu_main"
        app:itemTextColor="@color/text_field_font_color">

        <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/nav_header"
                android:gravity="top"
                android:src="@drawable/nav_header"/>


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


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

我尝试更改 android:layout_gravity 和 imageview 的 android:gravity，但没有成功。如何让这个 imageview 布局在 navigationView 的菜单项之上？

【问题讨论】：

标签： android android-layout view navigation-drawer

【解决方案1】：

您可以在NavigationView 中添加ImageView 标题的另一个布局并将其设置为NavigationView 使用属性app:headerLayout。

1. 根据您的需要使用ImageView 和其他小部件创建布局。在这里，我使用ImageView 和两个TextView's 创建了标题布局。

nav_header_main.xml

<?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:orientation="vertical"
    android:background="@color/colorAccent"
    android:padding="16dp"
    android:gravity="center_vertical">

    <ImageView
        android:id="@+id/nav_header"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="@dimen/nav_header_vertical_spacing"
        android:text="Android Studio"
        android:textSize="18sp"
        android:textColor="#ffffff" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="android.studio@android.com"
        android:textSize="14sp"
        android:textColor="#ffffff" />

</LinearLayout>

2. 使用属性app:headerLayout="@layout/nav_header_main" 将布局nav_header_main 添加到NavigationView 作为标题布局。

<android.support.design.widget.NavigationView
    android:id="@+id/nvView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="?attr/colorPrimaryDark"
    app:menu="@menu/menu_main"
    app:itemTextColor="@color/text_field_font_color"
    app:headerLayout="@layout/nav_header_main">

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

输出：

希望对你有所帮助~

【讨论】：

这太棒了。它工作得很好。谢谢你的详细回答。

【解决方案2】：

你可以像这样从代码中动态膨胀

navigationView = (NavigationView) findViewById(R.id.NAV_ID_HERE);
View headerView = navigationView.inflateHeaderView(R.layout.nav_header);

您可以在 nav_header.xml 中输入image 或任何您喜欢的内容。

从您的主 xml 文件中删除您的 ImageView 并将其放入 nav_header.xml 中。

【讨论】：

【解决方案3】：

只需右键单击项目->新建->活动->导航抽屉活动，您将看到一个足以理解如何实现它的示例。

简而言之，添加 app:headerLayout 而不是

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main"
    app:menu="@menu/activity_main_drawer"/>

【讨论】：

这可以使图像成为标题，但是现在标题位于屏幕中间，并且上下都有很大的空白。

【解决方案4】：

你好，你可以这样给，

布局/nav_header_layout.xml

<?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="@color/white"
    android:gravity="bottom"
    android:orientation="vertical"
    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">

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

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:src="@mipmap/ic_launcher" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/imageView"
            android:layout_centerHorizontal="true"
            android:text="@string/app_name"
            android:textAppearance="@style/TextAppearance.AppCompat.Body1"
            android:textColor="@color/primaryTextColor"
            android:textSize="16sp"
            android:textStyle="bold" />

    </RelativeLayout>


</LinearLayout>

您可以像这样在导航布局中添加它，

<android.support.design.widget.NavigationView
        android:id="@+id/nvView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="?attr/colorPrimaryDark"
        app:menu="@menu/menu_main"
        app:itemTextColor="@color/text_field_font_color"
        app:headerLayout="@layout/nav_header_layout"
         />

【讨论】：

【解决方案5】：

您好，您可以将布局放在导航视图中并设置图像，然后它就可以工作了

 <android.support.design.widget.NavigationView
    android:id="@+id/nvView"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="?attr/colorPrimaryDark"
    app:menu="@menu/menu_main"
    app:itemTextColor="@color/text_field_font_color">
  <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">    
          <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/nav_header"
            android:gravity="top"
            android:src="@drawable/nav_header"/>
     </RelativeLayout>

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

【讨论】：