Android浮动操作按钮: RapidFloatingActionButton

jopen 9年前
Android浮动操作按钮的快速解决方案,这不仅仅是个按钮,而是一个能显示菜单的按钮。
Android浮动操作按钮: RapidFloatingActionButton

使用说明:


依赖

Gradle(检查最新版本):


compile 'com.github.wangjiegulu:RapidFloatingActionButton:x.x.x'


xxx是代表版本号,


Maven(检查最新版本):

<dependency>      <groupId>com.github.wangjiegulu</groupId>      <artifactId>RapidFloatingActionButton</artifactId>      <version>x.x.x</version>  </dependency>

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.RapidFloatingActionButton>)的最外层布局添加<com.wangjie.rapidfloatingactionbutton.RapidFloatingActionLayout>  。


属性

RapidFloatingActionLayout:


  rfal_frame_color: 展开RFAB的时候的背景颜色,默认为白色。

  rfal_frame_alpha: 展开RFAB的时候的背景透明度(0~1),默认是0.7


RapidFloatingActionButton:

  rfab_size:  RFAB的大小,只支持两种大小(Material Design):

          normal: 直径 56dp

          mini: 直径 40dp

  rfab_drawable:  RFAB的drawable图片,默认 drawable i时 "+"图标。

  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.mipmap.ico_test_d)                          .setIconNormalColor(0xffd84315)                          .setIconPressedColor(0xffbf360c)                          .setWrapper(0)          );          items.add(new RFACLabelItem<Integer>()                          .setLabel("tiantian.china.2@gmail.com")                          .setResId(R.mipmap.ico_test_c)                          .setIconNormalColor(0xff4e342e)                          .setIconPressedColor(0xff3e2723)                          .setLabelColor(Color.WHITE)                          .setLabelSizeSp(14)                          .setLabelBackgroundDrawable(ABShape.generateCornerShapeDrawable(0xaa000000, ABTextUtil.dip2px(context, 4)))                          .setWrapper(1)          );          items.add(new RFACLabelItem<Integer>()                          .setLabel("WangJie")                          .setResId(R.mipmap.ico_test_b)                          .setIconNormalColor(0xff056f00)                          .setIconPressedColor(0xff0d5302)                          .setLabelColor(0xff056f00)                          .setWrapper(2)          );          items.add(new RFACLabelItem<Integer>()                          .setLabel("Compose")                          .setResId(R.mipmap.ico_test_a)                          .setIconNormalColor(0xff283593)                          .setIconPressedColor(0xff1a237e)                          .setLabelColor(0xff283593)                          .setWrapper(3)          );          rfaContent                  .setItems(items)                  .setIconShadowRadius(ABTextUtil.dip2px(context, 5))                  .setIconShadowColor(0xff888888)                  .setIconShadowDy(ABTextUtil.dip2px(context, 5))          ;          rfabHelper = new RapidFloatingActionHelper(                  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();      }  }

 

RFAB要实现展开效果还需要一个对RapidFloatingActionContent的实现,用来设置RFAB展开时的内容。

这里有一个RapidFloatingActionContent的快速实现方案:RapidFloatingActionContentLabelList。你可以添加一些item(RFACLabelItem,当然我们不建议添加过多的item),同时为每个item设置颜色,图标,阴影,背景图片,文字大小,文字颜色以及动画效果。

想预览此效果,可以查看 The top picture effects 或者 Inbox of Google


最后,你需要RapidFloatingActionButtonHelper来将他们联系在一起。


关于展开样式:


如果你并不喜欢RapidFloatingActionContentLabelList,你可以扩展自己的内容样式。继承com.wangjie.rapidfloatingactionbutton.RapidFloatingActionContent,初始化内容布局和样式,触发setRootView(xxx); 方法。如果想要更多的动画效果,override这些方法:


public void onExpandAnimator(AnimatorSet animatorSet);  public void onCollapseAnimator(AnimatorSet animatorSet);


在animatorSet中添加你的动画。

项目主页:http://www.open-open.com/lib/view/home/1437573674037