其他分享
首页 > 其他分享> > android – BottomNavigationView – 阴影和涟漪效果

android – BottomNavigationView – 阴影和涟漪效果

作者:互联网

我很高兴一周前发布了BottomNavigationView,但是我遇到了一些问题,这些问题让我无法解决它,就像在BottomNavigationView上看到阴影一样,就像谷歌照片Android应用程序向我们展示的那样:

The shadow over Bottom Navigation Bar

如果我们点击Google相册菜单项,我们就会看到一个涟漪效果,就像图标和文字颜色(选中时)一样呈蓝色.

仅实施Google提供的解决方案会显示灰色波纹效果颜色,更糟糕的是,当我们更改bottomnavigationview(design:itemBackground =“…”)的背景颜色时,它不会显示.

有人知道怎么解决吗?

解决方法:

这是我取得的成就:

Ripple effect + Elevation gif

我创建了一个demo on GitHub来帮助你.

首先使用最新的支持库编译“com.android.support:design:$SUPPORT_VERSION”

它只适用于你设置白色背景颜色android:background =“@ android:color / white”

请注意,如果您使用app:itemBackground属性,或者您的设计是:itemBackground =“…”,则涟漪效应将消失,因此请将其删除.

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:background="@android:color/white"
    app:elevation="16dp"
    app:itemIconTint="@drawable/nav_item_color_state"
    app:itemTextColor="@drawable/nav_item_color_state"
    app:menu="@menu/bottom_navigation_main" />

处理启用/禁用状态:

您需要创建选择器文件:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/colorPrimary" />
    <item android:color="@android:color/darker_gray"  />
</selector>

如果你想在AppTheme中改变标准的灰色波纹效果改变colorControlHighlight proproperty,那么它看起来如下:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="colorControlHighlight">@color/colorPrimaryRipple</item>
</style>

使用26%alpha的彩色涟漪.

<color name="colorPrimary">#3F51B5</color>
<color name="colorPrimaryRipple">#423F51B5</color>

标签:bottomnavigationview,android,shadow
来源: https://codeday.me/bug/20190930/1835631.html