flask fab_具有BottomAppBar的FloatingActionButton（FAB）

flask fab

I always wondered while using floatingActionButton that I could be able to make this type of animations with that. Now BottomAppBar has solved this problem. You can animate your FAB with bottomAppBar.

我一直想知道在使用floatActionButton时是否可以用它制作这种类型的动画。 现在BottomAppBar已经解决了这个问题。 您可以使用bottomAppBar为FAB设置动画。

Let me show you how to do it!

让我告诉你如何做！

1)添加BottomAppBar： (1) Adding BottomAppBar:)

All you have to do is to make new project and add this dependency.

您要做的就是创建新项目并添加此依赖项。

implementation 'com.google.android.material:material:1.1.0'

This is material design dependency which allows you to implement new material components. BottomAppBar is one of them.

这是材料设计的依存关系，使您可以实施新的材料组件。 BottomAppBar是其中之一。

I urged you to please go through the component section of material.io documentation for more new things to know!

我敦促您仔细阅读material.io文档的组件部分，以了解更多新知识！

Now after adding this dependency, open up your activity_main.xml.

现在，在添加此依赖项之后，打开您的activity_main.xml.

BottomAppBar works with coordinatorLayout , so turn your parent view to coordinatorLayout like this.

BottomAppBar与coordinatorLayout ，因此像这样将您的父视图转换为coordinatorLayout 。

<?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.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        />




</androidx.coordinatorlayout.widget.CoordinatorLayout>

Now in design panel, you will see something like this.

现在在设计面板中，您将看到类似这样的内容。

Don’t worry, this is because, bottomAppBar comes with material components theme and in your project by default your theme is AppCompat.

不用担心，这是因为bottomAppBar带有材料组件主题，并且在您的项目中默认情况下主题是AppCompat。

Theme.AppCompat.Light.DarkActionBar

Select AppComponent and write MaterialComponents instead.

选择AppComponent并编写MaterialComponents 。

Navigate to your xml, bottomAppBar must be there!

导航到您的xml，bottomAppBar必须存在！

2)添加FloatingActionButton(FAB) (2) Adding FloatingActionButton (FAB))

I am using FAB that comes with material package i.e material.floatingactionbutton .

我正在使用材料包(即material.floatingactionbutton随附的FAB。

FAB is showing at the top! We need it to be in the middle of the bottomAppBar. In order to do that, set the app:layout_anchor attribute of floatingActionButton and reference the id of bottomAppBar.

FAB显示在顶部！ 我们需要它位于bottomAppBar的中间。 为此，请设置app:layout_anchor的app:layout_anchor属性，并引用bottomAppBar的id 。

You will see your FAB move all the way in the middle of bottomAppBar.

您将看到FAB在bottomAppBar的中间一直移动。

<?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.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom" />




    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="@color/colorPrimaryDark"
        android:fadingEdge="vertical"
        android:src="@drawable/ic_add"
        app:layout_anchor="@id/bottomAppBar"
        app:tint="@android:color/white" />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

现在是编码时间！ (It’s Coding Time!)

The main part of this article, you can’t animate your bottomAppBar and FAB from XML. You need code to make it happen.

本文的主要部分，您不能从XML设置bottomAppBar和FAB的动画。 您需要代码来实现它。

1)FAB滑动 (1) FAB Sliding)

We need to set fabAlignmentMode of bottomAppBar. By default it is on center . In order to animate FAB, I am going to set this attribute programmatically.

我们需要设置bottomAppBar的fabAlignmentMode。 默认情况下，它位于center 。 为了给FAB制作动画，我将以编程方式设置此属性。

package com.example.bottomappbar


import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.material.bottomappbar.BottomAppBar
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {


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


        fabBtn.setOnClickListener {
            if (bottomAppBar.fabAlignmentMode == BottomAppBar.FAB_ALIGNMENT_MODE_END) {
                bottomAppBar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_CENTER
            } else {
                bottomAppBar.fabAlignmentMode = BottomAppBar.FAB_ALIGNMENT_MODE_END
            }
        }
    }
}

Run your app!

运行您的应用程序！

By default, bottomAppBar has fabAnimationMode set to scale in xml. You can change it to slide to have a sliding experience of FAB!

默认情况下，bottomAppBar的fabAnimationMode设置为在xml中scale 。 你可以把它改成slide有FAB的滑动体验！

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

Run your app.

运行您的应用。

2)BottomAppBar滑动 (2) BottomAppBar Sliding)

BottomAppBar behavior would be change to slideUp and slidedown . I am going to make it very simple just to make you understand.

BottomAppBar行为将更改为slideUp和slidedown 。 为了使您理解，我将使其变得非常简单。

package com.example.bottomappbar


import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.material.bottomappbar.BottomAppBar
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {


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


        val bottomAppBarBehavior = bottomAppBar.behavior
        var isSlide = false


        fabBtn.setOnClickListener {
            isSlide = if (!isSlide) {
                bottomAppBarBehavior.slideDown(bottomAppBar)
                true
            } else {
                bottomAppBarBehavior.slideUp(bottomAppBar)
                false
            }
        }
    }
}

Run your app.

运行您的应用。

You can play around with it by applying different scenarios. You can also animate fab with bottomAppBar sliding.

您可以通过应用不同的场景来玩转它。 您还可以使用bottomAppBar滑动为Fab制作动画。

I will leave this on you 😉 You would need to combine above code.

我将留给您😉😉您需要结合以上代码。

进一步阅读： (Further Readings:)

• Flutter or Android? Flutter or React Native?

  Flutter还是Android？ Flutter还是React Native？

• Basic Skills Required to Become an Android Developer

  成为Android开发人员所需的基本技能

• Complete Android Data Binding Tutorial

  完整的Android数据绑定教程

• Roadmap to Becoming a Successful Android Developer

  成为成功的Android开发人员的路线图

翻译自: https://medium.com/swlh/floatingactionbutton-fab-with-bottomappbar-78e5762194ac

flask fab