[英]BottomAppBar and BottomNavigationView with FloatingActionButton UI is messed up
我在ConstraintLayout
添加了带有FloatingActionButton
BottomAppBar
和BottomNavigationView
,但是白色条带显示在整个应用程序的屏幕底部。 在此屏幕上,使用Drawerlaout
添加了一个导航抽屉,并Framelayout
使用了Framelayout
。 现在很难管理所有这些组件。
所以,请检查下面的代码并帮助我解决这个 UI 问题。
<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:fitsSystemWindows="true"
android:gravity="right"
tools:openDrawer="end">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@color/colorPrimaryDark"
android:elevation="5dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintTop_toTopOf="parent"
app:titleTextColor="@color/White"
tools:layout_editor_absoluteX="0dp" />
<include
android:id="@+id/header"
layout="@layout/header_layout" />
<FrameLayout
android:id="@+id/home_fragment_container"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/header"
app:layout_constraintBottom_toTopOf="@id/layout_constraint"></FrameLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/layout_constraint"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/White"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent">
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/layout_coordinator"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/White">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
style="@style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/lighter_gray"
app:fabAlignmentMode="center"
app:fabCradleMargin="7dp"
app:fabCradleRoundedCornerRadius="7dp" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="85dp"
android:layout_gravity="bottom"
android:background="@android:color/transparent"
android:paddingTop="30dp"
app:itemBackground="@android:color/transparent"
app:itemIconTint="@drawable/tab_color"
app:itemTextColor="@drawable/tab_color"
app:labelVisibilityMode="labeled"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:menu="@menu/bottom_navigation_menu" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="@color/colorPrimary"
app:fabSize="auto"
app:layout_anchor="@+id/bottom_app_bar"
app:layout_anchorGravity="center|top"
app:srcCompat="@drawable/ic_baseline_add" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/navview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end|right"
android:background="@color/White"
android:fitsSystemWindows="true"
android:paddingLeft="20dp"
android:paddingRight="20dp"
app:headerLayout="@layout/nav_header"
app:itemBackground="@android:color/transparent"
app:itemIconTint="@color/background_gray"
app:itemTextColor="@color/background_gray"
app:menu="@menu/drawer_menu" />
</androidx.drawerlayout.widget.DrawerLayout>
我正在添加 UI 问题的屏幕截图:
我们的问题是您已经明确指定了FloatingActionButton
宽度和高度参数,而它不能采用任何宽度/高度。 app:fabSize
参数指定 fab 的 3 种尺寸:auto、mini 和 normal。
将layout_width
和layout_height
保留为 wrap_content,并使用app:fabSize="normal"
(或列表中的其他参数)指定所需的晶圆厂尺寸。
此外,使BottomNavigationView's
高度为wrap_content
,因为 fab 有一些内部填充。
为了在封闭布局之外绘制一个孩子,将android:clipChildren="false"
到封闭的 ViewGroup。
您无法删除此填充,但可以通过向BottomAppBar
添加高程来解决此BottomAppBar
。
这样做,您可能会在BottomNavigationView
右侧和左侧遇到工件,以修复此 Add 0dp
Elevation to the BottomNavigationView
。
额外说明:
BottomNavigationView
删除约束,因为它没有包含在ConstraintLayout
CoordinatorLayout
的ConstraintLayout
,因为它是一个不需要的额外ViewGroup
。<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="right"
android:fitsSystemWindows="true"
android:gravity="right"
tools:openDrawer="end">
<androidx.constraintlayout.widget.ConstraintLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="45dp"
android:background="@color/colorPrimaryDark"
android:elevation="5dp"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:layout_constraintTop_toTopOf="parent"
app:titleTextColor="@color/White"
tools:layout_editor_absoluteX="0dp" />
<include
android:id="@+id/header"
layout="@layout/header_layout" />
<FrameLayout
android:id="@+id/home_fragment_container"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/header"
app:layout_constraintBottom_toTopOf="@id/layout_constraint"></FrameLayout>
<androidx.coordinatorlayout.widget.CoordinatorLayout
android:id="@+id/layout_coordinator"
android:layout_width="match_parent"
android:layout_height="0dp"
android:background="@android:color/transparent"
app:layout_constraintBottom_toBottomOf="parent">
<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
style="@style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/lighter_gray"
app:elevation="10dp"
app:fabAlignmentMode="center"
app:fabCradleMargin="7dp"
app:fabCradleRoundedCornerRadius="7dp" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/navigation"
android:layout_width="match_parent"
android:layout_height="85dp"
android:layout_gravity="bottom"
android:background="@android:color/transparent"
android:paddingTop="30dp"
app:elevation="0dp"
app:itemBackground="@android:color/transparent"
app:itemIconTint="@drawable/tab_color"
app:itemTextColor="@drawable/tab_color"
app:labelVisibilityMode="labeled"
app:menu="@menu/bottom_navigation_main" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:backgroundTint="@color/colorPrimary"
app:fabSize="auto"
app:layout_anchor="@+id/bottom_app_bar"
app:layout_anchorGravity="center|top"
app:srcCompat="@drawable/ic_baseline_add" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
<com.google.android.material.navigation.NavigationView
android:id="@+id/navview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="end|right"
android:background="@color/White"
android:fitsSystemWindows="true"
android:paddingLeft="20dp"
android:paddingRight="20dp"
app:headerLayout="@layout/nav_header"
app:itemBackground="@android:color/transparent"
app:itemIconTint="@color/background_gray"
app:itemTextColor="@color/background_gray"
app:menu="@menu/drawer_menu" />
</androidx.drawerlayout.widget.DrawerLayout>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.