如何将浮动操作按钮转换为具有相关操作的菜单
How to Transform floating-action-button into a menu with the related actions
如何将浮动操作按钮 (FAB) 转换为菜单,这是我的 xml 布局
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.applandeo.materialcalendarview.CalendarView
android:id="@+id/calendarView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="1"
app:datePicker="true"
app:eventsEnabled="true"
app:layout_constraintBottom_toTopOf="@+id/floatingActionButton3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</com.applandeo.materialcalendarview.CalendarView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/floatingActionButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:clickable="true"
android:focusable="true"
android:scaleType="center"
android:tint="@color/blanco"
app:backgroundTint="@color/colorAndroid"
app:fabSize="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="@android:drawable/ic_input_add" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>
我想将按钮转换成相关的操作菜单
"Transform into a menu with the related actions" 如图所示 material 设计:
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1pdXG8K2i6IR9i5V5raflvDwuADXdUACM%2Ffab-transitions-menu-1.mp4
android 中有一个本机浮动操作按钮,但目前没有可用代码使其扩展到 sub-buttons/actions。您可以通过在布局上添加多个 FAB 来模拟这种效果,一个在另一个之上,当您单击顶部的一个时,您可以通过更改屏幕坐标来为其余部分设置动画以展开:
这是 FAB 的简单布局:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/fab4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="@drawable/ic_action_download"
app:fabSize="mini"
app:rippleColor="@color/download_in_progress"/>
</LinearLayout>
<LinearLayout
android:id="@+id/fab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="@drawable/ic_action_download"
app:fabSize="mini"
app:rippleColor="@color/download_in_progress"/>
</LinearLayout>
<LinearLayout
android:id="@+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="@drawable/ic_action_download"
app:fabSize="mini"
app:rippleColor="@color/download_in_progress"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:gravity="center_vertical">
<android.support.design.widget.FloatingActionButton
android:id="@+id/topFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="@drawable/ic_action_download"
app:backgroundTint="@color/white"
app:borderWidth="4dp"
app:elevation="12dp"
app:rippleColor="@color/download_in_progress"/>
</LinearLayout>
</FrameLayout>
然后:
//to expand the buttons:
topFab.animate().rotationBy(180);
fab2.animate().translationY(-150);
fab3.animate().translationY(-300);
fab4.animate().translationY(-450);
//to collapse them:
topFab.animate().rotationBy(-180);
fab2.animate().translationY(0);
fab3.animate().translationY(0);
fab4.animate().translationY(0);
您还可以切换它们的可见性,以消除动画时的任何视觉滞后。
或者,您可以使用为您完成此操作的库。一个例子是 Clans/FloatingActionButton
如何将浮动操作按钮 (FAB) 转换为菜单,这是我的 xml 布局
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.applandeo.materialcalendarview.CalendarView
android:id="@+id/calendarView"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:layout_weight="1"
app:datePicker="true"
app:eventsEnabled="true"
app:layout_constraintBottom_toTopOf="@+id/floatingActionButton3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</com.applandeo.materialcalendarview.CalendarView>
<android.support.design.widget.FloatingActionButton
android:id="@+id/floatingActionButton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="16dp"
android:clickable="true"
android:focusable="true"
android:scaleType="center"
android:tint="@color/blanco"
app:backgroundTint="@color/colorAndroid"
app:fabSize="normal"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:srcCompat="@android:drawable/ic_input_add" />
</android.support.constraint.ConstraintLayout>
</FrameLayout>
我想将按钮转换成相关的操作菜单
"Transform into a menu with the related actions" 如图所示 material 设计:
https://storage.googleapis.com/spec-host-backup/mio-design%2Fassets%2F1pdXG8K2i6IR9i5V5raflvDwuADXdUACM%2Ffab-transitions-menu-1.mp4
android 中有一个本机浮动操作按钮,但目前没有可用代码使其扩展到 sub-buttons/actions。您可以通过在布局上添加多个 FAB 来模拟这种效果,一个在另一个之上,当您单击顶部的一个时,您可以通过更改屏幕坐标来为其余部分设置动画以展开:
这是 FAB 的简单布局:
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/fab4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="@drawable/ic_action_download"
app:fabSize="mini"
app:rippleColor="@color/download_in_progress"/>
</LinearLayout>
<LinearLayout
android:id="@+id/fab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="@drawable/ic_action_download"
app:fabSize="mini"
app:rippleColor="@color/download_in_progress"/>
</LinearLayout>
<LinearLayout
android:id="@+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:gravity="center_vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="text"/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="@drawable/ic_action_download"
app:fabSize="mini"
app:rippleColor="@color/download_in_progress"/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:gravity="center_vertical">
<android.support.design.widget.FloatingActionButton
android:id="@+id/topFab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end|bottom"
android:layout_margin="16dp"
android:src="@drawable/ic_action_download"
app:backgroundTint="@color/white"
app:borderWidth="4dp"
app:elevation="12dp"
app:rippleColor="@color/download_in_progress"/>
</LinearLayout>
</FrameLayout>
然后:
//to expand the buttons:
topFab.animate().rotationBy(180);
fab2.animate().translationY(-150);
fab3.animate().translationY(-300);
fab4.animate().translationY(-450);
//to collapse them:
topFab.animate().rotationBy(-180);
fab2.animate().translationY(0);
fab3.animate().translationY(0);
fab4.animate().translationY(0);
您还可以切换它们的可见性,以消除动画时的任何视觉滞后。
或者,您可以使用为您完成此操作的库。一个例子是 Clans/FloatingActionButton