FancyButtons一个漂亮按钮的库

 

一个功能强大且全面的按钮控件，是目前我见过的最好使的按钮。

支持给按钮添加图标，并且可通过属性设置手指按钮的效果，不需要在写<selector>文件。

项目地址：https://github.com/medyo/fancybuttons

如何添加到工程中：

1. 导入控件源码

2.导入控件属性文件attrs.xml

01.<?xml version="1.0" encoding="utf-8"?>

02.<resources>

03.<declare-styleable name="FancyButtonsAttrs">

04.<attr name="fb_defaultColor" format="color"  />

05.<attr name="fb_text" format="string"  />

06. 

07.<attr name="fb_textColor" format="color"  />

08.<attr name="fb_iconColor" format="color"  />

09. 

10.<attr name="fb_textFont" format="string"  />

11.<attr name="fb_iconFont" format="string"  />

12. 

13.<attr name="fb_textSize" format="dimension"  />

14.<attr name="fb_iconResource" format="integer"  />

15.<attr name="fb_fontIconResource" format="string"  />

16.<attr name="fb_fontIconSize" format="dimension"  />

17.<attr name="fb_iconPosition" format="enum">

18.<enum name="left" value="1" />

19.<enum name="right" value="2" />

20.<enum name="top" value="3" />

21.<enum name="bottom" value="4" />

22.</attr>

23. 

24.<attr name="fb_textPosition" format="enum">

25.<enum name="left" value="1" />

26.<enum name="right" value="2" />

27.<enum name="top" value="3" />

28.<enum name="bottom" value="4" />

29.</attr>

30. 

31.<attr name="fb_textGravity" format="enum">

32.<enum name="top" value="0x30" />

33.<enum name="bottom" value="0x50" />

34.<enum name="left" value="0x03" />

35.<enum name="right" value="0x05" />

36.<enum name="center_vertical" value="0x10" />

37.<enum name="fill_vertical" value="0x70" />

38.<enum name="center_horizontal" value="0x01" />

39.<enum name="fill_horizontal" value="0x07" />

40.<enum name="center" value="0x11" />

41.<enum name="fill" value="0x77" />

42.<enum name="clip_vertical" value="0x80" />

43.<enum name="clip_horizontal" value="0x08" />

44.<enum name="start" value="0x00800003" />

45.<enum name="end" value="0x00800005" />

46.</attr>

47. 

48.<attr name="fb_iconPaddingLeft" format="dimension" />

49.<attr name="fb_iconPaddingRight" format="dimension" />

50.<attr name="fb_iconPaddingTop" format="dimension" />

51.<attr name="fb_iconPaddingBottom" format="dimension" />

52. 

53.<attr name="fb_borderColor" format="color" />

54.<attr name="fb_borderWidth" format="dimension"/>

55.<attr name="fb_focusColor" format="color" />

56.<attr name="fb_radius" format="dimension" />

57. 

58.<attr name="fb_ghost" format="boolean"></attr>

59.</declare-styleable>

60. 

61.</resources>

属性很强大呀！

3.导入assets资源文件，包含俩个文件夹：fonts、iconfonts。

ok，接下来就可以使用控件了。

如何使用：

1. 布局文件中添加命名空间，这是使用自定义控件必须要做的。

1.xmlns:fancy="http://schemas.android.com/apk/res-auto"

如下图：

2. 创建控件

01.<mehdi.sakout.fancybuttons.FancyButton android:layout_width="wrap_content" android:layout_height="wrap_content"

02.fancy:fb_text="Create an account"

03.fancy:fb_textColor="#FFFFFF"

04.fancy:fb_radius="30dp"

05.fancy:fb_defaultColor="#ff5f69"

06.fancy:fb_focusColor="#ff838b"

07.fancy:fb_borderWidth="1dp"

08.fancy:fb_borderColor="#FFFFFF"

09./>

完整的实例可以点击上面的"下载源码"按钮，那是我做的demo。

接下来介绍下他的强大属性。

属性：

XML布局文件中使用	Java代码中使用	描述
fancy:fb_text	setText(String)	按钮上文字
fancy:fb_textColor	setTextColor(int)	按钮文字的颜色
fancy:fb_textSize	setTextSize(int)	文字的大小
fancy:fb_textFont	setCustomTextFont(String)	文字的字体
fancy:fb_textGravity	setTextGravity(Int)	文字的对其方式
fancy:fb_iconResource	setIconResource(Drawable)	设置按钮上的图标，引用的是个图片
fancy:fb_iconPosition	setsetIconPosition(int)	图标相对于文字的位置，有如下值 : Left, Right, Top, Bottom
fancy:fb_fontIconResource	setIconResource(String)	和fancy:fb_iconResource一样，也是设置按钮图标的，只是这里引用的是个图标的编码，如：""是下载图标，""是上传图标。实际的原理是将编码设置到TextView上了。
fancy:fb_fontIconSize	setFontIconSize(int)	设置以fancy:fb_fontIconResource方式设置的图标的图标大小。
fancy:fb_iconFont	setCustomIconFont(String)	设置以fancy:fb_fontIconResource方式设置的图标的图标字体
fancy:fb_borderWidth	setBorderWidth(int)	边框的宽度
fancy:fb_borderColor	setBorderColor(int)	边框的颜色
fancy:fb_defaultColor	setBackgroundColor(int)	手指未触碰时的背景颜色
fancy:fb_focusColor	setFocusBackgroundColor(int)	手指按下时的背景颜色
fancy:fb_radius	setRadius(int)	设置按钮为圆角的，该属性用于设置圆角的半径
fancy:fb_iconPaddingLeft	setIconPadding(int,int,int,int)	图标的左间距，一般用于设置图标与文字的距离
fancy:fb_iconPaddingRight	setIconPadding(int,int,int,int)	图标的右间距
fancy:fb_iconPaddingTop	setIconPadding(int,int,int,int)	图标的上间距
fancy:fb_iconPaddingBottom	setIconPadding(int,int,int,int)	图标的下间距
fancy:fb_ghost	setGhost(boolean)	是否为空洞效果，空洞效果时，按钮背景透明，触碰时只有边框会产生效果