Autolayout 第三方开源库

转载自：http://blog.csdn.net/hmt20130412/article/details/46638625

今天才发现CSDN支持markdown了…仍是给出新博客地址:Autolayout优秀的第三方开源库

最近项目开始用纯代码布局整个UI框架, 对于前一段很长时间都是xib+storyboard狂拖控件约束的我来讲,天天写的代码量剧增…对于sb好仍是纯代码好的争论,能够参考下巧大大的分析. 
说到UI适配布局,通常有两种方法: 
* frame,利用[UIScreen mainScreen].bounds.size.width/height,一个一个的算出对应frame,结果确定是OK的,只是过程异常的痛苦,尤为像我这种语文老师教的数学的小学生.囧. 
* autolayout,相信确定是主流布局,并且对于UI设计师给个人效果图,也是很方便咱们直接拿来进行约束设值,无须其余任何计算.

这里主要介绍手写autolayout约束,因为系统提供的api写起来又臭又长,推荐一个不错的第三方. 
OC版本对应的是Masonry,Swift版本对应的是SnapKit.固然还有其余优秀的autolayout相关第三方,会在结尾给出,感兴趣的朋友能够去研究下,LZ主要用Masonry(大爱这种链式语法)^_^!

Masonry

Github地址是:Masonry 
具体用法github上已经讲的很清楚了,能够下载Demo看看栗子的实现,总结一下我在使用过程当中了解. 
* mas_makeConstraints使用最多,作初始约束,只负责新增约束 
* mas_updateConstraints针对make中的约束作更新,通常不添加新约束,只是对于原约束数值的修改. 
* mas_remakeConstraints清除以前全部的约束,采用里面设置的最新约束,经常使用于动画以后新位置的约束设定 
* 优先级高.priorityHigh,优先级低.priorityLow,一般用于根据条件判断来设定优先响应哪一种约束 
* multipliedBy(x)= *x,dividedBy(x) = /x 
* “` 
make.edges.mas_equalTo(UIEdgeInsetsMake(10, 10, 10, 10)); 
// edges就是至关于top-left-bottom-right 
// top和left里的offset为正数 
// 那么为何bottom和right里的offset是负数呢? 由于这里计算的是绝对的数值 计算的bottom须要小于sv的底部高度 因此要-10 同理用于right 
// 有意思的地方是and和with 其实这两个函数什么事情都没作,能够省略的

/* 等价于
     make.top.equalTo(weakSelf.sv).with.offset(10);
     make.left.equalTo(weakSelf.sv).with.offset(10);
     make.bottom.equalTo(weakSelf.sv).with.offset(-10);
     make.right.equalTo(weakSelf.sv).with.offset(-10);
     */

“`

• UIScrollView是一个有点特殊的view,对于在里面放其余view,最好的作法是先放一个containerView设置edges相等,而后在此view上添加subview.

• 模仿系统的UITabBarController的底部View,能够设定个数和间隔:

  - (void)simulateSystemTabBarWithButtonCount:(NSInteger)count withSpace:(CGFloat)space {
  [self.view showPlaceHolder]; self.view.backgroundColor = [UIColor grayColor]; NSMutableArray *viewArray = [NSMutableArray arrayWithCapacity:10]; for (int i = 0; i < count; i++) { UIView *view = [UIView new]; view.backgroundColor = [UIColor colorWithHue:( arc4random() % 256 / 256.0 ) saturation:( arc4random() % 128 / 256.0 ) + 0.5 brightness:( arc4random() % 128 / 256.0 ) + 0.5 alpha:1];; [view showPlaceHolder]; [self.view addSubview:view]; [viewArray addObject:view]; } UIView *lastView = viewArray.lastObject; for (int i = 0; i < count; i++) { UIView *view = (UIView *)viewArray[i]; [view mas_makeConstraints:^(MASConstraintMaker *make) { make.bottom.equalTo(view.superview); make.height.equalTo(@49); make.width.equalTo(lastView); if (i == 0) { make.left.mas_equalTo(view.superview).offset(space); } else { UIView *frontView = (UIView *)viewArray[i-1]; make.left.equalTo(frontView.mas_right).offset(space); (i == viewArray.count - 1) ? make.right.mas_equalTo(view.superview).offset(-space) : nil; } }]; } }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32

  以count = 4 和 space =0 为例子 
  

• 实现动画时,更新约束后调用layoutIfNeeded
• 最后,再次强调真的很是好用!!!

SnapKit

Github地址:SnapKit 
PS:目前只支持swift1.2版本,在最新的xcode7-swift2.0中会报错,我在推特上问了做者,他说最近略忙,暂时没空…囧…有兴趣的朋友能够本身改下让它支持2.0而后pull…我?还在研究中. 
这个就不过多举例了,基本就是跟Masonry同样,并且我在后面的Demo基本都是用了Snapkit来写(xcode7上我是拖控件…没办法,谁让还不支持2.0) 
举个栗子->最多见的上下两个button: 

其余资料

• autolayout其余第三方开源库

  PureLayout 
  UIView-AutoLayout 
  MMPlaceHolder 这个是辅助工具 一个显示宽*高的插件 
  Cartography for swift

• 博文

  先进的自动布局工具箱 
  AutoLayout:忘掉Frame,拥抱Constraint 
  Autolayout 基础 
  Auto Layout Guide 官方 
  Masonry介绍与使用实践(快速上手Autolayout) 
  有趣的Autolayout示例-Masonry实现 
  喵神的Autolayout介绍