[英]How use the real Floating Action Button (FAB) Extended?
To remove any doubts or thoughts about duplicate: on Material Design is defined what is "extended". 消除对重复的任何疑虑或想法:在Material Design上定义什么是“扩展”。
But most of the people confuses "extended" with " Type of Transition: Speed Dial ", what make hard to find solutions. 但大多数人都将“扩展”与“ 转型类型:快速拨号 ”混为一谈,难以找到解决方案。 Like here
喜欢这里
Question So what I'm looking forward is how setup the FAB with text and a extended size. 问题所以我期待的是如何使用文本和扩展大小设置FAB。
Today my code is like this: 今天我的代码是这样的:
<android.support.design.widget.FloatingActionButton
android:id="@+id/maps_main_distance_btn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:text="@string/str_distance_btn"
app:elevation="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
But my button look like this: 但我的按钮看起来像这样:
No text and no right format. 没有文字,没有正确的格式。 I'm using it in a Constraint Layout.
我在Constraint Layout中使用它。
implementation 'com.google.android.material:material:1.1.0-alpha04'
in your xml file: 在您的xml文件中:
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_alignParentBottom="true"
android:layout_alignParentEnd="true"
android:layout_margin="@dimen/fab_margin"
android:text="Create"
app:icon="@drawable/outline_home_24" />
You can create a utility class that animates a MaterialButton
to an Extended FloatingActionButton
using a ConstraintLayout
. 您可以创建一个实用程序类,使用
ConstraintLayout
将MaterialButton
设置为Extended FloatingActionButton
。 You'll first need to declare the two states of the MaterialButton
in xml, and then use the TransitionManager
to animate between them. 您首先需要在xml中声明
MaterialButton
的两个状态,然后使用TransitionManager
在它们之间进行动画处理。
You can read a medium post about it here , in the meantime, I'll add bits of relevant code here. 你可以在这里阅读一篇关于它的中篇文章,与此同时,我会在这里添加一些相关的代码。
Collapsed FAB state: 折叠的FAB状态:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="@+id/extend_fab_container"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_fab"
android:elevation="8dp">
<android.support.design.button.MaterialButton
android:id="@+id/fab"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
android:layout_width="56dp"
android:layout_height="56dp"
app:cornerRadius="56dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Extended FAB State: 扩展的FAB状态:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout android:id="@+id/extend_fab_container"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:elevation="8dp"
android:background="@drawable/bg_fab">
<android.support.design.button.MaterialButton
android:id="@+id/fab"
style="@style/Widget.MaterialComponents.Button.UnelevatedButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:cornerRadius="56dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
Background Drawable: 背景图纸:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/colorAccent" />
<corners android:radius="56dp" />
</shape>
And relevant Java Expansion code: 和相关的Java扩展代码:
private void setExtended(boolean extended, boolean force) {
if (isAnimating || (extended && isExtended() && !force)) return;
ConstraintSet set = new ConstraintSet();
set.clone(container.getContext(), extended ? R.layout.fab_extended : R.layout.fab_collapsed);
TransitionManager.beginDelayedTransition(container, new AutoTransition()
.addListener(listener).setDuration(150));
if (extended) button.setText(currentText);
else button.setText("");
set.applyTo(container);
}
You can use this library to do that. 您可以使用此库来执行此操作。 (I used another way) But I used a FancyButton to create a round and awesome button in coordinator layout as below:
(我用另一种方式)但是我使用FancyButton在协调器布局中创建一个圆形且非常棒的按钮,如下所示:
<mehdi.sakout.fancybuttons.FancyButton
android:id="@+id/actMain_btnCompare"
app:layout_behavior="@string/fab_transformation_sheet_behavior"
android:layout_width="125dp"
android:layout_height="38dp"
android:layout_gravity="bottom|center"
android:layout_margin="20dp"
android:elevation="3dp"
android:padding="2dp"
fancy:fb_borderColor="@color/white"
fancy:fb_borderWidth="3dp"
fancy:fb_defaultColor="@color/colorPrimaryDark"
fancy:fb_radius="20dp"
fancy:fb_text="مقایسه محصول"
fancy:fb_textColor="@color/white"
fancy:fb_textGravity="center"
fancy:fb_textSize="13sp" />
and result is: 结果是:
That can have icon in it (see FancyButton ). 那可以有图标(参见FancyButton )。
with app:layout_behavior="@string/fab_transformation_sheet_behavior"
it acts like fab as below: 与
app:layout_behavior="@string/fab_transformation_sheet_behavior"
它的行为如下所示:
Good luck. 祝好运。
The short answer: set the background to a rect with rounded corners, rather than an oval. 简短的回答:将背景设置为带圆角的矩形,而不是椭圆形。 Then set the dimension of the radius to half that of the height of the button.
然后将半径的尺寸设置为按钮高度的一半。
How I actually did it: 我是怎么做到的:
<android.support.design.widget.FloatingActionButton
android:id="@+id/maps_main_distance_btn"
android:layout_width="@dimen/floating_button_width"
android:layout_height="@dimen/floating_button_height"
android:layout_marginBottom="8dp"
android:background="@drawable/btn_background_expanded"
android:text="@string/str_distance_btn"
app:elevation="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent" />
drawable/btn_background_expanded.xml: 绘制/ btn_background_expanded.xml:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="?android:colorControlHighlight">
<item>
<shape android:shape="rectangle">
<solid android:color="?android:colorAccent" />
<corners
android:radius="@dimen/floating_button_radius"
/>
</shape>
</item>
</ripple>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.