我想创建一个底部导航栏,中间有一个FAB。我尝试了两个版本,但是它们都无法正常工作,我也不知道如何解决。第一个版本如下所示:fab bottom app bar
在这种情况下,FAB按钮在正确的位置,但是菜单项的结构不正确。这是代码:
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".Activities.HomePage"> <com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottomAppBar"
android:layout_width="match_parent"
android:layout_height="65dp"
android:layout_gravity="bottom"
app:buttonGravity="bottom|top"
app:fabAlignmentMode="center"
app:menu="@menu/appbar_menu" />
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_add"
app:backgroundTint="@color/colorPrimary"
app:fabSize="normal"
app:layout_anchor="@id/bottomAppBar"
app:maxImageSize="40dp"
app:tint="#FFFFFF"
/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>
我尝试了一种应该可以使用的方法,但结果却发现,FAB周围没有空间:right menu bar with wrong fab代码在这里:
android:id="@+id/bottomAppBar"
style="@style/Widget.MaterialComponents.BottomAppBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:buttonGravity="bottom|top"
app:fabAlignmentMode="center"
android:clickable="false"
app:fabAnimationMode="scale"
app:hideOnScroll="true"/>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/bottomNavigationView"
android:layout_width="match_parent"
android:layout_height="60dp"
app:itemIconTint="@color/colorPrimaryDark"
app:itemTextColor="@color/colorAccent"
app:labelVisibilityMode="unlabeled"
app:menu="@menu/appbar_menu"
app:fab_cradle_margin="8dp"
app:fab_cradle_rounded_corner_radius="8dp"
android:clickable="false"/>
</FrameLayout>
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="30dp"
android:src="@drawable/ic_add"
app:backgroundTint="@color/colorPrimary"
app:fabSize="normal"
app:layout_anchor="@id/bottomAppBar"
app:maxImageSize="40dp"
app:tint="#FFFFFF"
app:layout_anchorGravity="center|top" />
[在第二种情况下晶圆厂没有表现出如上图所示的方式的代码中的原因/错误可能是什么?
https://nowreviewit.com/wp-content/uploads/2020/02/p3.png
要查看更多设计,您可以访问here
首先进入res-> layout
转到您的activity_main.xml或要在其中添加此底部导航栏布局的任何其他布局
您的布局文件的主布局必须是RelativeLayout
然后您可以简单地使用下面的代码来获得与上面类似的设计
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="@drawable/bg_gradient_soft" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@android:color/white"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:padding="@dimen/spacing_medium">
<ImageButton
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:background="?attr/selectableItemBackgroundBorderless"
android:onClick="clickAction"
android:tint="@color/teal_600"
app:srcCompat="@drawable/ic_apps" />
</LinearLayout>
<View
android:layout_width="?attr/actionBarSize"
android:layout_height="0dp" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:padding="@dimen/spacing_medium">
<ImageButton
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:background="?attr/selectableItemBackgroundBorderless"
android:onClick="clickAction"
android:tint="@color/teal_500"
app:srcCompat="@drawable/ic_local_offer" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:layout_marginBottom="15dp"
android:clickable="true"
android:onClick="clickAction"
android:tint="@android:color/white"
app:backgroundTint="@color/teal_500"
app:elevation="2dp"
app:fabSize="normal"
app:rippleColor="@color/deep_orange_400"
app:srcCompat="@drawable/ic_shopping_cart" />
您的整个acivity_main.xml文件将看起来像
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/grey_5">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- All Other deisgn-->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="4dp"
android:background="@drawable/bg_gradient_soft" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@android:color/white"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:padding="@dimen/spacing_medium">
<ImageButton
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:background="?attr/selectableItemBackgroundBorderless"
android:onClick="clickAction"
android:tint="@color/teal_600"
app:srcCompat="@drawable/ic_apps" />
</LinearLayout>
<View
android:layout_width="?attr/actionBarSize"
android:layout_height="0dp" />
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:padding="@dimen/spacing_medium">
<ImageButton
android:layout_width="?attr/actionBarSize"
android:layout_height="?attr/actionBarSize"
android:background="?attr/selectableItemBackgroundBorderless"
android:onClick="clickAction"
android:tint="@color/teal_500"
app:srcCompat="@drawable/ic_local_offer" />
</LinearLayout>
</LinearLayout>
</LinearLayout>
<android.support.design.widget.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:layout_marginBottom="15dp"
android:clickable="true"
android:onClick="clickAction"
android:tint="@android:color/white"
app:backgroundTint="@color/teal_500"
app:elevation="2dp"
app:fabSize="normal"
app:rippleColor="@color/deep_orange_400"
app:srcCompat="@drawable/ic_shopping_cart" />
</RelativeLayout>