标签: bottomnavigationview

我在 Android 中使用 coordinatorLayout 在片段内滚动和检测它时遇到很多问题。我有一个包含 3 个片段的“MainActivity”。在其中一个片段中，我有一个应用栏，当滚动片段时它会折叠。我已经设法做到了这一点，但如果我设置滚动行为以允许这样做，我的 BottomNavigationView （位于 mainactivity.xml 中）不会对滚动做出反应。代码是这样的：

片段1.xml

<android.support.design.widget.CoordinatorLayout
...
...>
    <android.support.design.widget.AppBarLayout
 ...
 ...>
        <android.support.design.widget.CollapsingToolbarLayout
                 app:layout_scrollFlags="scroll|exitUntilCollapsed"
   ...>
            <android.support.v7.widget.Toolbar
     .../>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

   <android.support.v4.widget.NestedScrollView
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
   </android.support.v4.widget.NestedScrollView>

</android.support.design.widget.CoordinatorLayout>

MainActivity.xml

<android.support.design.widget.CoordinatorLayout
.../>
    <FrameLayout
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
 .../>
    <android.support.design.widget.BottomNavigationView
      app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
.../>
</android.support.design.widget.CoordinatorLayout>

现在，这已经足够好了，因为当我在片段内滚动时，我的 AppBar 会折叠到标题中（这就是我想要的），但我的 BottomNavigationView 对滚动没有反应。

我发现如果我添加这一行

app:layout_behavior="@string/appbar_scrolling_view_behavior"

在 AppBarLayout xml 声明中，我让 BottomView 在滚动事件上折叠（当我向上滚动时，它会再次显示）。所以基本上要么我有能力折叠片段内的应用程序栏，要么当我检测到片段内的滚动事件时我有能力隐藏 BottomNavigationView。

任何形式的帮助将不胜感激。

我来自 iOS，致力于将 iOS 应用程序移植到 Android 上。在 iOS 中，有一个故事板，您可以在其中连接不同的视图（活动）并将它们嵌入到选项卡栏和导航栏中。我有一个问题要了解在 android 中实现底部导航的最佳方法是什么......

假设我有 3 个底部导航项，其中包含以下内容

1. 选项卡1

   • 第1.1页
     • 第1.2页

2. 选项卡2

   • 第2.1页
     • 第2.2页
       • 第2.3页

3. 选项卡3

   • 第3.1页
     • 第3.2页
       • 第3.3页

作为 tab1 中的示例，我有 page1.1。然后假设我在 page1.1 中有一个按钮，可以将我带到 page1.2。如果我从 page1.2 返回，我想返回 page1.1。page2.1 的情况相同，我可以转到 page2.2，从 page2.2 我可以转到 page2.3。我也想从第3.2页转到第1.2页

我读过片段是最好的方法（每个 page.x 都是成为具有不同布局的不同片段），但它似乎不是很容易。我还读过我可以使用活动，但许多人建议不要使用它

你建议我重点关注什么？除了片段和活动之外，还有其他解决方案需要考虑吗？谢谢

在我的 flutter 应用程序中，存在底部导航栏，并且有两个底部导航栏项目。我在两个屏幕上都使用列表视图。当我在该屏幕上进行一些滚动后从一个屏幕导航到另一个屏幕时。我回到了列表的顶部，而不是我离开的最后一个位置。如何在两个屏幕上实现持久化？

请，我想在 Android 中使用自定义图标作为底部导航视图，如下所示。选中后如何更改图标位置？当它们被选中时，它们会上升一点。你是否创建一个具有一定边距的选定图标，或者有没有办法在android中设置高度？不过这张图片来自 flutter 库。我想在 Android Java 项目中重现它。或者找到一个实现它的库

我的布局底部有一个导航栏，主要内容位于 NavHostFragment 中。现在 NavHostFragment 的底部隐藏在导航栏后面。我怎样才能解决这个问题？

这是活动的主要布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        android:layout_alignParentBottom="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

以及导航主机的片段之一：

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

<androidx.core.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:isScrollContainer="true"
    app:layout_constraintTop_toTopOf="parent">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    </LinearLayout>

</androidx.core.widget.NestedScrollView>

每次导航时，带有导航组件的底部导航视图都会重新创建片段。我想要一个 Singletop，我该怎么做？

我跟着这个教程：https : //proandroiddev.com/android-navigation-arch-component-a-curious-investigation-3e56e24126e1

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setupNavigation()
    }

    private fun setupNavigation() {
        val navController = findNavController(R.id.mainNavigationFragment)
        setupActionBarWithNavController(navController)
        bottomNavigationView.setupWithNavController(navController)
    }

    override fun onSupportNavigateUp() =
            findNavController(R.id.mainNavigationFragment).navigateUp()
}

我想为测试 android 应用程序创建下面的视图。这些是我创建视图所遵循的当前步骤：

1. 以协调器布局作为根元素创建布局文件。
2. 添加底部栏并将其锚定到底部。
3. 添加了一个浮动操作按钮并将其锚定到底部栏。
4. 创建了一个包含三个菜单项的菜单资源文件。
5. 将菜单项添加到底部栏。

当我运行应用程序时，视图如下图所示：

我曾尝试使用底部导航视图，主浮动操作按钮被膨胀为菜单项中的操作布局。使用这种方法只允许显示菜单项及其测试，但不显示浮动操作按钮。

什么是最好的使用方法。使用BottomAppBar 或使用BottomNavigationView。我正在尝试查看是否可以使用可用的材料组件而无需执行 hack。

XML 文件如下：

活动主

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_anchor="@id/bar"
        app:srcCompat="@mipmap/sharp_local_atm_black_24" />

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="center"
        app:fabCradleRoundedCornerRadius="0dp"
        app:fabCradleMargin="0dp"
        app:fabAnimationMode="slide"
        app:labelVisibilityMode="labeled"
        app:fabCradleVerticalOffset="8dp"
        app:menu="@menu/app_bar_menu"
       />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

菜单 XML：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/app_bar_home"
        android:icon="@mipmap/sharp_home_black_24"
        android:title="@string/home"
        app:showAsAction="always"/>

    <item
        android:id="@+id/app_bar_wallet"
        android:icon="@mipmap/sharp_account_balance_wallet_black_24"
        android:title="@string/wallet"
        app:showAsAction="always"/>

    <item
        android:id="@+id/app_bar_atm"
        android:title="CASH"
        app:showAsAction="always"/>

    <item
        android:id="@+id/app_bar_cart"
        android:icon="@mipmap/sharp_shopping_cart_black_24"
        android:title="@string/cart"
        app:showAsAction="always"/>

    <item
        android:id="@+id/app_bar_more"
        android:icon="@mipmap/sharp_menu_black_24"
        android:title="@string/more"
        app:showAsAction="always"/> …

使用如下所示的导航图添加动态功能，并且可以与 viewPager2 或其他片段配合使用，但不能与BottomNavigationView.

布局

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:id="@+id/nav_host_container"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toTopOf="@+id/bottom_nav"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_nav"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:menu="@menu/menu_bottom_nav" />

    </androidx.constraintlayout.widget.ConstraintLayout>


</layout>

BottomNavigationView应导航到动态功能模块的选项卡的导航图

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/nav_graph_dashboard"
    app:startDestination="@id/dashboardFragment1">

    ...

    <!-- photos dynamic feature module-->
    <include-dynamic
        android:id="@+id/nav_graph_photos"
        android:name="com.abc.photos"
        app:graphResName="nav_graph_photos"
        app:moduleName="photos">
        <argument
            android:name="count"
            android:defaultValue="0"
            app:argType="integer" />
    </include-dynamic>

</navigation>

由于BottomNavigationView其选项卡片段没有单独的后退堆栈，因此该类用于后退导航。

/**
 * Manages the various graphs needed for a [BottomNavigationView].
 *
 * This sample is …

我正在开发一个 flutter 应用程序，该应用程序有一个页面，其中包含一个（圆形凹口矩形）BottomAppBar、一个 FloatingActionButton 和一个 BottomSheet，当用户单击地图上的标记时会出现该页面。我的问题是，当 BottomSheet 显示在屏幕上时，它将 FloatingActionButton 向上移动到 BottomSheet 的顶部。以下是我的应用程序中发生的情况的屏幕截图：

FAB

BottomSheet 打开时的 FAB

即使打开 BottomSheet，我也想将此 FloatingActionButton 保持在同一位置（因此位于 BottomAppBar 的中间）。是否可以通过更改某些现有属性来做到这一点？或者我是否必须构建自己的 BottomSheet 元素，以便它不会以这种方式与 FloatingActionButton 交互？

这是 Home.dart 中 FloatingActionButton/Scaffold 的代码片段：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      extendBody: true,
      bottomNavigationBar: bottomAppBar(),
      floatingActionButton: Container(
        height: MediaQuery.of(context).size.width * 0.1625,
        width: MediaQuery.of(context).size.width * 0.1625,
        child: FittedBox(
          child: FloatingActionButton(
            elevation: 0.0,
            onPressed: () {},
            child: Icon(
              Icons.bolt,
              size: MediaQuery.of(context).size.width * 0.075,
            ),
          ),
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      body: someWidget,
    );
  } …

我正在创建一个带有底部导航栏的简单应用程序。我想在向下滚动时隐藏底部导航栏，并在可组合屏幕中向上滚动时显示它。

任何帮助，将不胜感激。如果您需要更多代码，请告诉我。我已附上我认为与此问题相关的所有代码。

这是我的底部导航栏。

@Composable
fun BottomBar(navController: NavController) {

    val items = listOf(
        NavigationItem.Home,
        NavigationItem.Search
    )

    BottomNavigation(
        backgroundColor = MaterialTheme.colors.DarkRed,
        contentColor = Color.White
    ) {

        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route

        items.forEach { item ->
            BottomNavigationItem(
                selected = currentRoute == item.route,
                icon = {
                    Icon(
                        imageVector = item.icon,
                        contentDescription = "Icon",
                        modifier = Modifier.size(28.dp)

                    )
                },
                alwaysShowLabel = false,
                selectedContentColor = Color.White,
                unselectedContentColor = Color.White.copy(0.4f),
                onClick = {
                    navController.navigate(item.route){
                        // Pop up to the start destination of the graph …