一个功能强大且全面的按钮控件,是目前我见过的最好使的按钮。
支持给按钮添加图标,并且可通过属性设置手指按钮的效果,不需要在写<selector>文件。
项目地址:https://github.com/medyo/fancybuttons
如何添加到工程中:
-
导入控件源码
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.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) | 是否为空洞效果,空洞效果时,按钮背景透明,触碰时只有边框会产生效果 |