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