一、使用的基本原则: 原则1:UIScrollView的size依赖于subviews 首先在StoryBoard中拖入一个UIScrollView,用Pin按钮,随意设置其布局。...因为设置UIScrollView的布局约束是没有用的,UIScrollView的size(即contentSize)是根据其中的subviews所占据的size来计算的。...当然,如果contentSize的内容不足以布满整个UIScrollView时,滚动条将不会出现,UIScrollView也不会滚动。...明明设置了宽和高了呀,如果不做这一步,UIScrollView还是不能滚动,因为这4个Pin约束实际上是用于告诉UIScrollView:我会把你的内容“撑到”多大。...如果contentView的4条边发生变化,UIScrollView会自动调整contentSize。 5、接下来就是在contentView上布局项目中需要的界面了。
为此当UIScrollView要和AutoLayout进行结合使用并实现滚动能力的话就不能直接将所有子视图都添加到UIScrollView中去, 而是需要中间建立一个容器视图,首先将容器视图添加到UIScrollView...如果不需要水平滚动则改为将容器视图的宽度等于UIScrollView视图的宽度。通过这样的设置后UIScrollView视图的contentSize将得到自动的计算。...因为MyLayout&TangramKit中的尺寸自适应约束不需要明确依赖某个子视图,因此当布局视图中的子视图有变化时系统会自动重新进行布局视图的尺寸计算,而当布局视图的尺寸变化时又会调整UIScrollView...因此如果想使用布局视图的尺寸自适应功能,那么在将布局视图的尺寸设置为wrap后,就可以像使用UILabel那样不用去设置布局视图的宽度约束和高度约束了。比如有两个兄弟视图A,B。...,这里不需要设置高度约束,因为使用了布局视图的高度自适应属性。
分页滚动UI布局 AutoLayout实现分页滚动的方法 根据上面的UI结构这里用AutoLayout的代码来实现水平分页的滚动。这里的约束设置代码是iOS9以后提供的相关API。...分页滚动 MyLayout实现分页滚动的方法 你也可以用MyLayout布局库来实现分页滚动的能力。MyLayout布局库是笔者开源的一套功能强大的UI布局库。...gravity的设置就可以确定子页视图的高度和宽度,再加上线性布局的特性,所以页视图不需要设置任何附加的约束。...containerView.wrapContentWidth = YES; //设置布局视图的宽度由子视图包裹,当垂直流式布局的这个属性设置为YES,并和pagedCount搭配使用会产生分页从左到右滚动的效果...,主要是对充当容器视图的流式布局设置一些属性即可,不需要为条目设置任何约束,而且还支持横竖屏下每页的不同数量的展示能力。
UICollectionView 是 iOS6 之后引入的一个新的 UI 控件,与 UITableView 有着很多相似的地方,在开发过程中我们都会选择使用它们俩来为 App 的整个页面进行布局,比如说淘宝的首页...思路分析 通过观察上面的图我们可以得出,这个网易云的轮播控件有三个特点,分别是: 1.支持图片手动横向滚动2.支持图片自动的滚动播放3.底部的分页控件会高亮显示出当前的图片是哪一张 好了,既然已经分析出来了它的特点...UIScrollView 然后又支持横向滚动,所以使用 UICollectionView 来实现横向滚动效果是最好不过的。...(indexPath.row % self.sourceCount) } } } 然后,支持图片的自动播放与分页控件高亮就比较简单了,我们可以使用定时器 Timer 与 UIPageController...self.collectionViewFlowLayout.itemSize.width) return max(0, index) } } } 第二点,由于这个轮播图滚动支持手动滚动与自动滚动俩种方式
记录下自动布局中遇到的几个坑。...(或者Masonry)之类的工具进行自动布局。...self.isBigger;}];button;}); 关于UIScrollView的自动布局 上面提到的页面遇到了多重的UIScrollView,使用自动布局的时候也是够蛋疼的。...具体使用技巧参考Masonry自动布局详解九:复杂ScrollView布局、在UIScrollView中使用Autolayout布局以及iOS_autoLayout_Masonry。...主要注意点为: UIScrollView自身的约束按照正常的视图添加。 内部子控件的约束不能按照UIScrollView来设置,同时必须完整,否则撑不起contentSize。
PullToBounce - 下拉刷新的动画 for UIScrollView。 WaterDropRefresh - 仿Path 水滴的下拉刷新效果 还有视差滚动。...AutoLayout Masonry - Masonry是一个轻量级的布局框架,拥有自己的描述语法,采用更优雅的链式语法封装自动布局,简洁明了并具有高可读性(使用介绍1使用介绍2),iOS自适应前段库...Auto-Layout-Showcase - swift,AutoLayout 进阶 Demo,宽高比约束、比例约束、不等约束、视差约束、低优先级约束等高级用法,无需写码即可进行复杂页面布局,Demo...Autolayout_Demo - 在项目中用自动布局实现的类似抽屉效果。...Neon.swift - 功能强大的 UI 布局神器。 EasyPeasy.swift - 编程方式自动布局框架库。
记录下自动布局中遇到的几个坑。...(或者Masonry)之类的工具进行自动布局。...self.isBigger; }]; button;}); 关于UIScrollView的自动布局 上面提到的页面遇到了多重的UIScrollView,使用自动布局的时候也是够蛋疼的。...具体使用技巧参考Masonry自动布局详解九:复杂ScrollView布局、在UIScrollView中使用Autolayout布局以及iOS_autoLayout_Masonry。...主要注意点为: UIScrollView自身的约束按照正常的视图添加。 内部子控件的约束不能按照UIScrollView来设置,同时必须完整,否则撑不起contentSize。
(横竖屏时不设置的话无法使用,因为横屏的时候,之前设置的Frame属性 还是竖屏的Frame)`,当然可以使用Fram的方法达到屏幕适配和自动布局,但是中间的过程是复杂而且工作量巨大的,写起来也是痛苦的...但是因为系统的layoutSubviews 方法是默认不执行任何布局的,需要使用者在页面内容确定后再次对空间的Frame进行重置,牵一发而动全身的重置是痛苦而繁琐的。...使用了这么久, 对于父试图是 Button / UITextFeild等非UIView的直接子类,布局其子视图时,这里面的约束是不生效的。...2、实现了UIView内子视图的自动布局; 3、实现了UIScrollView内容高度根据内部子视图的内容高度动态设置; 4、实现了一个UITableView有多个不同Cell的时候,所有cell高度自适应...实现了UIScrollView可滚动高度根据内部子视图的内容高度动态设置 /** 设置scrollview内容自适应,第一个参数为作为底部的子视图,第二个参数为到sc底部的间距。
Masonry是同时支持Mac和iOS两个平台的,在这两个平台上都可以使用Masonry进行自动布局。...实现方式: 需要设置tableView的rowHeight属性,这里设置为自动高度,告诉系统Cell的高度是不固定的,需要系统帮我们进行计算。...自动布局 之前听很多人说过UIScrollView很麻烦,然而我并没有感觉到有多麻烦(并非装逼)。...我这里就讲一下两种进行UIScrollView自动布局的方案,并且会讲一下自动布局的技巧,只要掌握技巧,布局其实很简单。...布局小技巧: 给UIScrollView添加的约束是定义其frame,设置contentSize是定义其内部大小。
对于按钮移动的动画就没有去花时间还原了,毕竟这里主要是为了实现滚动压缩、展开Header,动画不讨论。 ? 实现思路 如图所示: ?...ScrollHeader占据屏幕上方,高度为展开后的高度 UITableView占据整个屏幕,这样可以完全滚动。...由于我的ScrollHeader继承的是UIView,所以为了处理滑动,为其设置一个UIScrollView @property (nonatomic, strong) UIScrollView *headerScrollView...currentOffset = newOffset.y; NSLog(@"current offset: %f", _currentOffset); } 最后放上源码 github 粗略写的,代码是用自动布局写的...往后抽空会优化一下代码,把ScrollHeader封装成控件方便使用。
2.addSubview会触发layoutSubviews 3.设置view的Frame会触发layoutSubviews,当然前提是frame的值设置前后发生了变化 4.滚动UIScrollView会触发...setNeedsLayout 标记为需要重新布局,不立即刷新,但layoutSubviews一定会被调用配合layoutIfNeeded立即更新 layoutIfNeeded 如果有需要刷新的标记,立即调用...layoutSubviews进行布局。...}, completion: nil) 所以上面不管写多少约束的改变,只需要在动画里调用一次self.view.layoutIfNeeded(),所有的都会已动画的方式 。...以上1,2推荐;而3,4不提倡 drawRect方法使用注意点: 1、若使用UIView绘图,只能在drawRect:方法中获取相应的contextRef并绘图。
从上面的这些属性中可以看出苹果提出的这些解决方案其主要是围绕解决视图和导航条、滚动视图、状态栏、屏幕边缘之间的关系而进行的。...NSLayoutConstraint约束以及iOS9上的封装改进 在iOS6时代苹果推出了AutoLayout的技术解决方案,这是一套采用以相对约束来替代硬编码的解决方法,然而糟糕的方法名和使用方式导致使用成本和代码量的急剧增加...AutoLayout [scrollView addSubview:button]; //下面的代码是iOS6以来自带的约束布局写法,可以看出代码量较大。...].active = YES; UIStackView 在iOS9中还提供了一个UIStackView的类来简化那些视图需要从上往下或者从左往右依次添加排列的场景,通过UIStackView容器视图的使用就不再需要为每个子视图添加冗余的依赖约束关系了...,也可以将它添加进入视图中去,也可以将这个占位视图作为其他视图的约束依赖项,唯一的不同就是占位视图不会进行任何的渲染和绘制,它只会参与布局处理。
这里有一个关于自动布局开发的使用原则: 所有使用约束设置位置的控件,不要再设置 frame 原因:自动布局系统会根据设置的约束,自动计算控件的frame 在layoutSubviews函数中设置frame...工作原理: 当有一个运行循环启动,自动布局系统,会收集所有的约束变化 在运行循环结束前,调用layoutSubviews函数统一设置frame 如果希望某些约束提前更新!...使用layoutIfNeeded 函数让自动布局系统,提前更新当前收集到的约束变化 但是我们这里不是控制器,只是一个View,里面并没有viewDidAppear方法。我们就要找到一个类似的办法。...上面说自动布局工作原理的时候提到过 如果希望某些约束提前更新!...使用layoutIfNeeded 函数让自动布局系统,提前更新当前收集到的约束变化 因此,我们手动调用一下layoutIfNeeded方法,将代码布局的约束都创建好,并显示出来,然后再进行更新约束的动画
如下是我所要说的视觉差滚动效果(即:滚动tableView时候,每一行的图片都会根据滚动方向和滚动距离的不同进行移动,给人一种图片在移动的视觉体验),由于下面gif图失真卡顿严重,真实效果大家可以参考demo...visionDiff.gif 步骤 备注: demo中cell是用xib文件定义、布局的,而非代码的方式 自定义cell。...给cell的contentView添加一个UIImageView子控件 给imageView添加上下左右约束 给cell添加一个对象方法。...约束设置如下: ? Snip20160730_1.png 2....控制器.m文件中 - (void)scrollViewDidScroll:(UIScrollView *)scrollView { // 1.获取当前屏幕上显示的所有的cell NSArray
Masonry手写Autolayout专题 Masonry常规开发指导整理自此篇文档(可别说我转载不注明出处哦,^_^),后面加入了笔者在实际开发使用过程中遇到过的一些问题,希望对你有所帮助。...1.1.4 [中级] 在UIScrollView顺序排列一些view并自动计算contentSize UIScrollView *scrollView = [UIScrollView new];...这里的关键就在于container这个view起到了一个中间层的作用能够自动的计算uiscrollView的contentSize。...Masonry 在TableCell中增加子控件时,无法正常使用Masonry来进行布局,可能是Cell重用引起的。...1.3.2 使用了Masonry布局的控件最好手动释放内存,若有APP自动释放内存,会有延迟,导致页面布局失败 //需要手动释放mas_makeConstraints的内存,若有APP自动释放内存,会有延迟
因此线性布局比较适合通过代码的方式来 构造视图。同时适合于将线性布局作为scrollview的子视图来布局。因为线性布局在位置调整后会 如果是使用自动布局则这个类将无效。...UIScrollView或者子类则在线性布局的位置调整后是否调整滚动视图的contentsize,默认是NO //这个属性适合与整个线性布局作为滚动视图的唯一子视图来使用。...但实际中我们总是带着解决问题的想法去使用某个框架和库的,我这里想说的是当你在使用AutoLayout时因为复杂的约束设置以及更新方法而焦头烂额时,当你使用AutoLayout而对多屏幕多设备适配而进行多条件编写时...需要设置的约束少,不需要像AutoLayout那样无论是位置和尺寸都需要明确的通过设置约束来指定。有些时候可能只需要一两个属性就可以把所有子视图的位置和尺寸都设置完成。...命名和使用有一些不规范,这个是因为早期在开发时有些属性和方法命名不规范,后来因为开源后又难以改正所以就一直沿用一些老的命名和方法,导致布局库的属性和方法非常的多,学习起来的成本也稍微高一些,但是这个问题在后来的
,UIScrollView会给子视图发送touchCancel消息,而如果该属性设置为NO,ScollView本身不处理这个消息,全部交给子视图处理 @property(nonatomic) BOOL...:(UIScrollView *)scrollView; //54.滚动顶部时候调用该方法 - (void)scrollViewDidScrollToTop:(UIScrollView *)scrollView...*)scrollView { return _beautifulView; } 代理使用的一般规律 作用:用来监听控件的某些行为 代理:是控制器对象 代理:是id类型,并且是弱指针 代理协议的格式...UISlider) UIControlEventEditingChanged : 文字改变事件(UITextField) 通过delegate 只有拥有delegate属性的控件,才有这个功能 NSTimer的使用...开启定时器 @property (nonatomic, weak) NSTimer *timer; // 返回一个自动开始执行任务的定时器 self.timer = [NSTimer scheduledTimerWithTimeInterval
titleView也是添加在主控制器上,显示在scrollView上面,保证titleView永远显示在主控制器的View上,不会随着scrollView的滚动而滚动。...,需要使用纯代码。...因为cell内内容比较多,而且需要添加约束,这里采用第二种方法,下图为cell的xib布局 ?...cell的xib布局 其中添加自动布局约束是比较麻烦的,但是只要细心一步一步添加,就可以约束成功,添加约束还是多多练习熟练之后还是有很多便捷之处。...当滑动到最低端时,自动加载下一页内容。
初学者第一次使用 UIScrollView 的时候,很可能会遇到 UIScrollView 滑动不了,或者明明添加了内容,却看不到的问题。...应该设定好你的图片资源的大小,然后直接用图片资源的frame 去设定 imageView 的 frame,当然这一步也是自动的。...注意点2:现在 imageView 是 UIScrollView 的 subView,所以它的 frame 也是相对 UIScrollView 的,你想要让它和 UIScrollView 刚好一样高,就要把它的...frame 的 y 值设定为0,这也是为什么我推荐你不管这个 y 值,让它自动置为0。...更新: 如果你的 UIScrollView 老是在你不希望它滚动的方向的滚动,而且里面的 imageView 还有可能错位的话,在 viewDidLoad 方法中加入这句: self.automaticallyAdjustsScrollViewInsets
其主要是为了方便MJRefresh库自己的调用,当然你也可以对它进行使用。...UIScrollView+MJRefresh类别在开发者设置mj_header和mj_footer属性时,将这两个组件添加为当前滚动视图的最下层子视图,为了满足某些自动加载的需求,这里面有用runtime...MJRefreshHeader类是头部刷新组件的基类,其将刷新组件布局在UIScrollView组件的顶部,并且封装了记录上次刷新时间的功能。...尾部刷新组件的编写逻辑和头部刷新组件的编写逻辑基本一致,MJRefresh中的尾部刷新组件分为了两类,一类是刷新完成后自动消失的,一类是自动刷新,刷新完成后不会自动消失,只是改变状态。...首先MJRefreshComponent类抽象出了回调与刷新函数,并且提取出了需要子类复写的通用的布局、监听等函数,让子类的结构非常统一。
领取专属 10元无门槛券
手把手带您无忧上云