一个功能强大且全面的按钮控件,是目前我见过的最好使的按钮。
支持给按钮添加图标,并且可通过属性设置手指按钮的效果,不需要在写<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) | 是否为空洞效果,空洞效果时,按钮背景透明,触碰时只有边框会产生效果 |