码迷,mamicode.com
首页 > 其他好文 > 详细

FancyButtons一个漂亮按钮的库

时间:2015-09-03 16:30:20      阅读:3695      评论:0      收藏:1      [点我收藏+]

标签:

技术分享 技术分享

 

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

支持给按钮添加图标,并且可通过属性设置手指按钮的效果,不需要在写<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一样,也是设置按钮图标的,只是这里引用的是个图标的编码,如:"&#xf0ed;"是下载图标,"&#xf0ee;"是上传图标。实际的原理是将编码设置到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) 是否为空洞效果,空洞效果时,按钮背景透明,触碰时只有边框会产生效果

 

 

FancyButtons一个漂亮按钮的库

标签:

原文地址:http://www.cnblogs.com/ArRan/p/4780252.html

(0)
(3)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!