前言：

上篇寫完：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框架的核心基本穩定下來!!!

 剩下的，就是在這核心功能的基礎上，再持續豐富功能的問題了。

 關於完整的教程，也會加快速度寫完，儘管這個系列很枯燥！

 歡迎大伙關註、下載、研究、使用！

 對了，創業還在繼續，不要忘了關註喲！