布局图像位于DrawerLayout内的NavigationView顶部

时间:2017-07-03 03:23:16

标签: android android-layout view navigation-drawer

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

<?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,以及没有运气的androidview的重力。如何将此imageview布局到navigationView中菜单项的上方?

5 个答案:

答案 0 :(得分:2)

  

您可以创建,而不是在ImageView内添加NavigationView   标题的另一种布局,并使用它将其设置为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>

enter image description here

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

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

<强>输出:

enter image description here

希望这会有所帮助〜

答案 1 :(得分:0)

您可以像这样

动态地从代码中充气
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内。

答案 2 :(得分:0)

右键单击项目 - &gt;新 - &gt;活动 - &gt;导航抽屉活动,你会看到一个足以了解如何实现它的样本。

简而言之,添加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"/>

答案 3 :(得分:0)

嗨,你可以这样给,

布局/ 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"
         />

答案 4 :(得分:0)

您好,您可以在导航视图中放置布局并设置图像然后它可以正常工作

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