巧用继承,利用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