【问题标题】:How to set full width for bottom navigation in Android如何在Android中为底部导航设置全宽
【发布时间】:2018-09-22 23:32:06
【问题描述】:

我正在使用 Android 应用程序,在此我想在将屏幕旋转到横向模式时为底部导航选项卡设置全宽。

activit_main.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    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/Conslayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"

        android:animateLayoutChanges="true"
        android:layoutMode="opticalBounds"
        android:background="?android:attr/windowBackground"

        app:itemBackground="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation"
        app:itemIconTint="@color/color_selector"
        app:itemTextColor="@color/color_selector" />

</android.support.constraint.ConstraintLayout>

在此视图中,我想将底部导航选项卡设置为完全与屏幕中的选项卡布局一样。

谢谢。

【问题讨论】:

    标签: android android-tablayout


    【解决方案1】:

    我有一个在横向模式下适合整个屏幕的 BottomNavigationView,我相信关键是将android:backgroundapp:itemBackground 设置为相同的颜色。
    这是我在横向模式下适合整个屏幕的 BottomNavigationView:

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/colorBottomBar"
        app:itemBackground="@color/colorBottomBar"
        app:itemIconTint="@drawable/bottom_navigation_toolbar"
        app:itemTextColor="@drawable/bottom_navigation_toolbar"
        app:menu="@menu/bottom_bar"/>
    

    编辑:
    我误解了你的问题,所以基本上你想拉伸你的按钮,我完全复制了你的布局,并在子文件夹values 的文件夹res 中创建了一个名为dimens.xml 的文件,在这个文件里面放这个:

    <resources xmlns:tools="http://schemas.android.com/tools">
        <dimen name="design_bottom_navigation_item_max_width" tools:override="true">600dp</dimen>
        <dimen name="design_bottom_navigation_active_item_max_width" tools:override="true">600dp</dimen>
    </resources>
    

    只需再次运行您的项目,按钮就会伸展。这是一个快速的解决方案,请务必查看this 答案,因为您需要照顾其他屏幕尺寸,此链接中的答案给出了完整而详细的解决方案。

    【讨论】:

    • 设置相同颜色后也与横向模式下宽度不匹配返回相同的结果
    • @Nikson 你是否也将宽度设置为match_parent?让我自己试试ConstraintLayout
    • 是的,我都添加了
    • @Nikson 我刚刚在ConstraintLayout 中尝试了你的值,它有效,你能提供整个activity_main.xml 文件吗?
    • @Nikson 请参考我的回答中的编辑,它应该可以工作。
    【解决方案2】:

    试试这个,它适用于我的移动设备和标签。只需设置您自己的颜色即可。

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:animateLayoutChanges="true"
        android:background="@color/light_blue_500"
        android:layoutMode="opticalBounds"
        android:theme="@style/BottomNavAppTheme"
        app:itemBackground="@color/light_blue_500"
        app:itemIconTint="@drawable/nav_item_color_state"
        app:itemTextColor="@drawable/nav_item_color_state"
        app:menu="@menu/bottom_navigation_main" />
    

    这是我的 nav_item_color_state.xml

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/white" android:state_enabled="true" />
        <item android:color="@color/colorPrimaryDark" android:state_enabled="false" />
    </selector>
    

    【讨论】:

      【解决方案3】:

      需要将宽度设置为

      "match_parent"
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多