博客
关于我
OC Control FHXBtn(按键)
阅读量:670 次
发布时间:2019-03-15

本文共 3721 字,大约阅读时间需要 12 分钟。

无遗憾的iOS UI组件探索之左边图标按钮实现

作为一名从零开始学习iOS开发的新手,我深知技术学习的艰辛。每一个代号、一行代码背后都承载着知识和成长的痕迹。今天,我们将详细探索如何创建不同风格的左边图标按钮,助力你在iOS开发道路上少走弯路。

左侧图标按钮的核心实现

在本次探索中,我们将重点实现两种不同的左侧图标按钮及其布局设置:

1. 左侧图标按钮的基础创建

代码片段如下:

self.btn = [FHXLeftIconBtn new];self.btn.icon.img(@"home_search_normal");self.btn.iconSize = 20;self.btn.iconLeftDistance = 10;self.btn.titleLeftDistance = 5;self.btn.titlelLabel.str(@"搜索").fnt(14);self.btn.titlelLabel.textColor = [UIColor whiteColor];self.btn.addTo(self.view).border(1,[UIColor whiteColor]).borderRadius(15).bgColor([[UIColor blackColor] colorWithAlphaComponent:0.3]).makeCons(^{    make.centerX.equal.view(self.view);    make.top.equal.view(self.view).constants(250);    make.width.equal.constants(80);    make.height.equal.constants(30);});
  • icon.img(@"home_search_normal"):设置按钮左侧图标的显示内容。
  • iconSize = 20:图标的大小设置。
  • iconLeftDistance = 10:图标与按钮左侧的距离。
  • titleLeftDistance = 5:标题与图标的左侧距离。
2. 左侧图标为中心排列按钮实现
self.btn = [FHXLeftIconCenterBtn new];self.btn.icon.img(@"home_search_normal");self.btn.iconSize = 25;self.btn.titleCenterXDistance = 10;self.btn.iconRightDistance = -1;self.btn.titlelLabel.str(@"搜索").fnt(14);self.btn.titlelLabel.textColor = [UIColor whiteColor];self.btn.addTo(self.view).border(1,[UIColor whiteColor]).borderRadius(4).bgColor([[UIColor blackColor] colorWithAlphaComponent:0.3]).makeCons(^{    make.centerX.equal.view(self.view);    make.top.equal.view(self.view).constants(250);    make.width.equal.constants(70);    make.height.equal.constants(30);});
  • titleCenterXDistance = 10:标题在X轴方向上的偏移。
  • iconRightDistance = -1:图标相对于标题的右侧偏移。

左侧文本按钮的实现细节

接下来,我们将重点学习左侧带有文本的标题按钮实现。

3. 左侧标题按钮的基本配置
@property (nonatomic,strong) FHXLeftTitleBtn *btn;self.btn = [FHXLeftTitleBtn new];self.btn.icon.img(@"home_search_normal");self.btn.iconSize = 20;self.btn.iconLeftDistance = 5;self.btn.titleLeftDistance = 15;self.btn.titlelLabel.str(@"搜索").fnt(14);self.btn.titlelLabel.textColor = [UIColor whiteColor];self.btn.bgColor = [[UIColor blackColor] colorWithAlphaComponent:0.3];self.btn.addTo(self.view).border(1,[UIColor whiteColor]).borderRadius(15).makeCons(^{    make.centerX.equal.view(self.view);    make.top.equal.view(self.view).constants(250);    make.width.equal.constants(80);    make.height.equal.constants(30);});
  • bgColor:按钮的背景颜色设置。
  • borderRadius:按钮的圆角设置。
4. 左侧中心标题按钮的实现
@property (nonatomic,strong) FHXLeftTitleCenterBtn *btn;self.btn = [FHXLeftTitleCenterBtn new];self.btn.icon.img(@"home_search_normal");self.btn.iconSize = 25;self.btn.titleCenterXDistance = -10;self.btn.iconLeftDistance = 5;self.btn.titlelLabel.str(@"搜索").fnt(14);self.btn.titlelLabel.textColor = [UIColor whiteColor];self.btn.addTo(self.view).border(1,[UIColor whiteColor]).borderRadius(4).bgColor([[UIColor blackColor] colorWithAlphaComponent:0.3]).makeCons(^{    make.centerX.equal.view(self.view);    make.top.equal.view(self.view).constants(250);    make.width.equal.constants(70);    make.height.equal.constants(30);});
  • titleCenterXDistance = -10:说明在X轴方向上的中心位置偏移。

顶部图标按钮的布局案例

最后,我们将简要探讨顶部图标按钮的实现:

5. 顶部图标按钮的创建
@property (nonatomic,strong) FHXTopIconBtn *btn;self.btn = [FHXTopIconBtn new];self.btn.icon(img: @"home_search_normal").iconSize = 30;self.btn.iconTopDistance = 5;self.btn.titleTopDistance = 5;self.btn.titlelLabel(str: @"搜索").fnt(14);self.btn.titlelLabel.textColor([UIColor white]);self.btn.addTo(self.view).border(1,[UIColor white]).borderRadius(4).bgColor([[UIColor blackColor] colorWithAlphaComponent:0.3]).makeCons(^{    make.centerX.equal.view(self.view);    make.top.equal.view(self.view).constants(250);    make.width.equal.constants(40);    make.height.equal.constants(60);});
  • iconTopDistance = 5:图标顶部的偏移。
  • titleTopDistance = 5:标题顶部的偏移。

通过如上的多个案例实现,我们全面探索了左侧图标按钮及其布局设置。希望从中你能汲取到的每一行代码和布局设置,都能成为你成为一名优秀iOS开发者的基石。

转载地址:http://uuamz.baihongyu.com/

你可能感兴趣的文章
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
查看>>
Mysql中各类锁的机制图文详细解析(全)
查看>>
MySQL中地理位置数据扩展geometry的使用心得
查看>>
Mysql中存储引擎简介、修改、查询、选择
查看>>
Mysql中存储过程、存储函数、自定义函数、变量、流程控制语句、光标/游标、定义条件和处理程序的使用示例
查看>>
mysql中实现rownum,对结果进行排序
查看>>
mysql中对于数据库的基本操作
查看>>
Mysql中常用函数的使用示例
查看>>
MySql中怎样使用case-when实现判断查询结果返回
查看>>
Mysql中怎样使用update更新某列的数据减去指定值
查看>>
Mysql中怎样设置指定ip远程访问连接
查看>>
mysql中数据表的基本操作很难嘛,由这个实验来带你从头走一遍
查看>>
Mysql中文乱码问题完美解决方案
查看>>
mysql中的 +号 和 CONCAT(str1,str2,...)
查看>>
Mysql中的 IFNULL 函数的详解
查看>>
mysql中的collate关键字是什么意思?
查看>>
MySql中的concat()相关函数
查看>>
mysql中的concat函数,concat_ws函数,concat_group函数之间的区别
查看>>