Android浮动操作按钮切换效果：Fab Transformation
jopen
9年前
这个库支持Material Design指南的Android浮动操作按钮切换效果。
Screenshot
Installation
Add the dependency (jcenter) to yourbuild.gradle.
dependencies { compile 'konifar:fab-transformation:1.0.0' }How to use
This is footer toolbar transformation example.
Layout
- Put Floating Action Button and transform view in your layout.
- Wrap transform view in Circular reveal container.
<RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <!-- Any Fab is OK. (Third party library, your custom view and so on) --> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" style="@style/FabMargin" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:src="@drawable/ic_share_white_24dp" app:backgroundTint="@color/blue_accent200" app:borderWidth="0dp" /> <!-- You must wrap transform view in Circular reveal container --> <io.codetail.widget.RevealFrameLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true"> <!-- Transform view --> <android.support.v7.widget.Toolbar android:id="@+id/toolbar_footer" android:layout_width="match_parent" android:layout_height="@dimen/footer" android:background="@color/blue_accent200" android:visibility="invisible"> <!-- Put view you like --> </android.support.v7.widget.Toolbar> </io.codetail.widget.RevealFrameLayout> </RelativeLayout>
Java
Transform fab to other view.
FabTransformation.with(fab) .transformTo(toolbarFooter);
Transform other view to fab.
FabTransformation.with(fab) .transformFrom(toolbarFooter);
Options
FabTransformation.with(fab) .overlay(overlayView) .duration(500) .setListener(new FabTransformation.OnTransformListener() { @Override public void onStartTransform() { // } @Override public void onEndTransform() { // } }) .transformFrom(toolbarFooter);Requirements
Android 2.3+