本文共 3721 字,大约阅读时间需要 12 分钟。
作为一名从零开始学习iOS开发的新手,我深知技术学习的艰辛。每一个代号、一行代码背后都承载着知识和成长的痕迹。今天,我们将详细探索如何创建不同风格的左边图标按钮,助力你在iOS开发道路上少走弯路。
在本次探索中,我们将重点实现两种不同的左侧图标按钮及其布局设置:
代码片段如下:
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
:标题与图标的左侧距离。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
:图标相对于标题的右侧偏移。接下来,我们将重点学习左侧带有文本的标题按钮实现。
@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
:按钮的圆角设置。@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轴方向上的中心位置偏移。最后,我们将简要探讨顶部图标按钮的实现:
@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/