Vin*_*man 12 android material-design bottomnavigationview material-components bottomappbar
我一直在将新的(ish)材质 BottomAppBar 与标准的底部导航视图相结合。我的xml是这样的:
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:contentInsetStart="0dp"
app:contentInsetStartWithNavigation="0dp"
app:fabAlignmentMode="center">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="@android:color/transparent"
app:itemTextAppearanceActive="@style/AppTheme.Text.BottomNavText.Active"
app:itemTextAppearanceInactive="@style/AppTheme.Text.BottomNavText"
app:labelVisibilityMode="labeled"
app:menu="@menu/bottom_nav_menu" />
</com.google.android.material.bottomappbar.BottomAppBar>
Run Code Online (Sandbox Code Playgroud)
在以前的版本 - 1.0.0 - 这工作正常,我仍然可以按预期看到 FAB 插图。唯一的小缺点是这个版本的材质组件库没有对底部应用栏的高度效果进行排序,所以栏和上面的内容之间的区别并不明确。
当我升级到最新的库(在撰写本文时我相信是)时implementation 'com.google.android.material:material:1.1.0-alpha09',我得到了 BottomAppBar 的高度效果,但是当我将透明背景应用到 BottomNavigationView 时,我得到了一个非常奇怪的视觉效果,对于我的生活我不能理解。
如果我删除透明背景颜色,那么效果会消失,但我会丢失 FAB 插图,如下所示:
如果我完全删除底部导航视图子项,并且只有底部应用栏,我会看到正常的视觉效果,但没有我的导航:
我会喜欢: - 一个很好的解决方案,将底部导航视图合并到 BottomAppBar 中,同时保留 1.1.0 版库的良好提升效果,并且在其中有效地包含 BottomNavigationView,因此我保留了该导航组件的所有优点 - 或解释到底是什么导致了这种奇特的第一次海拔效应,理想情况下是一种修复它的方法
Vin*_*man 27
好吧,这和BottomAppBar没有关系……背景问题发生在BottomNavigationView上,不管它在哪里,在材质库1.1.0-....
这是(我认为)BottomNavigationView 的最新版本的一个错误,MaterialShapeDrawableBackground如果背景为 null 或 ColorDrawable,它会将可着色设置为背景......并且当您在 xml 中设置颜色时,它将是一个 ColorDrawable(包括透明的)。这是BottomNavigationView代码中的问题:
if (getBackground() == null || getBackground() instanceof ColorDrawable) {
// Add a MaterialShapeDrawable as background that supports tinting in every API level.
ViewCompat.setBackground(this, createMaterialShapeDrawableBackground(context));
}
Run Code Online (Sandbox Code Playgroud)
这得到了你在上面看到的随机阴影形状。
解决方案
解决方法是在 xml 中设置一个既不是 null 也不是 ColorDrawable 的背景。我创建了我自己的 drawable,它只是一个透明的矩形,并将其设置为 BottomNavigationView 背景,它可以工作。
background_transparent.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:padding="10dp"
android:shape="rectangle" >
<solid android:color="#00000000" />
</shape>
Run Code Online (Sandbox Code Playgroud)
现在更新的BottomNavigationView xml:
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottom_navigation"
style="@style/BottomNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="0dp"
android:layout_marginEnd="0dp"
android:background="@drawable/background_transparent"
app:itemTextAppearanceActive="@style/AppTheme.Text.BottomNavText.Active"
app:itemTextAppearanceInactive="@style/AppTheme.Text.BottomNavText"
app:labelVisibilityMode="labeled"
app:menu="@menu/bottom_nav_menu" />
Run Code Online (Sandbox Code Playgroud)
结果:
| 归档时间: |
|
| 查看次数: |
4043 次 |
| 最近记录: |