前言：
上篇写完：Sagit.Framework For IOS 开发框架入门教程3：Start引导页-框架布局和隐藏事件的内幕
之后，好久没写文章了，有IT连创业系列、有DotNetCore的一篇文章，还有这个系列，要写的太多。
不过，最近都在360度的更新框架：把想到的都给实现了，没想到的也给实现了。
今天，先来写写Sagit篇，回头再写IT连或DotNetCore的文章了。
下面进入正文：
Sagit 实现注册页布局
从StartController中，点击注册：跳到了RegController了：
呈现的内容如下图：（为不影响整体，这图宽高设的的很小，大伙可以新开窗口看大图）：
这里把View和Controller分开文件处理：
下面看代码：RegView.m
用Sagit布局，*.h文件基本都是空的，就不贴代码了。
-(void)initUI { //logo [[[[self addImageView:@"logo" imgName:@"login_logo"] width:170 height:170] relate:Top v:72] toCenter:X]; //Icon [self block:@"3个小图标Icon布局，这个block只是用来写注释用的，这里只是体验一下用法" on:^(UIView *view) { [[[view addImageView:@"phoneIcon" imgName:@"icon_phone"] width:48 height:48] onBottom:@"logo" y:132 x:-148]; [[view addImageView:@"pwdIcon" imgName:@"icon_password"] onBottom:STPreView y:62]; [[[view addImageView:@"verifyIcon" imgName:@"icon_verify"] width:48 height:48] onBottom:STPreView y:62]; }]; //Line [[[self addLine:nil color:DividerHexColor] width:450 height:2] onBottom:@"phoneIcon" y:30]; [[[self addLine:nil color:DividerHexColor] width:450 height:2] onBottom:@"pwdIcon" y:30]; [[[self addLine:@"verifyLine" color:DividerHexColor] width:450 height:2] onBottom:@"verifyIcon" y:30]; //TextBox [[[self addTextField:@"UserName" placeholder:@"手机号码"] width:372 height:68] onRight:@"phoneIcon" x:30 y:-10]; [[STLastTextField maxLength:11] keyboardType:UIKeyboardTypeNumberPad]; [[[self addTextField:@"password" placeholder:@"设置密码"] width:372 height:68] onRight:@"pwdIcon" x:30 y:-10]; [[[STLastTextField maxLength:16] secureTextEntry:YES] keyboardType:UIKeyboardTypeNumbersAndPunctuation]; //validation textfield [[[self addTextField:@"VerifyCode"] width:240 height:68] onRight:@"verifyIcon" x:30 y:-10]; [[STLastTextField maxLength:4] keyboardType:UIKeyboardTypeNumberPad]; //validation button [[[self addButton:@"verifyBtn" title:@"验证码"] width:132 height:48] onRight:@"VerifyCode" x:0 y:10]; [[[STLastButton titleColor:MainHexColor] backgroundImage:@"verify_empty"] titleFont:30]; //next step button [[[self addButton:@"RegStep2" title:@"下一步"] width:450 height:80] onBottom:@"verifyLine" y:100]; [[[STLastButton titleColor:MainHexColor] backgroundImage:@"btn_empty"] adjustsImageWhenHighlighted:NO]; [[self addUIView:nil] block:@"最下方的阅读条款" on:^(UIView *view) { [view addButton:@"selectBtn" title:@" 我已阅读并同意" font:24]; [[[STLastButton titleColor:HexColor(@"#969696")] image:@"icon_selected"] stWidthToFit]; [view addButton:@"lawBtn" title:@"《IT恋服务条款》" font:24]; [[STLastButton titleColor:MainHexColor] onRight:STPreView x:5]; [[[view stSizeToFit] relate:Bottom v:25+STNavHeightPx+STStatusBarHeightPx] toCenter:X]; }]; }
核心提示：
一路代码下来，是不是发现木有定义变量呢？好神奇啊！！！
在上一篇文章时，还能看到如下的变量的定义：
如果变量名定义的不好，如下，排版就很不好看，多了后是这个样子的：
于是，想了个方法，把它们消灭了，消灭了！！！！
这也是最近更新的一次核心内容。
下面讲讲上面代码涉及的到核心内容及原理。
Sagit 框架讲解：block带注释的块方法
方法原型：
#pragma mark 代码说明块 typedef void(^onDescription)(UIView *view); //!提供一个代码块，方便代码规范 description处可以写代码块的说明文字 -(void)block:(NSString*)description on:(onDescription)descBlock;
框架在UIView和UIViewController两个基类中都扩展了这两个方法，所以任何时候和地方都可以使用。
上面的代码中，有两个我特意用演示了一下block的用法，所里就不细讲了。
Sagit 框架讲解：消灭变量的核心：STPreView及STLastXXX系列变量的定义
为了消灭变量，就需要完成以下几个功能：
1：能获当前UI的上一个UI：STPreView 2：能获取最的一个添加的UI，并指定类型 ：STLastXXX 系列（所以定义了N个） 3：能获取任意一个UI，并指定类型：STXXX(name)系列。
下面看看这些在STDefineUI中是怎么定义的：
1：能获当前UI的上一个UI：STPreView
//上一个UI控件的简写 #define STPreView self.stView.lastAddView.preView
2：能获取最的一个添加的UI，并指定类型 ：STLastXXX 系列（所以定义了N个）
#define STLastView self.stView.lastAddView #define STLastButton ((UIButton*)STLastView) #define STLastTextField ((UITextField*)STLastView) #define STLastTextView ((UITextView*)STLastView) #define STLastImageView ((UIImageView*)STLastView) #define STLastLabel ((UILabel*)STLastView) #define STLastSwitch ((UISwitch*)STLastView) #define STLastStepper ((UIStepper*)STLastView) #define STLastSlider ((UISlider*)STLastView) #define STLastProgressView ((UIProgressView*)STLastView) #define STLastTableView ((UITableView*)STLastView)
3：能获取任意一个UI，并指定类型：STXXX(name)系列
//获取控件 #define STSTView(name) ((STView*)self.stView.UIList[name]) #define STButton(name) ((UIButton*)self.stView.UIList[name]) #define STTextField(name) ((UITextField*)self.stView.UIList[name]) #define STTextView(name) ((UITextView*)self.stView.UIList[name]) #define STImageView(name) ((UIImageView*)self.stView.UIList[name]) #define STLabel(name) ((UILabel*)self.stView.UIList[name]) #define STSwitch(name) ((UISwitch*)self.stView.UIList[name]) #define STStepper(name) ((UIStepper*)self.stView.UIList[name]) #define STSlider(name) ((UISlider*)self.stView.UIList[name]) #define STProgressView(name) ((UIProgressView*)self.stView.UIList[name]) #define STTableView(name) ((UITableView*)self.stView.UIList[name])
Sagit 框架讲解：自适应宽高：stSizeToFit、stWidthToFit
首先，界是是这样的：（通用性的要求是里面的文字不管大小或长度修改，都要自适应居中，不需要再去改动布局）
解决这个问题，最后的核心方法是stSizeToFit，这个方法的原型是这样的：
//!如果当前是UIView：检测其子UI，如果子UI部分超过，则扩展宽与高，但不会缩小。其它：则返回siteToFit方法的属性。 -(UIView*)stSizeToFit;
以及核心的方法stWidthToFit：
//!当button在动态设置文字或图片之后，宽度自适应 -(UIButton*)stWidthToFit;
在这个布局上，之前的代码比较麻烦，而且写死了，另外是用了三个Button来布局。
后来我重写了，改成了两个Button，不过遇到了不少坑，这里只讲一个核心的坑：
Button，先先设置文字，然后再setImage，这时候获取Label的xy，并没有即时更新，说明这个加载应该是异步的。
所以stSizeToWidth在计算的时候，时好时坏，后来是加了一行代码解决：
-(UIButton*)stWidthToFit { [self layoutIfNeeded];//Button setImage 后，Lable的坐标不是即时移动的。 UILabel *label=self.titleLabel; CGFloat labelWidth=label.stWidth; if(label.text.length>0) { CGSize size=[self.titleLabel.text sizeWithFont:label.font maxSize:self.frame.size]; //计算文字的长度 labelWidth=MAX(labelWidth, size.width*Xpx); } CGFloat width=MAX(labelWidth+label.stX, self.imageView.stX+self.imageView.stWidth); [self width:width]; return self; }
总结：
在经过投入近一个月疯狂的重构下，Sagit框架的核心基本稳定下来!!!
剩下的，就是在这核心功能的基础上，再持续丰富功能的问题了。
关于完整的教程，也会加快速度写完，尽管这个系列很枯燥！
欢迎大伙关注、下载、研究、使用！
对了，创业还在继续，不要忘了关注哟！
版权声明：程序员胖胖胖虎阿 发表于 2022年11月5日 下午3:48。
转载请注明：Sagit.Framework For IOS 开发框架入门教程4：注册页布局-被消灭的变量 | 胖虎的工具箱-编程导航
转载请注明：Sagit.Framework For IOS 开发框架入门教程4：注册页布局-被消灭的变量 | 胖虎的工具箱-编程导航
相关文章
暂无评论...
致力于称为最好的程序员导航网站