RapidFloatingActionButton
- 按钮 (Button)
- ★★★★★
- 2015-07-16 16:58
- 1600 kb
- Android Studio
- 131 次
- 18 次
- https://github.com/wangjiegulu/RapidFloatingActionButton
Quick solutions for Floating Action Button,RapidFloatingActionButton(RFAB)
介绍:
运行效果:
使用说明:
依赖
Gradle(检查最新版本):
1
|
compile
'com.github.wangjiegulu:RapidFloatingActionButton:x.x.x'
|
xxx是代表版本号,
Maven(检查最新版本):
1
2
3
4
5
|
<dependency>
<groupId>com.github.wangjiegulu</groupId>
<artifactId>RapidFloatingActionButton</artifactId>
<version>x.x.x</version>
</dependency>
|
activity_main.xml:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<com.wangjie.rapidfloatingactionbutton.RapidFloatingActionLayout
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
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
|
@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这些方法:
1
2
|
public void onExpandAnimator(AnimatorSet animatorSet);
public void onCollapseAnimator(AnimatorSet animatorSet);
|
在animatorSet中添加你的动画。