控件效果如下：
搜索了半天，网上找不到类似效果的Demo，于是自己就码了一个出来。刚开始的时候是用三个UIImageView做了一个出来，功能是实现了，并且比用UIScrollView做的内存占用更小，但是滑动起来不是那么流畅，于是就放弃了这种方法，还是用UIScrollView码了一个出来，在此与大家分享下实现的思路。
实现原理：利用UIScrollView作为载体 + 动态修改AutoLayout
一. 控件的构成
此控件由四层视图组成如上图:
第一层：UIScrollView（代码里属性表示为lScrollView）。
第二层：宽度为图片数量 * 每页的宽度值，高度可变化并且加载在lScrollView上的View（代码里属性表示为scrollContentView）。
第三层：由n（n=图片数量）个view（代码里自定义为UniteView，宽度为固定的每页宽度，位置与scrollContentView的上下边界约束好了的）并排挨个加载在scrollContentView上的组成的。
第四层：UIImageView（代码里自定义为XHSImgView）是加载在UniteView上的，初始位置是与UniteView的左上下边界约束好并且自身有个宽高比约束。
看了层次结构，有的朋友可能要问为什么UIImageView不直接加在UIScollView上，不要急容我慢慢道来：
加载scrollContentView是因为，若直接把UIImageView加在UIScrollView上并加上约束，UIScrollView的contentSize依赖于subviews，如果subviews的size再依赖于UIScrollView，则布局引擎就混乱了。
用UniteView装载XHSImgView是因为，UniteView是定宽的，加载的XHSImgView是与UniteView的左上下边界约束好并且自身有个宽高比约束的，这样随着UniteView高度的变化，XHSImgView的高度也根据约束变化，并且因为自身的宽高比约束永远不会失真。
二. 功能的实现
1. 首先是图片的数据一定要在图片还没加载前就要知道每张图size，然后利用- (void)scrollViewDidScroll:(UIScrollView *)scrollView这个代理方法，根据scrollView.contentOffset.x可以计算滑动的方向和滑动到了那一页。因为提前知道了图片的size，就可以计算出图片从上一页切换到下一页时前后的高度差，从而计算出每单位移动距离scrollContentView的高度变化，约束好了的UniteView和XHSImgView的size就会更随scrollContentView的高度变化。
2. 在初始化的时候所有的XHSImgView都是靠左约束的，但是滑动切换过程中就会动态改变约束，不管向左还是向右滑动，当前图约束靠右，当前图下一张图的约束靠左。
好了，核心思路就是这样，详情请见代码。PS：第一次在简书上写文章，文笔不好请大家见谅，有不懂的同学可以qq我，我的qq是1083268197，加的时候请注明是从这篇文章来的。
网友评论