繁体   English   中英

BottomNavigationView的同等空间菜单项

[英]Equally space menu items of BottomNavigationView

我正在使用BottomNavigationView (从现在开始在BNV上)在Fragments之间切换,但是我找不到XML属性,或者找不到一种方法来使所有项目(图像)等距分布,以便它们填充所有设备的整个宽度。

活动的我的XML同时包含BNV(请原谅不好的颜色,只是为了使其更清楚):

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".Navigation">

    <!--Toolbar-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="fill_parent"
        android:layout_height="50dp"
        android:background="@color/main_light_blue"
        app:titleTextColor="@color/white"
        android:elevation="4dp" />

    <FrameLayout 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/main_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginStart="0dp"
        android:layout_marginTop="50dp"
        android:layout_marginBottom="57dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        tools:context="MainActivity">
    </FrameLayout>

    <!--BNV-->
    <android.support.design.widget.BottomNavigationView
        android:id="@+id/footer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="0dp"
        app:elevation="0dp"
        app:itemBackground="@android:color/holo_orange_dark"
        android:background="@android:color/holo_orange_dark"
        app:itemIconTint="@color/black"
        app:itemTextColor="@color/black"
        app:menu="@menu/footer" />

</RelativeLayout>

菜单项:

<?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/bacheca"
        android:title="@string/bacheca"
        app:showAsAction="always"
        android:icon="@drawable/bacheca_home"
    />

    <item
        android:id="@+id/cerca"
        android:title="@string/cerca"
        app:showAsAction="always"
        android:icon="@drawable/search_black_24dp"
        />

    <item
        android:id="@+id/nuovo"
        android:title="@string/nuovo"
        android:icon="@drawable/new_post_outlined"
        app:showAsAction="always"
    />

    <item
        android:id="@+id/profilo"
        android:title="@string/profilo"
        android:icon="@drawable/account_circle_black_24dp"
        app:showAsAction="always"
    />

</menu>

整个活动在手机上如下所示:

在此处输入图片说明

并在平板电脑上像这样:

在此处输入图片说明

希望有人可以帮助我。

编辑 :感谢用户@GoRoS解决了BNV左右边缘有空白的问题。 只需在BNV中添加android:background="@android:color/holo_orange_dark"即可解决。

在引用背景色时,您只是在混合概念。

app:itemBackground =每个菜单项的默认背景。

android:background =一个可绘制对象,用作视图的背景。

Android会为您拥有的每个菜单项正确填充holo_orange_dark颜色,但这并不意味着它将填满整个行。 为此,只需使用常规的android:background属性即可。

android:background="@android:color/holo_orange_dark"行添加到BottomNavigationView ,效果就是BottomNavigationView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
        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:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".Navigation">

    <!--Toolbar-->
    <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:background="@color/colorPrimary"
            app:titleTextColor="@color/white"
            android:elevation="4dp" />

    <FrameLayout 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/main_container"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:layout_alignParentStart="true"
                 android:layout_alignParentTop="true"
                 android:layout_marginStart="0dp"
                 android:layout_marginTop="50dp"
                 android:layout_marginBottom="57dp"
                 app:layout_behavior="@string/appbar_scrolling_view_behavior"
                 tools:context=".Navigation">
    </FrameLayout>

    <!--BNV-->
    <android.support.design.widget.BottomNavigationView
            android:id="@+id/footer"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_marginBottom="0dp"
            android:background="@android:color/holo_orange_dark"
            app:elevation="0dp"
            app:itemBackground="@android:color/holo_orange_dark"
            app:itemIconTint="@color/black"
            app:itemTextColor="@color/black"
            app:menu="@menu/footer" />

</RelativeLayout>

这是您添加该行的内容:

具有背景属性的结果

相反,如果将其删除,则结果是您原来的问题:

没有背景属性的结果

好吧,我设法自己找到了解决方案,解决这个问题的XML属性是

app:itemHorizontalTranslation="false"

默认为true 这会“扩展”项目以适合整个宽度。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM