巧用繼承,利用masonry進行簡易的豎向佈局

　　很久沒更博客,深感愧疚,今天要和你們講的就是利用masonry對scrollview進行豎向的佈局.在本篇文章當中,你將學習到

　　1.如何利用面向對象"繼承"的特性簡化本身的代碼

　　2.利用繼承與masonry相結合,快速使用代碼進行控件的封裝.

　　3.爲團隊貢獻的精神.

　　在閱讀本篇文章以前,你須要知道的有

　　1.masonry是用代碼直接對控件進行約束的控制,它與frame的設置不一樣,frame只是針對父控件,而masonry能夠針對多個控件.

　　2.scrollview約束的添加方式,scrollview添加約束是,必需要在上方添加一個container,做爲一個容器,全部的控件都將放在這個container裏頭.

　　之前本身封裝過不少的東西,例如輸入控制器,基礎的webViewVC等等,JSPatch本地判斷加載等等,這一次和你們分享的是一個基=於masonry的一組控件的封裝,下面開始正式講解本次文章的內容.

　　正如你們知道tableView是一個神器,其重用的機制是給app帶來很好體驗,但其也有自身的短板.例如當cell的數量很少,可是cell的種類不少的時候,咱們的tableview用得就會很尷尬,例以下圖所示的這一個頁面,若是你使用tableview的話也是能夠,不過將會很是麻煩,由於cell的種類不少.並且重用性不強,這種一行一行的豎向佈局,在不少頁面都會用到,最經常使用的即是我的設置的頁面,還能夠運用到商品詳情頁,查看他人詳情,以及其餘豎向佈局當中,咱們儘可能把更多的邏輯思考集中在咱們的業務邏輯方向上,在UI上若是UI是死的,就儘可能簡化裏頭的邏輯,將每個組件看做一個對象,這一種思想在我以前的一個作家校通的項目裏頭便常常用到,由於項目裏頭常常有不少豎向佈局,下面咱們談一下如何將它封裝得更好用.

　　

　　下面我來說解一下我是怎麼封裝的這一個頁面的,首先

 　　1.咱們要設置一個基類做爲裏頭全部空間的基類,這個基類有一個,上面所看的全部空間的共有特性,那就是設置上下線的特性,線能夠設置左邊距和右邊距.

　　  2.不一樣的類實現不一樣的繼承

　　 3.在帶arrow的控件當中,重寫touchbegan,的方法,使得視圖點擊的時候變灰.

　　 如下是我畫的繼承圖

　　

　　好了,到這裏咱們利用繼承的特性封裝了一組控件,簡化了咱們的代碼(具體代碼可在項目中查看,項目下載地址在文章最下)而後咱們須要將這一組控件添加到scrollview裏頭,那麼具體咱們如何的一個vc裏頭將一組控件放到scrollview上面你?首先咱們得定義一個基類的vc,我把他命名爲FormViewController,爲FormViewController設置一個方法

　　

- (void)addMasonryView:(UIView*)view topView:(UIView*)top span:(CGFloat)span height:(CGFloat)height {

    WS(weakSelf)

    [view mas_makeConstraints:^(MASConstraintMaker *make) {

        make.top.equalTo(top?top.mas_bottom:weakSelf.container.mas_top).with.offset(span);

        make.left.and.right.equalTo(weakSelf.container);

        make.height.mas_equalTo(@(height));

    }];

}

　　在這個方法裏頭,咱們將一個準備添加到container的子控件設置其與container之間的約束,

　　而後咱們在設置一個方法,方便咱們將一組控件所有添加到container上方

- (void)addMasonryViewForArray:(NSArray *)arr andHeight:(CGFloat)height andtopView:(UIView *)firstTopView andSpan: (CGFloat) span {

    for (NSInteger i =0 ; i < arr.count; i++) {

        //        UIView *lastView = arr[i ]

        UIView *nowView = arr[i];

        [self addMasonryView:nowView topView: (i == 0 ?  firstTopView : (UIView *)arr[i - 1]) span:span height:height];

    }

}

　　若是你須要將cell與這組控件相結合,你只須要爲cell添加一個YMBaseInfoView的屬性,並將控件所有覆蓋ell上面便可,利用masonry添加baseInfoView與cell的edge相等的約束

　　在這裏咱們全部的封裝就完成了,剛開始你會以爲很麻煩,可是當你的豎向佈局用得多的時候,你就會知道這種方法的好處了

　　1.簡易性,由於控件數量很少,不須要把思考花在重用的問題上.

　　2.可複用性,你封裝了一個控件就能夠在下一次狀況下再次使用c

　　3.可讀性強,當維護你的代碼的人看到你的代碼時將會十分高興

　　具體能夠查看個人github裏頭的代碼,若是你有什麼問題的話也能夠和我交流

　　下載地址是:https://github.com/bnb173yjx/masonryUsingDemo