Floating Action Button的快速实现
ec3y
9年前
RapidFloatingActionButton 是 Floating Action Button 的快速实现，RapidFloatingActionButton（以下简称RFAB）
使用方式：
依赖：
AndroidBucket：基础工具包
AndroidInject：注解框架
activity_main.xml：
<com.wangjie.rapidfloatingactionbutton.RapidFloatingActionLayout xmlns:rfal="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main_rfal" android:layout_width="match_parent" android:layout_height="match_parent" rfal:rfal_frame_color="#ffffff" rfal:rfal_frame_alpha="0.7" > <com.wangjie.rapidfloatingactionbutton.RapidFloatingActionButton xmlns:rfab="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main_rfab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" android:layout_marginRight="15dp" android:layout_marginBottom="15dp" android:padding="8dp" rfab:rfab_size="normal" rfab:rfab_drawable="@drawable/rfab__drawable_rfab_default" rfab:rfab_color_normal="#37474f" rfab:rfab_color_pressed="#263238" rfab:rfab_shadow_radius="7dp" rfab:rfab_shadow_color="#999999" rfab:rfab_shadow_dx="0dp" rfab:rfab_shadow_dy="5dp" /> </com.wangjie.rapidfloatingactionbutton.RapidFloatingActionLayout>
在需要增加RFAB最外层使用<com.wangjie.rapidfloatingactionbutton.RapidFloatingActionLayout>，按钮使用<com.wangjie.rapidfloatingactionbutton.RapidFloatingActionButton>
<h3 style="color: rgb(51, 51, 51); font-family:;" ;";font-size:1.5em;"=""> 属性解释</h3> <h4 style="color: rgb(51, 51, 51); font-family:;" ;";font-size:1.25em;"=""> RapidFloatingActionLayout:</h4>
rfal_frame_color: 展开RFAB时候最外覆盖层的颜色，默认是纯白色 rfal_frame_alpha: 展开RFAB时候最外覆盖层的透明度(0 ~ 1)，默认是0.7<h4 style="color: rgb(51, 51, 51); font-family:;" ;";font-size:1.25em;"=""> RapidFloatingActionButton:
</h4>
rfab_size: RFAB的尺寸大小，只支持两种尺寸（Material Design规范）： normal: 直径56dp mini: 直径40dp rfab_drawable: RFAB中间的图标，默认是一个"+"图标 rfab_color_normal: RFAB背景的普通状态下的颜色。默认是白色 rfab_color_pressed: RFAB背景的触摸按下状态的颜色。默认颜色是"#dddddd" rfab_shadow_radius: RFAB的阴影半径。默认是0，表示没有阴影 rfab_shadow_color: RFAB的阴影颜色。默认是透明，另外如果rfab_shadow_radius为0，则该属性无效 rfab_shadow_dx: RFAB的阴影X轴偏移量。默认是0 rfab_shadow_dy: RFAB的阴影Y轴偏移量。默认是0
MainActivity：
@AILayout(R.layout.activity_main) public class MainActivity extends AIActionBarActivity implements RapidFloatingActionContentLabelList.OnRapidFloatingActionContentListener { @AIView(R.id.activity_main_rfal) private RapidFloatingActionLayout rfaLayout; @AIView(R.id.activity_main_rfab) private RapidFloatingActionButton rfaBtn; private RapidFloatingActionButtonHelper rfabHelper; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); RapidFloatingActionContentLabelList rfaContent = new RapidFloatingActionContentLabelList(context); rfaContent.setOnRapidFloatingActionContentListener(this); List<RFACLabelItem> items = new ArrayList<>(); items.add(new RFACLabelItem<Integer>() .setLabel("Github: wangjiegulu") .setResId(R.drawable.ic_launcher) .setIconNormalColor(0xffd84315) .setIconPressedColor(0xffbf360c) .setWrapper(0) ); items.add(new RFACLabelItem<Integer>() .setLabel("tiantian.china.2@gmail.com") .setResId(R.drawable.ic_launcher) .setIconNormalColor(0xff4e342e) .setIconPressedColor(0xff3e2723) .setWrapper(1) ); items.add(new RFACLabelItem<Integer>() .setLabel("WangJie") .setResId(R.drawable.ic_launcher) .setIconNormalColor(0xff056f00) .setIconPressedColor(0xff0d5302) .setWrapper(2) ); items.add(new RFACLabelItem<Integer>() .setLabel("Compose") .setResId(R.drawable.ic_launcher) .setIconNormalColor(0xff283593) .setIconPressedColor(0xff1a237e) .setWrapper(3) ); rfaContent .setItems(items) .setIconShadowRadius(ABTextUtil.dip2px(context, 5)) .setIconShadowColor(0xff999999) .setIconShadowDy(ABTextUtil.dip2px(context, 5)) ; rfabHelper = new RapidFloatingActionButtonHelper( context, rfaLayout, rfaBtn, rfaContent ).build(); } @Override public void onRFACItemLabelClick(int position, RFACLabelItem item) { Toast.makeText(getContext(), "clicked label: " + position, Toast.LENGTH_SHORT).show(); rfabHelper.toggleContent(); } @Override public void onRFACItemIconClick(int position, RFACLabelItem item) { Toast.makeText(getContext(), "clicked icon: " + position, Toast.LENGTH_SHORT).show(); rfabHelper.toggleContent(); } } 除了xml中设置的RapidFloatingActionLayout和RapidFloatingActionButton之外，还需要RapidFloatingActionContent的实现类来填充和指定RFAB的内容和形式。
这里提供了一个快速的RapidFloatingActionContent的实现解决方案:RapidFloatingActionContentLabelList。你可以加入多个item（RFACLabelItem，当然，不建议加太多的item，导致超过一个屏幕），然后设置每个item的颜色、图标、阴影甚至动画。
它的效果可参考最上面的效果图片或者Google的Inbox的效果。
除此之外，你还需要使用RapidFloatingActionButtonHelper来把以上所有零散的组件组合起来。
关于扩展：
如果你不喜欢默认提供的RapidFloatingActionContentLabelList，理论上你可以扩展自己的内容样式。方法是继承com.wangjie.rapidfloatingactionbutton.RapidFloatingActionContent，然后初始化内容布局和样式，并调用父类的setRootView(xxx);方法即可。如果你需要增加动画，可以重写如下方法：
public void onExpandAnimator(AnimatorSet animatorSet); public void onCollapseAnimator(AnimatorSet animatorSet);
把需要的Animator增加到animatorSet中即可
另外，作者也会不定期增加更多的RapidFloatingActionContent的扩展