You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何使用Kotlin移除底部导航栏顶部的边框或线条?

移除BottomNavigationView顶部线条/边框的Kotlin实现方案

没问题!要让底部导航栏和主屏幕无缝融合,去掉顶部的线条或边框,这里有几种实用的Kotlin实现方法,你可以按需选择:

方法1:动态移除阴影(最常用)

大多数情况下,底部导航栏顶部的“线条”其实是elevation(阴影)效果。直接在代码中把阴影高度设为0即可:

// 在Activity中
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    
    val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_nav_view)
    // 移除阴影线条
    bottomNav.elevation = 0f
    // 同步设置Android原生elevation(兼容旧版本)
    bottomNav.setElevation(0f)
    // 确保导航栏背景和主屏幕背景一致,避免视觉割裂
    bottomNav.setBackgroundColor(ContextCompat.getColor(this, R.color.main_background))
}

// 如果是在Fragment中
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    val bottomNav = requireActivity().findViewById<BottomNavigationView>(R.id.bottom_nav_view)
    bottomNav.elevation = 0f
    bottomNav.setBackgroundColor(ContextCompat.getColor(requireContext(), R.color.main_background))
}

方法2:通过主题样式全局设置

如果想让所有底部导航栏都统一去掉边框,可以在styles.xml中自定义样式,再在Kotlin中应用:

首先在res/values/styles.xml中定义样式:

<style name="CustomBottomNav" parent="Widget.MaterialComponents.BottomNavigationView">
    <item name="elevation">0dp</item>
    <item name="android:elevation">0dp</item>
    <item name="backgroundTint">@color/main_background</item>
</style>

然后在Kotlin中动态应用样式:

bottomNav.applyStyle(R.style.CustomBottomNav)

方法3:Jetpack Compose场景下的实现

如果你的项目用Jetpack Compose开发,直接给BottomNavigation设置elevation = 0.dp就能去掉顶部阴影:

BottomNavigation(
    modifier = Modifier.fillMaxWidth(),
    backgroundColor = MaterialTheme.colorScheme.background,
    elevation = 0.dp // 关键:移除阴影线条
) {
    BottomNavigationItem(
        icon = { Icon(Icons.Filled.Home, contentDescription = "Home") },
        label = { Text("Home") },
        selected = currentDestination == "home",
        onClick = { /* 导航逻辑 */ }
    )
    // 其他导航项...
}

额外提示

如果做完以上操作还有线条,可能是上方的内容布局自带底部边框,检查一下主内容区域的布局文件,看看是否有android:bottom属性或带边框的背景Drawable。

内容的提问来源于stack exchange,提问作者Michael

火山引擎 最新活动