我如何填写抽屉布局

时间:2016-12-27 09:14:30

标签: android material-design drawerlayout

enter image description here

我为headerView设计了我的布局,并希望在其右侧添加图像图标,就像照片一样。

问题在于它会显示图像中的空格,即使我删除了图像布局,空间仍然存在。

我尝试更改父布局或子布局的布局宽度,任何参数,如数学父级或换行内容,或者给出一个dp。

我尝试使用官方演示来修复它,但它没有用。

有人能教我怎么做吗?

enter image description here enter image description here

我的nav_heafer.xml:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:background="#66CDAA"
    android:orientation="horizontal">
    <!--the left navigationView-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="16dp">
            <!--the left icon-->
            <ImageView
                android:id="@+id/imageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="16dp"
                app:srcCompat="@drawable/ic_grid_on_black_24dp" />
            <!--the left textView-->
            <TextView
                android:id="@+id/logIn"
                android:textColor="@android:color/background_light"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/pageLogIn"
                android:background="?android:attr/selectableItemBackground"
                android:clickable="true"/>
            <!--the left button-->
            <Button
                android:id="@+id/logOut"
                android:text="@string/logOut"
                android:layout_width="65dp"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </LinearLayout>
    <!--I just want a outstanding icon over here,on the right side of navigationView-->
    <!--I try add the LinearLayout,but it shows strange-->
</LinearLayout>


  [1]: https://i.stack.imgur.com/hQy1d.png
  [2]: https://i.stack.imgur.com/E9jyu.png

我的MainActivity xml:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="false"
    tools:context="com.example.user.taiwandigestionsociety_v11.MainActivity">


    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#FFFFFF">



        <android.support.v7.widget.Toolbar
            android:id="@+id/toolBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:theme="@style/ToolBarStyle"
            app:layout_scrollFlags="scroll|enterAlways"
            android:background="@color/colorPrimary">
        </android.support.v7.widget.Toolbar>

        <FrameLayout
            android:id="@+id/mainFrame"
            android:layout_gravity="end"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>

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


    <!--control navigationView width-->
<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="230dp"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    android:background="@android:color/white"
    android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header"
    app:menu="@menu/drawer_menu">
</android.support.design.widget.NavigationView>


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

2 个答案:

答案 0 :(得分:0)

好吧,最后我明白你的问题并解决了。这应该给你一些类似下面的内容。 navigation panel

所以让我们开始吧!

首先,您要删除图标后面的白色背景,因此请在导航视图中设置透明背景,如下所示。

<android.support.design.widget.NavigationView
    android:id="@+id/navigation_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"

    <!-- it works as transparent background color -->
    android:background="@android:color/transparent"

    app:headerLayout="@layout/navigation_header_support" />

对于您的自定义标题,您应该将相对布局用作父级,因为您希望关闭图标位于导航面板的最右侧。所以我们可以根据父母对齐那个关闭的图标。这次将背景颜色设置为相对父布局的直接子项,就像我对线性布局所做的那样。

为了使图标适合相对布局,请在右侧留出一些边距用于线性布局,因此剩余的右边距空间将被您的图标占用。设置与图标相同的宽度,从右侧推动线性布局。在这里,我从右边留下32dp的边距,并设置我的图标的宽度以匹配它。

对于该图标的正确位置,我使用了以下属性。你应该调整你的。

android:layout_alignParentRight="true"
android:layout_alignParentTop="true"

nav_header.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="match_parent">



        <LinearLayout
            android:paddingTop="64dp"

            <!-- background color -->
            android:background="@color/blue_2"

            android:layout_marginRight="32dp"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <TextView
                android:textColor="@android:color/white"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/activity_horizontal_margin"
                android:drawableLeft="@drawable/ic_pin_primary"
                android:drawablePadding="@dimen/activity_horizontal_margin"
                android:drawableStart="@drawable/ic_pin_primary"
                android:gravity="center_vertical"
                android:typeface="normal"
                android:textSize="18sp"
                android:text="Location"
                android:textStyle="bold" />

            <!-- Other items go here -->
        </LinearLayout>


        <ImageView
            android:background="@color/blue_2"
            android:layout_alignParentRight="true"
            android:layout_marginTop="64dp"
            android:layout_alignParentTop="true"
            android:src="@drawable/ic_pencil"
            android:layout_width="32dp"
            android:layout_height="32dp" />

    </RelativeLayout>

答案 1 :(得分:0)

好吧,这不是你问题的答案。但是你可以改善你的布局和性能。然后根据此更改问题中的导航布局,并再次更新您的问题。然后它可以更容易理解你的问题。所以任何人都可以轻松回答

相反,使用图标和textView水平方向的线性布局,您可以改为如下所示。

  

您当前的实施:

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

        <ImageView
            android:id="@+id/imageView9"
            android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:srcCompat="@drawable/ic_grid_on_black_24dp" />

        <TextView
            android:id="@+id/newInformation"
            android:textSize="15dp"
            android:layout_marginLeft="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/newInformation"
            android:textColor="@android:color/background_light"/>

    </LinearLayout>
  

现在将其改为:

<TextView
    android:id="@+id/person_address"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"

    <!-- this is where your icon goes -->
    android:drawableLeft="@drawable/ic_grid_on_black_24dp"
    android:drawableStart="@drawable/ic_grid_on_black_24dp"

    <!-- your icon's padding -->
    android:drawablePadding="@dimen/activity_horizontal_margin"

    android:gravity="center_vertical" />

请将您的布局更改为此类型,然后我可以尝试回答您的问题。