BottomNavigationView-阴影和波纹效果 [英] BottomNavigationView - Shadow and Ripple Effect

问题描述

发布 BottomNavigationView 时，我感到非常高兴一个星期前，但我遇到了一些问题，这些问题使我无法解决它，就像在BottomNavigationView上看到阴影一样，就像Google Photos Android App向我们显示的一样:

I was really happy when BottomNavigationView was released one week ago but I am facing some problems which makes me unable to solve it, like to see a shadow over the BottomNavigationView, on the same way as Google Photos Android App shows us:

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

If we tap on an Google Photos menu item, we can see a ripple effect which is tinted blue like the icon and text color (when selected).

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

Implementing the solution provided by Google only is displayed a gray ripple effect color, and worse, it is not displayed when we change the background color of the bottomnavigationview (design:itemBackground="...").

有人知道如何解决吗?

推荐答案

这是我已经实现的目标:

Here is what I've achieved:

我已经在GitHub上创建了演示来帮助您.

I've created a demo on GitHub to help you.

首先使用最新的支持库compile "com.android.support:design:$SUPPORT_VERSION"

First of all use latest support library compile "com.android.support:design:$SUPPORT_VERSION"

仅在设置白色背景色android:background="@android:color/white"

请注意，如果您使用app:itemBackground属性或在您的情况下为design:itemBackground="..."，涟漪效应将消失，因此只需将其删除即可.

Note that ripple effect will disappear if you use app:itemBackground property or in your case it's design:itemBackground="...", so just remove it.

<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" />

处理启用/禁用状态:

您需要创建选择器文件:

You need to create selector file:

<?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属性，使其如下所示:

If you want to change standard grey ripple effect change colorControlHighlight proproperty in AppTheme so it looks like following:

<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来处理彩色波纹.

Use 26% alpha for colored ripples.

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

这篇关于BottomNavigationView-阴影和波纹效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！