Sagit.Framework For IOS 开发框架入门教程4：注册页布局-被消灭的变量

补充说明：

本此篇以前的示例教程文章，可跳过，可以从教程5开始看。

系列教程1：IOS Sagit.Framework 入门教程中关于UI自动布局的教程

系列教程2：Sagit.Framework For IOS 开发框架 入门教程

前言：

上篇写完：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框架的核心基本稳定下来!!!

 剩下的，就是在这核心功能的基础上，再持续丰富功能的问题了。

 关于完整的教程，也会加快速度写完，尽管这个系列很枯燥！

 欢迎大伙关注、下载、研究、使用！