logo标签列表

如何在Android中为底部导航栏设置顶部边框（如图所示）

androidandroid-layoutbottomnavigationview
9

在这里输入图片描述

在 Android 底部导航栏中，是否可以设置顶边框？如果可以的话，请告诉我该如何操作。我正在使用 Android 的新底部导航视图。 以下是我的代码：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
        <LinearLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_alignParentTop="true">
                <include
                    android:id="@+id/gamebar"
                    layout="@layout/gamebar_layout"
                    />
                <include
                    android:id="@+id/toolbar"
                    layout="@layout/toolbar_layout" />
        </LinearLayout>

        <!-- Let's add fragment -->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/app_bar_layout"
            android:layout_above="@+id/bottom_navigation"
            android:id="@+id/contentContainer"/>
        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_alignParentBottom="true"
            app:itemBackground="@color/BottomNavigationBgColor"
            app:itemIconTint="@color/CelestialBlue"
            app:itemTextColor="@color/CelestialBlue"
            app:menu="@menu/bottom_navigation_main" />
</RelativeLayout>
@FerdousAhamed：同样的答案已经被rafsanahmad007（使用视图）给出了，但我很欣赏你的努力。 - sunil kushwah
你的问题目前处于什么状态？ - Ferdous Ahamed
@FerdousAhamed：我正在寻找一些用于设置边框的XML属性，但我认为它们不存在。 - sunil kushwah
是的，没有设置顶部边框的属性。您必须使用其他视图/视图组来创建它。 - Ferdous Ahamed
如果您不想使用VIEW，那么可以通过另一种方式来实现。请查看我的更新答案。谢谢~ - Ferdous Ahamed
4个回答
19
你可以尝试这样做：在BottomNavigationView上方添加一个View元素。
<View
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:layout_above="@+id/bottom_navigation"
    android:background="#000000"></View>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/BottomNavigationBgColor"
    app:itemIconTint="@color/CelestialBlue"
    app:itemTextColor="@color/CelestialBlue"
    app:menu="@menu/bottom_navigation_main" />

在这里输入图像描述

通过View，我们可以做到这一点，但是否有其他方式，例如内置的XML属性来设置此边框？ - sunil kushwah
1
从文档中我没有找到任何XML属性。 - rafsanahmad007
12

  1. 使用XML定义背景可绘制对象：

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@color/colorPrimaryDark" />
        </shape>
    </item>
    <item android:top="1dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/colorWhite" />
        </shape>
    </item>
</layer-list>

  2. 用它作为背景与

    android:background="@drawable/myBackgroundBottomDrawer"
1
您可以通过创建一个新的 LinearLayout，并在顶部添加一个 View，然后将 android.support.design.widget.BottomNavigationView 放置在该顶部 View 下方来添加顶部边框。
以下是可行的代码。只需按照以下方式更新您的 XML 即可：
<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentTop="true">

        <include
            android:id="@+id/gamebar"
            layout="@layout/gamebar_layout"/>
        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar_layout" />
    </LinearLayout>

    <!-- Bottom Navigation Layout-->
    <LinearLayout
        android:id="@+id/layout_bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentBottom="true">

        <!-- Top Border -->
        <View
            android:layout_width="match_parent"
            android:layout_height="6dp"
            android:background="#FF0000"> 

        </View>

        <!-- BottomNavigationView -->
        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            app:itemBackground="@color/BottomNavigationBgColor"
            app:itemIconTint="@color/CelestialBlue"
            app:itemTextColor="@color/CelestialBlue"
            app:menu="@menu/bottom_navigation_main" />
    </LinearLayout>

    <!-- Let's add fragment -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/app_bar_layout"
        android:layout_above="@id/layout_bottom_navigation"
        android:id="@+id/contentContainer"/>

</RelativeLayout>

更新：如果您不使用View，则可以将属性android:layout_marginTop添加到android.support.design.widget.BottomNavigationView，并将背景颜色设置为android:background="#FF0000"以应用于LinearLayout。

<!-- Bottom Navigation Layout-->
    <LinearLayout
        android:id="@+id/layout_bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentBottom="true"
        android:background="#FF0000">

        <!-- BottomNavigationView -->
        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_marginTop="6dp"
            app:itemBackground="@color/BottomNavigationBgColor"
            app:itemIconTint="@color/CelestialBlue"
            app:itemTextColor="@color/CelestialBlue"
            app:menu="@menu/bottom_navigation_main" />
    </LinearLayout>

希望这可以帮助到您~
0

这是最新答案问题的修复版本，其中分隔线略微细。

  1. 使用XML定义背景绘制：

     <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:gravity="top">
         <shape android:shape="rectangle">
             <size android:height="1.0dip" />
             <solid android:color="@color/colorWhite" />
         </shape>
     </item>
 </layer-list>

  2. 将其作为背景使用：

     android:background="@drawable/bottom_navigation_view_background"
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接