iOS开发UI阶段——第六节 UIScrollView

定义手机屏幕的宽和高为 kWidth 和 kHeight

UIScrollView包含的主要属性

①、设置滚动区域(内容区域)的大小  scrollView.contentSize = CGSizeMake(kWidth * n, kHeight * n)//n >= 1才能滑动

②、设置滚动视图的偏移量  scrollView.contentOffset = CGPointMake(0, 0)

③、是否整页翻图 scrollView.pagingEnabled = YES 默认是NO

④、是否显示滚动显示条 scrollView.showsHorizontalScrollIndicator = NO//横向  默认是YES

scrollView.showsVerticalScrollIndicator = NO//纵向默认是YES

⑤、是否开启滚动视图的回d效果 scrollView.bounces = NO//默认是YES

⑥、定义scrollView的缩放大小比例 scrollView.maximumZoomScale = 2//最多放大两倍

scrollView.minimumZoomScale = 0.5//最多缩小到0.5倍

只有遵守了UIScrollViewDelegate协议才能执行UIScrollView的方法

CollectionView：

UICollectionView、UITableView、NSCollectionView

和 UITableView 不同的是，UICollectionView 不局限于垂直的单列布局。相反，collection view有一个 layout 对象，它决定子视图的位置，

UICollectionView相对于UITableView很相似，都继承于UIScrollView

UITableView的布局形式比较单一，局限于行列表，

UICollectionView的强大之处在于把视图布局分离出来成为一个独立的类，你想实现怎样的视图布局，就子类化这个类并在其中实现。

UICollectionView默认没有表头, UITableView: 有表头和表尾

UICollectionView的区里面是项Item， UITableView:区里面是单元格Cell

collectionView和tableView最大的不同之处就是需要自定义cell, collectionView能自动的根据屏幕宽度显示横列竖！

UICollectionView主要用于瀑布流

UICollectionViewLayout是基类，其子类：UICollectionViewFlowLayout，使用的时候都用子类

CollectionView中的每个Item大小和位置可以单独定义

区别： https://blog.csdn.net/vbirdbest/article/details/50720915

1、显示内容完全由layout(布局对象)决定,必须设置UICollectionView的collectionViewLayout

2、必须设置代理

使用UICollectionView的时候，要声明:

3、必须注册cell

4、必须实现 (和UITableview一样) ：

UICollectionViewLayout的精髓在于你可以定义每个cell的UICollectionViewLayoutAttributes属性

1、cell 重叠 ？

自定义UICollectionViewCell

参考：

https://blog.csdn.net/lvxiangan/article/details/73826108 超全

https://blog.csdn.net/eqera/article/details/8134986

https://www.jianshu.com/p/cf616f73d596 实践

https://blog.csdn.net/vbirdbest/article/details/50720915 有图

　UIScrollView是在ios最有用的控件之一。他是一个来展现超过一个屏幕的内容的很好的方式。下面有很多的技巧来使用他。这篇文章就是关于UIScrollView的，深入浅出，看看我们接下来学习的内容：1：怎么用UIScrollView来展一个比较大的图片2：当UIScrollView缩放的时候怎么一直保持在中间3：在UIScrollView里面怎么嵌入一个复杂的视图层次4：UIScrollView的特性怎么和UIPageControl一起来浏览多个页面的内容5：创建一个UIScrollView滚动视图在上面能看到下一页和上一页的一部分并且还能看到当前页面。这就像appstore的一个浏览app的一个效果。这篇文章是ios5.0以上 xcode4.5的环境我们开始创建一个项目如下图：Image我们填上项目的名字还有你创建appid时候写的公司标识，还有类名字的前缀，设置我们的设备是iPhone我们暂时只支持iPhone的模式，选择单视图模版。选择下一步并且选择保存位置。由于我们介绍UIScrollView的4个效果，因此我们创建一个tableView，每个cell会出现一个新的视图控制器并且展现一个效果。Image(1)上面这个图显示现在你的storyboard是什么样的当你完成的时候。我们编译UITableView的导航，接下来我们要做的是：1：打开MainStroyboard.storyboard并且点击系统模版给我们创建的第一个初始化场景。2：然后我们添加一个UITableViewController从对象库然后放到storyboard。3：现在选择tableView你刚才添加的然后选择Editor，然后Embed in，NavigationController。4：选择tableViewController的tableView，并且设置他的cell类型是静态类型的在属性检查器。5：最后，设置tableView的section是一个，有4个cell，设置cell是basic类型。然后把他们的lables改为Image scroll，custom View scroll，paged paged with peekingImage(2)保存这个storyboard ，并且编译运行。你应该看到你的tableView。如下图：Image(3)滚动缩放一个大图片：我们接下来要做的是学习怎么用UIScrollView来缩放和滚动一个大的图片。第一步你需要设置这个Viewcontroller，选择ViewController.h 并且添加一个UIScrollView的outlet。让你的Controller符合UIScrollView的UIScrollViewDelegate协议如下复制代码#import <UIKit/UIKit.h>@interface ViewController : UIViewController <UIScrollViewDelegate>@property (nonatomic, strong) IBOutlet UIScrollView *scrollView@end复制代码然后在在ViewController.m设置实现属性@synthesize scrollView = _scrollView回到storyboard，从对象库拖拽一个Viewcontroller并且设置他的类是Viewcontroller。Image(4)点击tableview的Cell crl+点击鼠标左键向一个新的Viewcontroller拖拽，并且d出一个storyboard segues并且选择push效果。从对象库拖拽一个UIScrollView到Viewcontroller上并且填充。Image(5)然后然后把UIScrollView的输出口连上还有设置Viewcontroller作为UIScrollView的代理。如下图：Image(6)现在在Viewcontroller.m中的延展中添加属性和方法。这些属性方法是私有的。然后添加@synthesize imageView = _imageView现在我们开始设置我们的UIScrollView了在viewDidLoad和viewVillAppear用下面代码：复制代码- (void)viewDidLoad {[super viewDidLoad]// 1UIImage *image = [UIImage imageNamed:@"photo1.png"]self.imageView = [[UIImageView alloc] initWithImage:image]self.imageView.frame = (CGRect){.origin=CGPointMake(0.0f, 0.0f), .size=image.size}[self.scrollView addSubview:self.imageView]// 2self.scrollView.contentSize = image.size// 3UITapGestureRecognizer *doubleTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scrollViewDoubleTapped:)]doubleTapRecognizer.numberOfTapsRequired = 2doubleTapRecognizer.numberOfTouchesRequired = 1[self.scrollView addGestureRecognizer:doubleTapRecognizer]UITapGestureRecognizer *twoFingerTapRecognizer = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(scrollViewTwoFingerTapped:)]twoFingerTapRecognizer.numberOfTapsRequired = 1twoFingerTapRecognizer.numberOfTouchesRequired = 2[self.scrollView addGestureRecognizer:twoFingerTapRecognizer]}- (void)viewWillAppear:(bool)animated {[super viewWillAppear:animated]// 4CGRect scrollViewFrame = self.scrollView.frameCGFloat scaleWidth = scrollViewFrame.size.width / self.scrollView.contentSize.widthCGFloat scaleHeight = scrollViewFrame.size.height / self.scrollView.contentSize.heightCGFloat minScale = min(scaleWidth, scaleHeight)self.scrollView.minimumzoomScale = minScale// 5self.scrollView.maximumzoomScale = 1.0fself.scrollView.zoomScale = minScale// 6[self centerScrollViewContents]}复制代码上面的代码看起来有点复杂。因此我们停下来一步步的分析下。1：第一步，你需要创建一个UIImageView，设置他的Image属性，然后设置UIImageView的坐标，并且添加到UIScrollView上2：然后我们设置UIScrollView的contentSize，这样做的目的是让UIScrollView知道他自己能向横方向和竖方向滚动多远或者说多少像素。3：然后向UIScrollView上面添加了两个手势:一个是双击手势来缩小，另一个两个手指单击来放大。4：接下来我们需要计算UIScrollView的最小缩放比例。缩放比例是1意味着UIScrollView的内容是正常大小展示。小于1，展示内容放大，当大于1说明内容缩小。为了得到最小缩放比例，你需要计算你缩放多少才能让图片舒适的展示到UIScrollView里根据他的宽度。然后你根据他的高度做相同的计算。最后比较这两个缩放比例的最小的一个设置为UIScrollView最小缩放比例。给你一个缩放比例然后你可以看到整张图片当放大的时候。5:你设置最大缩放比例为1，因为缩放的比图片分辨率大你看图片会模糊。你设置初始缩放为最小缩放比例。因此这个图片可以开始充分放大。6：让你的图片永远在UIScrollView中间当缩放时候。复制代码- (void)centerScrollViewContents {CGSize boundsSize = self.scrollView.bounds.sizeCGRect contentsFrame = self.imageView.frameif (contentsFrame.size.width <boundsSize.width) {contentsFrame.origin.x = (boundsSize.width - contentsFrame.size.width) / 2.0f} else {contentsFrame.origin.x = 0.0f}if (contentsFrame.size.height <boundsSize.height) {contentsFrame.origin.y = (boundsSize.height - contentsFrame.size.height) / 2.0f} else {contentsFrame.origin.y = 0.0f}self.imageView.frame = contentsFrame}如果UIScrollView的bounds大小大于UIImageView图片frame的大小，那么图片的坐标就是条件为真时计算的结果，相反就是原始坐标。- (void)scrollViewDoubleTapped:(UITapGestureRecognizer*)recognizer {// 1CGPoint pointInView = [recognizer locationInView:self.imageView]// 2CGFloat newzoomScale = self.scrollView.zoomScale * 1.5fnewzoomScale = min(newzoomScale, self.scrollView.maximumzoomScale)// 3CGSize scrollViewSize = self.scrollView.bounds.sizeCGFloat w = scrollViewSize.width / newzoomScaleCGFloat h = scrollViewSize.height / newzoomScaleCGFloat x = pointInView.x - (w / 2.0f)CGFloat y = pointInView.y - (h / 2.0f)CGRect rectTozoomTo = CGRectMake(x, y, w, h)// 4[self.scrollView zoomToRect:rectTozoomTo animated:YES]}复制代码1：获得你点击图片的坐标位置.2:接下来计算缩放比例缩放150%，但是必须限制最大缩放比例3：然后用第一步计算的位置计算你想要缩放的位置大小。4：最后，你需要告诉UIScrollView缩放的frame并且加上动画。- (void)scrollViewTwoFingerTapped:(UITapGestureRecognizer*)recognizer {// zoom out slightly, capping at the minimum zoom scale specified by the scroll viewCGFloat newzoomScale = self.scrollView.zoomScale / 1.5fnewzoomScale = max(newZoomScale, self.scrollView.minimumZoomScale)[self.scrollView setZoomScale:newZoomScale animated:YES]}这类似放大的方式。- (UIView*)viewForZoomingInScrollView:(UIScrollView *)scrollView {// Return the view that you want to zoomreturn self.imageView}这是UIScrollView缩放机制的灵魂地方。当UIScrollView完成缩放时候你告诉他是哪个视图在UIScrollView里面实现了缩放。- (void)scrollViewDidZoom:(UIScrollView *)scrollView {// The scroll view has zoomed, so you need to re-center the contents[self centerScrollViewContents]}这个方法是当UIScrollView完成缩放时候，你需要通知视图在UIScrollView中间，否则UIScrollView缩放不自然。Image(7)编译运行项目出现上图效果，你可以试着放大缩小滚动。

---