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中添加你的動畫。