flask fab
![Image for post](https://miro.medium.com/freeze/max/9999/1*aE_xhrj2hfSY3RxRYV4Ncw.gif)
![Image for post](https://miro.medium.com/freeze/max/9999/1*z6Sj0jXKpnTid4HNG3pXQA.gif)
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.
现在在设计面板中,您将看到类似这样的内容。
![Image for post](https://miro.medium.com/max/9999/1*Q2SQxtOyd4hE-PHdJWrI8w.png)
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
。
![Image for post](https://miro.medium.com/max/9999/1*kMSYd4F3K5-VEO2GY_uBUg.png)
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。
![Image for post](https://miro.medium.com/max/9999/1*Q4DcUc6_BZk-fJa8mQzErA.png)
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的中间一直移动。
![Image for post](https://miro.medium.com/max/9999/1*SBOoRYoHf-_EeErdBklbrQ.png)
<?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!
运行您的应用程序!
![Image for post](https://miro.medium.com/freeze/max/9999/1*aE_xhrj2hfSY3RxRYV4Ncw.gif)
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.
运行您的应用。
![Image for post](https://miro.medium.com/freeze/max/9999/1*RqQSNUeehalJb8PbKJDg7A.gif)
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.
运行您的应用。
![Image for post](https://miro.medium.com/freeze/max/9999/1*z6Sj0jXKpnTid4HNG3pXQA.gif)
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:)
翻译自: https://medium.com/swlh/floatingactionbutton-fab-with-bottomappbar-78e5762194ac
flask fab