花式按钮实例讲解

作者:创世魂

 

● 本类说明

通过本组件可快速实现一个带图标的按钮。

注意:本组件位于“花式按钮组件”模块中,欲使用本组件需添加其模块。

 

界面设计如下图:

引用“花式按钮组件”模块后,在“扩展容器组件”中可找到此组件。

随后将其拖放到界面设计器中。

 

代码如下图:

保存布局后,代码效果如下。

 

运行效果如下图:

花式按钮默认效果如下:

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):

最终可看到花式按钮组件四个角变圆,角度越大越圆。