将自定义视图与导航抽屉左侧对齐

时间:2018-02-08 11:32:26

标签: android

正如您所看到的那样,自定义布局位于右侧,经过一些研究后,我发现空白区域是为项目的图标和文本保留的。 有没有办法删除该空白区域并将自定义布局对齐到左边?

image

我正在使用菜单填充导航视图,如下所示:

<?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:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <android.support.design.widget.NavigationView
        android:id="@+id/nav1"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/nav_drawer_items"
        app:itemBackground="@color/app_bg_color"
        app:itemIconTint="@color/text_white"
        app:itemTextColor="@color/text_white"
        android:background="@color/bottom_navigation_color"
        android:fitsSystemWindows="true"
        android:theme="@style/NavigationView" />
</android.support.v4.widget.DrawerLayout>

nav_drawer_items

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
    android:id="@+id/tabs"
    android:title="MAIN">
    <menu>
        <item
            android:id="@+id/nav_highlights"
            android:icon="@drawable/icon_home"
            android:title="@string/nav_home"
            android:checkable="true"/>
        <item
            android:id="@+id/nav_movies"
            android:icon="@drawable/icon_movie"
            android:title="@string/nav_movies"
            android:checkable="true"/>
        <item
            android:id="@+id/nav_originals"
            android:icon="@drawable/icon_original"
            android:title="@string/nav_originals"
            android:checkable="true"/>

        <item
            android:id="@+id/nav_live_tv"
            android:icon="@drawable/icon_live"
            android:title="@string/nav_live_tv"
            android:checkable="true"/>
    </menu>

</item>

<item
    android:id="@+id/support"
    android:title="SUPPORT">
    <menu>
        <item
            android:id="@+id/nav_about_us"
            android:icon="@drawable/icon_about"
            android:title="@string/nav_about_us"
            android:checkable="true"/>
        <item
            android:id="@+id/nav_feedback"
            android:icon="@drawable/icon_feedback"
            android:title="@string/nav_feedback"
            android:checkable="true"/>
        <item
            android:id="@+id/nav_setting"
            android:icon="@drawable/icon_setting"
            android:title="@string/nav_setting"
            android:checkable="true"/>
        <item
            android:id="@+id/nav_logout"
            android:icon="@drawable/icon_logout"
            android:title="@string/nav_logout"
            android:checkable="true"/>
    </menu>
</item>

<item
    android:id="@+id/connect_us"
    android:title="Connect with us">
    <menu>
        <item
            android:id="@+id/social_items"
            android:checkable="true"
            app:showAsAction="always"
            android:title=""
            app:actionLayout="@layout/connect_us"/>
    </menu>
</item>

</menu>

在菜单中,您可以看到我在最后一项中使用 app:actionLayout 进行布局。这是 connect_us.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="match_parent"
android:background="@color/app_bg_color"
android:orientation="horizontal"
android:gravity="start">

    <ImageView
        android:id="@+id/connect_youtube"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/youtube_icon"
        android:layout_marginLeft="20dp"
        android:layout_marginStart="20dp"
        android:padding="5dp" />
    <ImageView
        android:id="@+id/connect_facebook"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/facebook_icon"
        android:padding="5dp"/>
    <ImageView
        android:id="@+id/connect_twitter"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/twitter_icon"
        android:padding="5dp"/>

</LinearLayout>

3 个答案:

答案 0 :(得分:0)

根据我的工作情况更改您的代码。以RelativeLayout为父级(仅使用 connect_us.xml 进行更改):

enter image description here

<强> connect_us.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="wrap_content"
    android:orientation="horizontal"
    android:background="#FFFFFF"
    android:gravity="left">

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

        <ImageView
            android:id="@+id/connect_youtube"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@mipmap/ic_launcher"
            android:padding="5dp" />
        <ImageView
            android:id="@+id/connect_facebook"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@mipmap/ic_launcher"
            android:padding="5dp"/>
        <ImageView
            android:id="@+id/connect_twitter"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:src="@mipmap/ic_launcher"
            android:padding="5dp"/>
    </LinearLayout>


</RelativeLayout>

第二个解决方案:

main_activity.xml 中(修复导航抽屉的宽度)

我在这里用过  android.support.design.widget.NavigationViewandroid:layout_width="320dp"我知道它不是解决layout_width的正确解决方案。

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

connect_us.xml 布局也设置了layout_width = "320dp"

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="320dp"
android:layout_height="match_parent"
android:background="@color/app_bg_color"
android:orientation="horizontal"
android:gravity="start">

    <ImageView
        android:id="@+id/connect_youtube"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/youtube_icon"
        android:layout_marginLeft="20dp"
        android:layout_marginStart="20dp"
        android:padding="5dp" />
    <ImageView
        android:id="@+id/connect_facebook"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/facebook_icon"
        android:padding="5dp"/>
    <ImageView
        android:id="@+id/connect_twitter"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:src="@drawable/twitter_icon"
        android:padding="5dp"/>

</LinearLayout>

答案 1 :(得分:0)

尝试在NestedScrollView中添加导航视图和自定义布局(connect_us),如下所示: -

<android.support.v4.widget.DrawerLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <android.support.design.widget.NavigationView
            android:id="@+id/nav1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="start"
            android:background="@color/bottom_navigation_color"
            android:fitsSystemWindows="true"
            android:theme="@style/NavigationView"
            app:headerLayout="@layout/nav_header"
            app:itemBackground="@color/app_bg_color"
            app:itemIconTint="@color/text_white"
            app:itemTextColor="@color/text_white"
            app:menu="@menu/nav_drawer_items" />

        <include
            android:id="@+id/footer_layout"
            layout="@layout/connect_us"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>
</android.support.v4.widget.DrawerLayout>

此外,请确保禁用NavigationView的子项的嵌套滚动,如下所示: -

ViewCompat.setNestedScrollingEnabled(navigationView.getChildAt(0), false);

答案 2 :(得分:0)

我在导航视图中找到了此用途recyclerview的解决方案,并将您的视图添加到recyclerview并创建适配器:

<?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:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">

    <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="320dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include
                android:id="@+id/my"
                layout="@layout/nav_header_main" />

            <android.support.v7.widget.RecyclerView
                android:id="@+id/rvNavMenu"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginTop="10dp"
                android:layout_weight="7"
                android:overScrollMode="never" />
        </LinearLayout>
    </android.support.design.widget.NavigationView>


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