首页 > 其他分享 >(原创)【B4A】一步一步入门06:Button,背景图片、渐变、圆角、FontAwesome(控件篇02)

(原创)【B4A】一步一步入门06:Button,背景图片、渐变、圆角、FontAwesome(控件篇02)

时间:2023-03-07 10:44:06浏览次数:56  
标签:02 控件 一步 设置 按钮 文本 文本属性 属性

一、前言

本篇教程,我们来讲一下最常用的控件:Button(按钮)。

本篇教程将会讲解按钮的文本样式、背景样式,以及诸如FontAwesome、圆角等如何设置。

相信看完的你,一定会有所收获!

本文地址:https://www.cnblogs.com/lesliexin/p/17185756.html


二、 文本样式

1,文本大小

我们在按钮的属性窗口中,设置属性【文本属性-Size】,即可调整按钮文本的大小。具体效果如下:

image

2,文本颜色

我们点击属性【文本属性-Text Color】的下拉箭头,即可选择颜色或者输入ARGB的值设置颜色。具体效果如下:

image

3,文本对齐方式

默认状态下,按钮文本是“上下居中”、“左右居中”的,我们通过【文本属性-Horizontal Alignment】和【文本属性-Vertical Alignment】这两个属性来设置文本的对齐方式。

Horizontal Alignment的3个属性值是:LEFT(居左)、RIGHT(居右)、CENTER_HORIZONTAL(左右居中)。Vertical Alignment的3个属性值是:TOP(居上)、BOTTOM(居下)、CENTER_VERTICAL(上下居中)。

具体效果如下:

image

4,文本样式

属性【文本属性-Style】可以设置按钮文本样式,其属性值分别是:NORMAL(正常)、BOLD(粗体)、ITALIC(斜体)、BOLD_ITALIC(粗斜体)。具体效果如下:

image

5,文本字体

在属性【文本属性-Typeface】中,可以设置文本的字体,其属性值分别是:DEFAULT(默认)、SERIF(衬线字体)、SANS-SERIF(无衬线字体)、MONOSPACE(等宽字体)、FontAwesome(FontAwesome图标)、Material Icons(Material图标)。

其中,FontAwesome、Material Icons 可以快速选择图标,此图标包含常用的功能图标,操作方式如下:

image

文本字体各属性值对应的效果如下:

image

6,单行显示、文本截取

默认情况下,当按钮文本内容超出控件范围时,将会自动换行显示,如果不需要,则可以设置属性【文件属性-Single Line】,此时按钮文本将不会自动换行。同时因为不再换行显示,所以可能会出现文本被截断的情况,如图所示:

image

此时,可以设置属性【文本属性-Ellipsize】,以将多余的文本将以“...”代替。其属性值有:NONE、START、MIDDLE、END,具体效果如图所示:

image


三、 背景样式

默认状态下,按钮均是系统的默认样式,如果需要设置背景颜色、圆角等,就需要设置属性【Button Properties-Drawable】。其属性值有两个:DefaultDrawbale(默认绘制方式)和StatelistDrawble(状态列表绘制方式)。

选中StatelistDrawble后,会有三个状态可以自定义,分别是:Enabled Drawaable(正常状态)、Disabled Drawable(不可用状态)、Pressed Drawable(按下时状态)。如图所示:

image

此三种状态的具体样式设置方式是一样的,所以本教程仅以Enabled Drawaable为例进行演示和讲解。

Enabled Drawaable有三种绘制方式:ColorDrawable(背景颜色)、GradientDrawable(渐变背景)、BitmapDrawable(背景图片),下面我们分别进行讲解。

(一)ColorDrawable(背景颜色)

我们选择此项后,共有四个属性可供设置。

1,Color

设置按钮的背景颜色,可以选择或者输入ARGB的值进行设置。

2,边框角度

设置边框角度,0即是直角,大于0则为圆角,当角度大于宽度的一半时,按钮则显示为圆形。

3,边框宽度

设置模型的宽度,0即是没有边框,大于0则显示指定宽度的边框。

4,边框颜色

设置边框的颜色,可以选择或者输入ARGB的值进行设置。

具体效果如下:

image

(二)GradientDrawable(渐变背景)

我们选择此项后,共有四个属性可供设置。

1,Corner Radius

设置边框角度,0即是直角,大于0则为圆角,当角度大于宽度的一半时,按钮则显示为圆形。

2,首先颜色

设置渐变的开始颜色,可以选择或者输入ARGB的值进行设置。

3,次选颜色

设置渐变的结束颜色,可以选择或者输入ARGB的值进行设置。

具体效果如下:

image

4,方向

设置渐变的方向,共有8个选项:LEFT_RIGHT(从左往右)、RIGHT_LEFT(从右往左)、TOP_BOTTOM(从上往下)、BOTTOM_TOP(从下往上)、TL_BR(从左上往右下)、BR_TL(从右下往左上)、BL_TR(从左下往右上)、TR_BL(从右上往左下)。具体效果如下:

image

(三)BitmapDrawable(背景图片)

我们选择此项后,共有两个属性可供设置。

1,图像文件

设置图片的背景图片,支持透明。

首先需要将图片文件使用【文件窗口-添加文件】的方式添加到设计器中,然后再选择图片。具体操作步骤如下:

image

2,Gravity

设置图片的填充试,共有3个选项:Fill(图片适应控件尺寸,会发生拉伸压缩)、Center(图片保持原始尺寸、比例,图片中心位于控件中心)、Top-Left(图片保持原始尺寸、比例,图片左上角位于控件左上角)。具体效果如下:

image


四、按钮事件

按钮共有两个事件:Click(点击)和LongClick(长按)。

1,Click(点击)

在点击控件时,将触发本事件,本事件是按钮最常用的事件。

2,LongClick(长按)

长按此控件,将触发本事件。

事件操作演示:

image


五、结语

本篇教程将Button(按钮)控件的常用属性都进行了介绍,在日常使用中,这些属性已经基本够用。

因为控件的很多属性与事件都是类似的,所以在后续教程中,控件的类似属性将不再赘述,参考本篇中的讲解即可。


-【END】-

标签:02,控件,一步,设置,按钮,文本,文本属性,属性
From: https://www.cnblogs.com/lesliexin/p/17185756.html

相关文章

  • 116、tail+grep命令——2023年3月7日10:01:06
    2023年2月20日14:50:371、tail基本命令tail命令.因为查看日志通常从后面最新的日志去看,tail命令就是从后往前找.比如下述命令会显示access.log的最后10行的内......
  • LeetCode1024 -- 贪心
    1.题目描述这题题意感觉说的不是很清楚,容易让人产生歧义!其实题意很简单,给你一个链表head,你深拷贝它,然后返回即可,注意不能修改原链表/*//DefinitionforaNode.cl......
  • idea2021通用配置
    1、设置入口目前使用的是新版本2021.2,所以全局配置的入口会跟之前旧版本的有些不同。打开idea,可以看到customize,然后点击allsettings,里面就是所有的全局配置选项,配......
  • C/C++教师工资管理系统[2023-03-06]
    C/C++教师工资管理系统[2023-03-06]题目描述:每个教师的月工资信息为:教师号、姓名、性别、单位名称、联系电话、基本工资、津贴、生活补贴、应发工资、电话费、水电费、房......
  • 2023/3/6
    今天建民老师在课上给我们出了一道求数组子数组最大和的题目,冥思苦想了许久都没有想出来,听到其他同学讲解的一个思路是定义三个数组,第一个数组存储原数组,第二个数组存储数......
  • 2023/3/6
    安卓系统的画中画功能是一项非常实用的功能。该功能可让用户在观看视频或进行视频通话时同时进行其他操作,如查看邮件或发送消息。使用该功能只需在支持画中画的应用中启用......
  • 2023/3/6每日随笔
    今天上午上了工程数学,学的主要是搜索,学到了0.618直接搜索,还有一些其他的搜索,就是有点听不懂,然后下午上了建民老师的课,了解了一个优秀程序员的素质,然后对于AndriodStudio的......
  • 每日总结_20230306
    今天我学习了Javaweb中的Servlet和JSP,了解了Servlet的生命周期、请求和响应过程等概念,掌握了使用JSP进行动态网页开发的方法。同时,我也学习了使用Tomcat服务器进行Javaweb......
  • 2023年如何在Google做外贸
    2023年如何在Google做外贸答案是:利用谷歌SEO获取自然流量促进成交。随着全球化和数字化的发展,外贸行业越来越重视互联网的渠道拓展。在Google搜索引擎上做好SEO优化,是吸引国......
  • 2023年小程序游戏发展前景分析
    随着移动互联网时代的到来,越来越多的人参与了小程序开发。目前根据《2022微信小游戏增长白皮书》,微信小游戏开发人员人数已超过10万人。今天就来一起聊聊小程序游戏未来的发......