作者:创世魂
● 本类说明
通过本组件可快速实现一个带图标的按钮。
注意:本组件位于“花式按钮组件”模块中,欲使用本组件需添加其模块。
界面设计如下图:
引用“花式按钮组件”模块后,在“扩展容器组件”中可找到此组件。
随后将其拖放到界面设计器中。
代码如下图:
保存布局后,代码效果如下。
运行效果如下图:
花式按钮默认效果如下:
1、背景色为黑色,如需修改颜色需要通过“背景颜色”属性修改。
2、文本色为白色,如需修改颜色需要通过“字体颜色”属性修改。
3、不设置标题的情况下,默认会出现一个“Fancy Button”的标题,修改文本通过“标题”属性修改。
● 图标(写)
帮助文档如下图:
顾名思义,通过本属性可设置一个图标资源。
属性值的类型为“可绘制对象类”。
代码编写如下图:
1、定义类型为“可绘制资源”的变量,导入一张图片。
2、通过“载入可绘制资源()”方法将可绘制资源转换成可绘制对象类,并赋值给“图标”属性。
运行结果如下图(GIF):
最终可看到“花式按钮”被点击后增加了一个图标。
● 图标资源(写)
帮助文档如下图:
通过本属性可设置“可绘制资源”类型的图标。
代码编写如下图:
1、定义类型为“可绘制资源”的变量,初始值导入图片。
2、调用“图标资源”属性设置定义的资源变量。
运行结果如下图(GIF):
最终可看到“花式按钮”被点击后增加了一个图标。
● 图标位置(写)
帮助文档如下图:
顾名思义,通过本属性可设置图标显示位置。
属性值调用方式“花式按钮图标位置.XXX”。
代码编写如下图:
“花式按钮1”被点击后,设置图标位置为右侧。
运行结果如下图(GIF):
最终可看到按钮被点击后,图标从文本左侧换成了文本右侧。
● 图片框组件(读)
“图片框组件(读)”帮助文档:
通过本属性可读取“花式按钮”中的图片框组件。
注:“图标”和“图标资源”设置的图片都会显示在此图片框上。
“图标缩放方式(写)”帮助文档:
通过本属性可设置“图片框组件”的图片缩放方式。
注:如果使用的为字体图标则无效。
代码编写如下图:
1、定义类型为“图片框”的变量,勾选参考。
2、调用“图片框组件”属性赋值给定义的图片框变量。
3、设置图片框的尺寸。
4、通过花式按钮设置缩放方式为缩放。
运行结果如下图(GIF):
最终可看到不仅图片大小发生变化,同时图片也处于缩放状态(即铺满整个图片组件)。
● 字体图标(写)
帮助文档如下图:
通过本属性可设置字体图标,设置的字体图标来源于“FontAwesome”字体图标库。
属性值提供字体图标的Unicode值,例如:“\uf082”。
字体图标获取方法:
1、进入FontAwesome中文网:http://www.fontawesome.com.cn/faicons
2、进入后随便点击一个图标,例如:file-text。
3、在新的页面中复制Unicode后面的“f15c”。
代码编写如下图:
花式按钮被点击后调用本属性设置字体图标。
运行结果如下图(GIF):
最后可看到字体图标设置成功,默认为白色。
● 图标颜色(写)
帮助文档如下图:
顾名思义,通过本属性可设置字体图标的颜色。
参数值可使用颜色类中的常量值,例如:颜色类.红色。
代码编写如下图:
花式按钮被点击后,设置图标颜色为红色。
运行结果如下图(GIF):
最终可看到图标颜色由白变红。
● 字体图标尺寸(写)
帮助文档如下图:
顾名思义,通过本属性可设置字体图标尺寸。
代码编写如下图:
“花式按钮1”被点击后设置本属性值为20.
运行结果如下图(GIF):
最终可看到图标尺寸明显变大。
● 字体尺寸(写)
帮助文档如下图:
顾名思义,通过本属性可设置花式按钮的标题文本尺寸。
单位像素。
代码编写如下图:
调用本属性设置尺寸为28像素。
运行结果如下图(GIF):
最终可看到文本尺寸明显变大。
● 字体颜色(写)
帮助文档如下图:
顾名思义,通过本属性可设置标题颜色。
代码编写如下图:
“花式按钮1”被点击后,调用本属性设置颜色为红色。
运行结果如下图(GIF):
最终可看到文本颜色变成红色。
● 标题(写)
帮助文档如下图:
顾名思义,通过本属性可更新花式按钮标题。
代码编写如下图:
“花式按钮1”被点击后,更新标题为“新标题”。
运行结果如下图(GIF):
最终可看到标题被修改。
● 文本框组件(读)
“文本框组件(读)”帮助文档:
本属性可取出标题所在的文本框组件。
注意:如果花式按钮未初始化完毕,则本属性返回空对象。
“水平对齐方式(写)”帮助文档:
本属性用于设置标题文本针对文本框组件的内容水平对齐方式。
属性值填写:水平对齐方式.XX
“垂直对齐方式(写)”帮助文档:
本属性用于设置标题文本针对文本框组件的内容垂直对齐方式。
属性值填写:垂直对齐方式.XX
代码编写如下图:
1、调用“文本框组件”读属性读取文本框,并设置背景色和尺寸信息。
2、调用“水平/垂直对齐方式”设置标题对齐方向。
运行结果如下图(GIF):
最终可看到,花式按钮的标题区域变大,并且内容也处于居中底对齐方向。
● 焦点背景色(写)
帮助文档如下图:
通过本属性可开启花式按钮点击时产生一种水波涟漪效果。
涟漪效果的颜色由本属性决定。
如果想取消涟漪效果,设置本属性值为“颜色类.透明色”即可。
代码编写如下图:
“花式按钮1”被点击后,设置本属性值为“颜色类.白色”。
运行结果如下图(GIF):
最终可看到花式按钮被点击后会产生一种白色的水波涟漪效果。
● 边框宽度(写)
“边框宽度(写)”帮助文档:
通过本属性可设置花式按钮的边框宽度。
如果不设置此宽度,默认为0.
“边框颜色(写)”帮助文档:
通过本属性可设置花式按钮的边框颜色。
代码编写如下图:
“花式按钮1”被点击后调用以上两个属性,实现一个宽度为5像素的白色边框。
运行结果如下图(GIF):
最终可看到白色按钮增加了一个白色边框。
● 空心效果(写)
帮助文档如下图:
通过本属性可设置花式按钮的空心效果,即组件背景透明。
代码编写如下图:
“花式按钮1”被点击后设置本属性值为真。
运行结果如下图(GIF):
左图:单独使用“空心效果”的结果。
右图:配合“边框宽度”使用“空心效果”。
● 禁用(写)
以上属性用于设置组件被禁用后的一些禁用效果。
除“禁用”属性为逻辑值之外,其余属性的属性值均是整数颜色值。
代码编写如下图:
1、在花式按钮的属性栏设置相关属性。
2、“花式按钮1”被点击后,设置“禁用=真”。
运行结果如下图(GIF):
最终可看到,当按钮被禁用后按钮颜色将会发生更改,并且按钮也无法再次触发被单击事件。
● 背景颜色(写)
帮助文档如下图:
顾名思义,通过本属性可设置当前花式按钮的背景色。
如果不设置本属性,默认为黑色背景。
代码编写如下图:
按钮被点击后调用本属性,设置背景色为白色。
运行结果如下图(GIF):
最终可看到背景颜色变成白色。
● 自动大写(写)
帮助文档如下图:
顾名思义,通过本属性可自动叫标题文本转换为大写。
代码编写如下图:
1、设置小写的英文标题,例如:abc。
2、“花式按钮1”被点击后设置按钮属性“自动大写=真”
运行结果如下图(GIF):
最终可看到“abc”变成了“ABC”。
● 自定义图标字体(写)
帮助文档如下图:
本属性主要用于更新“花式按钮”组件中的“FontAwesome”字体图标库版本。
并且本属性也只能使用“FontAwesome”的ttf文件来更新图标库。
代码编写如下图:
1、首先去FontAwesome中文网下载最新版的字体文件,网址为:http://www.fontawesome.com.cn/
2、下载完毕后通过“@安卓.外部资产”属性值引用ttf文件。
3、在属性里设置一个最新版中才有的图标。
4、“花式按钮1”被点击后,调用本属性更新字体图标库。
运行结果如下图(GIF):
最终可看到花式按钮被点击后,字体图标成功显示。
● 自定义字体(写)
帮助文档如下图:
顾名思义,通过本属性可设置标题的字体样式(即引用一个ttf格式的字体文件)。
注意:属性值只能提供资产文件名,并且在使用自定义字体的时候,务必保证拥有字体的商用权限。
代码编写如下图:
1、通过属性“@安卓.外部资产”引用一个ttf字体文件。
2、花式按钮1被点击后调用本属性设置引用的字体。
运行结果如下图(GIF):
最终可看到字体样式被更改。
● 图标文本框组件(读)
帮助文档如下图:
通过本属性可读取存放字体图标的文本框组件。
注意:如果花式按钮尚未初始化完毕,本组件会返回空对象。
代码编写如下图:
1、定义“文本框”变量,勾选参考。
2、调用本属性赋值给定义的文本框变量。
3、修改图标文本框的背景色属性。
运行结果如下图(GIF):
最终可看到图标的背景色被修改成红色。
● 置图标内边距
帮助文档如下图:
通过本方法可设置“字体图标”的内边距,可让图标和按钮标题产生间距。
本方法共四个参数,分别设置“左,上,右,下”四个方向的内边距。
代码编写如下图:
“花式按钮1”被点击后分别设置四个参数为10像素。
运行结果如下图(GIF):
最终可看到标题被挤压,证明图标产生了边距。
● 置圆角度数
帮助文档如下图:
通过本方法可设置按钮四个角产生圆角效果。
代码编写如下图:
“花式按钮1”被点击后,分别设置四个角度数为50。
运行结果如下图(GIF):
最终可看到花式按钮组件四个角变圆,角度越大越圆。