我目前正在使用BottomNavigationView和浮动操作按钮。 我想实现的是这样:
我尝试过的:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.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"
app:layout_insetEdge="bottom"
tools:context=".activity.BottomNavPrimary">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center|bottom" />
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottomNavPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:layout_insetEdge="bottom"
android:background="?android:attr/windowBackground"
app:menu="@menu/bottom_nav_primary"></android.support.design.widget.BottomNavigationView>
</android.support.design.widget.CoordinatorLayout>
答案 0 :(得分:3)
您的设计看起来就像您想使用MaterialComponents
中新的BottomAppBar
一样,它将与Android P一起完全发布。特别是如果左侧图标代表一种侧面导航,则可能是正确的导航元素。
但是,您必须知道,FAB左侧和右侧的元素的用途与bottom navigation不同。 BottomAppBar
并不是应用程序中“主要目的地”的入口点,而是定义为:
底部的应用栏在移动屏幕底部显示导航和关键操作。
因此适用于页面操作(例如打开仪表板或搜索)。可以在design documentation中找到更多说明。
我还没有实现它的机会(因为我确实需要使用它的底部导航),但这是代码文档示例:
<android.support.design.widget.CoordinatorLayout
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="match_parent">
<!-- Other components and views -->
<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:navigationIcon="@drawable/ic_menu_24"/>
<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"/>
</android.support.design.widget.CoordinatorLayout>
对我来说,听起来好像您定义了两个页面菜单选项,并且由于FAB固定在栏上,因此会将它们推向侧面。
该文档还包括今年Google I / O期间显示的可选FAB通讯座的选项,并显示了如何处理菜单和单击操作。
这是how to set up gradle上另一个有用的链接,用于在项目中包括新的材料组件。
答案 1 :(得分:1)
您可以将BottomNavigationView
和FloatingActionButton
包装在ConstraintLayout
中,并对FloatingActionButton
使用以下约束:
app:layout_constraintTop_toBottomOf="@id/bottomNavPrimary"
app:layout_constraintBottom_toTopOf="@id/bottomNavPrimary"
app:layout_constraintLeft_toRightOf="@id/bottomNavPrimary"
app:layout_constraintRight_toLeftOf="@id/bottomNavPrimary"
这将使FloatingActionButton
相对于BottomnavigationView
垂直和水平居中
我希望这就是你要的。
最终代码如下:
<android.support.design.widget.CoordinatorLayout android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<android.support.constraint.ConstraintLayout xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@id/bottomNavPrimary"
app:layout_constraintBottom_toTopOf="@id/bottomNavPrimary"
app:layout_constraintLeft_toRightOf="@id/bottomNavPrimary"
app:layout_constraintRight_toLeftOf="@id/bottomNavPrimary"/>
<android.support.design.widget.BottomNavigationView
android:id="@+id/bottomNavPrimary"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:layout_constraintBottom_toTopOf="parent"
android:background="?android:attr/windowBackground"
app:menu="@menu/bottom_nav_primary" />
</android.support.constraint.ConstraintLayout>
答案 2 :(得分:1)
我用它来得到类似的东西。
BottomNavigationView + FloatingActionButton
<androidx.constraintlayout.widget.ConstraintLayout xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/floating_button"
style="@style/Widget.MaterialComponents.FloatingActionButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="16dp"
app:backgroundTint="@color/colorPrimaryLight"
app:elevation="@dimen/padding_10"
app:layout_constraintBottom_toTopOf="@id/navigation"
app:layout_constraintLeft_toRightOf="@id/navigation"
app:layout_constraintRight_toLeftOf="@id/navigation"
app:layout_constraintTop_toBottomOf="@id/navigation"
app:layout_constraintTop_toTopOf="@id/navigation"
app:layout_insetEdge="bottom"
app:srcCompat="@drawable/ic_add_black_24dp"
app:tint="@color/colorPrimary" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@color/colorPrimaryDark"
android:visibility="visible"
app:itemIconTint="@drawable/bottom_navigation_icons"
app:itemTextColor="@drawable/bottom_navigation_icons"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/navigation" />
</androidx.constraintlayout.widget.ConstraintLayout>
答案 3 :(得分:0)
我想您可以使用bottomAppBar做到这一点,并在下面嵌入一些按钮
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAttached="true"
app:fabCradleDiameter="8dp"
style="@style/Widget.MaterialComponents.BottomAppBar"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageButton
android:id="@+id/btnReport"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="@android:color/transparent"
android:src="@drawable/ic_play"
android:layout_weight="1"
android:paddingRight="20dp"
/>
<ImageButton
android:id="@+id/btnPlayWords"
android:layout_width="0dp"
android:layout_height="match_parent"
android:background="@android:color/transparent"
android:src="@drawable/ic_show_chart"
android:layout_weight="1"
android:paddingLeft="20dp"
/>
</LinearLayout>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fabAddWord"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_add"
app:layout_anchor="@id/bottom_app_bar" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
答案 4 :(得分:0)
我的解决方案简单而酷
父布局必须是协调器布局,并将BottomAppBar与FloatingActionButton一起使用,如下所示
结果:
<?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"
android:layout_width="match_parent"
android:layout_height="match_parent">
<-- your other views -->
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:id="@+id/homePage"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.4">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/your_drawable"
android:padding="@dimen/small_margin"
app:tint="@color/white" />
</RelativeLayout>
<RelativeLayout
android:id="@+id/profile"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_percent="0.4">
<androidx.appcompat.widget.AppCompatImageView
android:layout_width="wrap_content"
android:padding="@dimen/small_margin"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@drawable/your_drawable" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</com.google.android.material.bottomappbar.BottomAppBar>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/categories"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/your_drawable"
app:backgroundTint="@color/colorPrimary"
app:layout_anchor="@id/navigation"
app:tint="@android:color/white" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>