如何将新材料BottomAppBar实施为BottomNavigationView

时间：2018-12-08 11:47:00

标签： android material-design android-appbarlayout bottomnavigationview android-bottomappbar

我试图实现通常如下所示的新BottomAppBar： material BottomAppBar作为BottomNavigationView，就像在Google主页应用中看起来像this。

我的问题是，由于我只能用菜单资源填充BottomAppBar，所以我不明白如何对齐按钮使其看起来像BottomNavigationView（但Fab按钮带有“ cut”）而不是对齐所有内容到BottomAppBar的一侧。

如何在此新的Material BottomAppBar中添加自定义布局？

或者，是否可以通过Fab按钮的“ cut”实现BottomNavigationView（保留酷炫的默认动画，如新的BottomAppBar）？

6 个答案:

答案 0 :(得分：4)

已解决

基本上，不是尝试将菜单资源强制设置为所需的布局，而是使用了此解决方案，而是使用@dglozano建议的“空”元素将线性布局放入BottomAppBar中。

使用int d = Math.Sign(j) * Math.Abs(j).ToString().Reverse().Aggregate(0, (y, x) => 10 * y + x - '0') ，我也可以实现与BottomNavigationView非常相似的效果。

?attr/selectableItemBackgroundBorderless

答案 1 :(得分：2)

1-将Maven包含在build.gradle

的存储库中 
allprojects {
    repositories {
        jcenter()
        maven {
            url "https://maven.google.com"
        }
    }
}

2-在您的build.gradle.中放置材料组件依赖项。请记住，材料版本会定期更新。

implementation 'com.google.android.material:material:1.0.0-alpha1'

3-将compileSdkVersion和targetSdkVersion设置为以Android P为目标的最新API版本28。

4-确保您的应用继承了Theme.MaterialComponents主题，以使BottomAppBar使用最新样式。另外，您可以在布局xml文件的小部件声明中声明BottomAppBar的样式，如下所示。

style=”@style/Widget.MaterialComponents.BottomAppBar”

5-您可以如下所示将BottomAppBar包括在布局中。 BottomAppBar必须是CoordinatorLayout的子代。

<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:navigationIcon="@drawable/baseline_menu_white_24"/>

Fab in bottomnavbar

6-您可以通过在FAB的app：layout_anchor属性中指定BottomAppBar的ID，将浮动操作按钮（FAB）锚定到BottomAppBar。 BottomAppBar可以将FAB放置在具有特定背景的背景中，或者FAB可以与BottomAppBar重叠。

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/baseline_add_white_24"
app:layout_anchor="@id/bottom_app_bar" />

7-您可以使用许多属性来配置底部导航栏和Fab图​​标。

Atributes

8- Check this medium post for a more complete explanation.

更新：选中the OP answer for the final solution for his particular problem.

答案 2 :(得分：2)

实现android的材料组件的团队表示，此设计不是规范的一部分，但他们慷慨地提供了一个简单的解决方案，可以在下面的链接中看到。

Is it possible to have the BottomAppBar & FloatingActionButton with menu evenly distributed? #72

基本上，需要更改菜单按钮容器的布局参数：

if(bottomAppBar.childCount > 0) {
     val actionMenuView = bottomAppBar.getChildAt(0) as androidx.appcompat.widget.ActionMenuView
     actionMenuView.layoutParams.width = androidx.appcompat.widget.ActionMenuView.LayoutParams.MATCH_PARENT   
}

将其与您的void菜单项结合使用即可达到目的，避免使用其他Android组件。

答案 3 :(得分：2)

这可能有助于某人实现上述设计。添加空菜单项以调整fab按钮和空间。

<androidx.coordinatorlayout.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


     <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottom_bar"
            style="@style/AppTheme.BottomAppBar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:layout_gravity="bottom"
            android:backgroundTint="@color/bottom_bar">

        <com.google.android.material.bottomnavigation.BottomNavigationView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@android:color/transparent"
                app:itemIconTint="@color/white"
                app:labelVisibilityMode="unlabeled"
                app:menu="@menu/bottom_menu">

        </com.google.android.material.bottomnavigation.BottomNavigationView>
    </com.google.android.material.bottomappbar.BottomAppBar>


    <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:backgroundTint="@color/bottom_bar"
            android:src="@drawable/ic_plus"
            android:visibility="visible"
            app:borderWidth="0dp"
            app:fabAlignmentMode="end"
            app:fabCradleMargin="20dp"
            app:fabSize="normal"
            app:layout_anchor="@id/bottom_bar"
            app:maxImageSize="38dp"
            app:tint="@color/white">

    </com.google.android.material.floatingactionbutton.FloatingActionButton>

答案 4 :(得分：0)

将bottomAppBar放在具有透明背景的bottomNavigationView下。并将空菜单项添加到menu.xml中以释放FAB的空间。

XML：

<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/lt_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:fitsSystemWindows="false">


<ViewPager
    android:id="@+id/main_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="56dp"
    android:layout_above="@+id/bottom_navigation"
    android:layout_alignParentStart="true" />


<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:labelVisibilityMode="labeled"
    android:layout_gravity="bottom"
    android:layout_alignParentBottom="true"
    android:background="@color/transparent"
    app:menu="@menu/bottom_menu" />

<com.google.android.material.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/bottom_bar"
    android:layout_gravity="bottom"/>

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

Result

答案 5 :(得分：0)

这应该为您工作

结果

enter image description here 

 <androidx.coordinatorlayout.widget.CoordinatorLayout 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:paddingTop="?attr/actionBarSize">
    
        <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/bottom_bar"
            style="@style/Widget.MaterialComponents.BottomAppBar"
            android:layout_width="match_parent"
            android:layout_gravity="bottom"
            android:layout_height="wrap_content" >
    
            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
    
                <com.google.android.material.bottomnavigation.BottomNavigationView
                    android:id="@+id/nav_view"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_gravity="center_horizontal"
                    android:layout_margin="0dp"
                    android:background="@drawable/transparent"
                    android:padding="0dp"
                    app:menu="@menu/bottom_nav_menu" />
            </FrameLayout>
    
    
        </com.google.android.material.bottomappbar.BottomAppBar>
    
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:layout_anchor="@id/bottom_bar"/>
    </androidx.coordinatorlayout.widget.CoordinatorLayout>
相关问题
最新问题