android 在BottomNavigationView中的选定选项卡周围添加环形

7hiiyaii  于 2023-04-10  发布在  Android
关注(0)|答案(2)|浏览(203)

有没有一种方法可以使用BottomNavigationView在选定的标签上放一个环,就像Instagram在点击个人资料标签时所做的那样?
在这种情况下,个人资料选项卡在照片周围有一个灰色的环。

h43kikqp

h43kikqp1#

是的,可以在BottomNavigationView中的所选标签周围添加一个环,类似于Instagram在单击个人资料标签时的操作方式。实现此目的的一种方法是为BottomNavigationView创建自定义可绘制对象并将其设置为背景。下面是如何做到这一点的示例:
在项目的drawable文件夹中创建名为selector_bottom_navigation_view. xml的新可绘制资源文件。
将以下代码添加到selector_bottom_navigation_view. xml文件中:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true">
    <shape android:shape="oval">
        <stroke android:width="4dp" android:color="@color/colorPrimary" />
        <solid android:color="@color/colorAccent" />
        <size android:width="24dp" android:height="24dp" />
    </shape>
</item>

这将创建一个选择器,该选择器将在所选选项卡周围绘制一个带有描边和纯色的椭圆形,并将椭圆形的大小设置为24 dp x 24 dp。
将BottomNavigationView的背景设置为布局文件中的selector_bottom_navigation_view可绘制对象:

<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/selector_bottom_navigation_view"
app:menu="@menu/bottom_navigation_menu" />

您可以通过更改selector_bottom_navigation_view. xml文件中的android:colorPrimary和android:colorAccent的值来自定义笔划和纯色的颜色。就是这样!现在,当选择一个选项卡时,它将被高亮显示,并在其周围显示一个圆圈。

vfwfrxfs

vfwfrxfs2#

您将app:itemBackground设置为选中的状态选择器,该状态选择器具有居中的椭圆形状
选择器:drawable/rounded_selector

<?xml version="1.0" encoding="utf-8"?>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <layer-list>
            <item android:gravity="center">
                <shape android:shape="oval">
                    <size android:width="35dp" android:height="35dp" />
                    <stroke android:width="3dp" android:color="@android:color/darker_gray" />
                </shape>
            </item>
        </layer-list>
    </item>
</selector>

并将其设置为BottomNavigationView

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    app:itemBackground="@drawable/rounded_selector"
    app:labelVisibilityMode="unlabeled" />

编辑

如果你只想让其中一个标签显示圆圈选择器,你会怎么做?就像instagram只对个人资料做的那样。
您可以通过将可绘制层组合到LayerDrawable中来将其设置为菜单项,然后将其设置回菜单项:
可绘制/圆形边界

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke android:width="8dp" />
    <solid android:color="@android:color/transparent" />
    <size
        android:width="200dp"
        android:height="200dp" />
</shape>

在代码中:

val item = bottomNavView.menu.findItem(R.id.profile_item) // change to the id of the profile item

val border = ResourcesCompat.getDrawable(
    resources,
    R.drawable.circle_border, null
) as GradientDrawable
val layerDrawable = LayerDrawable(arrayOf(item.icon, border))
item.icon = layerDrawable

相关问题