UI基础之UIScrollView的使用
一：ScrollView属性应用
1，UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容
2，UIScrollView 的使用步骤：
1>添加scrollView的滚动内容
2>设置scrollView的滚动范围，属性值contentSize，告诉scrollView滚动内容的范围。
3，属性：
1>contentOffset; 这个属性⽤用来表⽰示UIScrollView滚动的位置
2>contentSize;这个属性⽤用来表⽰示UIScrollView内容的尺⼨寸
3>contentInset; 这个属性能够在UIScrollView的4周增加额外的滚动区域 ,也就是说让scrollView的边界增加一定的内边距。
contentOffset属性值位置是一个相对位置用来记录ScrollView的滚动位置，它是scrollView相对内容的滚动位置，我们可以这样理解：屏幕中的内容不变，scrollView滚动位置跟内容边界的距离x,y
4> bounces; 设置UIScrollView是否需要弹簧效果
5>scrollEnabled; 设置UIScrollView是否能滚动
6>showsHorizontalScrollIndicator; 是否显⽰示⽔水平滚动条
showsVerticalScrollIndicator; 是否显⽰示垂直滚动条
如果scrollView设置后不能滚动原因：*没有设置滚动内容的范围:contentSize; *scrollView的enable为NO; *scrollView的userInteractionEnable为NO；
补充：UIScrollView的frame为它的可视范围大小，而UIScrollView的contentSize是它可滚动的范围
4，UIScrollView实现图片的缩放功能
1>缩放原理：当用户在UIScrollView身上使用捏合手势时，UIScrollView会给代理发送一条消息，询问代理究竟要缩放自己内部的哪一个子控件（哪一块内容）
5,UIScrollView的方法：
当UIScrollView发生一系列的滚动操作时， 会自动通知它的代理（delegate）对象，给它的代理发送相应的消息，让代理得知它的滚动情况
也就是说，要想监听UIScrollView的滚动过程，就必须先给UIScrollView设置一个代理对象，然后通过代理得知UIScrollView的滚动过程
1> 实现缩放的步骤：
设置代理
设置minimumZoomScale ：缩小的最小比例
设置maximumZoomScale ：放大的最大比例
让代理对象实现下面的方法，返回需要缩放的视图控件
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;
2>- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView;
将要滚动
3>- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate;
结束滚动
4>- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView;
缩放哪个UIView
5>- (void)setContentOffset:(CGPoint)contentOffset animated:(BOOL)animated; 设置scrollView的滚动位置
补充：1，UIPageControl
两个属性：numberOfPage
currentPage
2，UIScrollView的属性值contentOffSet和ContentInSet的配合使用让UIScrollView中的内容进入视图范围内就有一个边距
// 设置scrollView的位置 self.scrollView.contentOffset = CGPointMake(-40, -40)
// scrollView只有当用户拖动才会有内边距 所以先设置contentOffSet的位置
// 设置scrollView的内边距
self.scrollView.contentInset = UIEdgeInsetsMake(40, 50, 60, 70);
3,当用静态方式添加控件到storyBoard上，控制scrollView时，注意：查看该控件是否添加到了scrollView上，这样该控件就会跟scrollView一起滚动
二：简单实例代码
缩放功能:
#import "ViewController.h" @interface ViewController ()<UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet UIScrollView *scrollView; @property (weak, nonatomic) IBOutlet UIImageView *imageView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // // 设置scrollView的滚动范围 self.scrollView.contentSize = self.imageView.image.size; // // // 设置scrollView的位置 // self.scrollView.contentOffset = CGPointMake(-40, -40); // // // scrollView只有当用户拖动才会有内边距 所以先设置contentOffSet的位置 // // 设置scrollView的内边距 // self.scrollView.contentInset = UIEdgeInsetsMake(40, 50, 60, 70); // // // 设置scrollView的弹簧 // self.scrollView.bounces = NO; // // // 设置scrollView的水平垂直属性 // self.scrollView.showsHorizontalScrollIndicator = NO; // self.scrollView.showsVerticalScrollIndicator = NO; //scrollView的缩放 self.scrollView.minimumZoomScale = 0.2; self.scrollView.maximumZoomScale = 2; self.scrollView.delegate = self; // 设置代理 } // 代理方法 - (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView { return self.imageView; } @end
效果
UIScrollView属性的应用
#import "ViewController.h" @interface ViewController () @property (weak, nonatomic) IBOutlet UIScrollView *scrollView; @property (weak, nonatomic) IBOutlet UIView *footerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. // 1，设置scrollView的滚动范围 CGFloat heigth = CGRectGetMaxY(self.footerView.frame); self.scrollView.contentSize = CGSizeMake(0,heigth); // 2,设置scrollView的contentOffSet的位置 self.scrollView.contentOffset = CGPointMake(0, -64); // 3,设置scrollView的内边距 self.scrollView.contentInset = UIEdgeInsetsMake(64, 0, 120, 0); } @end
效果：
#import "ViewController.h" @interface ViewController ()<UIScrollViewDelegate> @property (weak, nonatomic) IBOutlet UIScrollView *scrollView; @property (nonatomic, weak) UIPageControl *pageControl; @property (nonatomic, strong) NSTimer *timer; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. int count = 5; CGFloat imageW = 300; CGFloat imageY = 0; CGFloat imageH = 130; for (int i = 0; i<count; i++) { UIImageView *imageView = [[UIImageView alloc] init]; [self.scrollView addSubview:imageView]; CGFloat imageX = i * imageW; imageView.frame = CGRectMake(imageX, imageY, imageW, imageH); NSString *imageName = [NSString stringWithFormat:@"img_0%d", i+1]; imageView.image = [UIImage imageNamed:imageName]; } // 创建scrollView的滚动范围 self.scrollView.contentSize = CGSizeMake(count * imageW , 0); self.scrollView.showsHorizontalScrollIndicator = NO; // 开启分页功能 self.scrollView.pagingEnabled = YES; UIPageControl *pageControl = [[UIPageControl alloc] init]; [self.view addSubview:pageControl]; self.pageControl = pageControl; pageControl.frame = CGRectMake(85, 140, 150, 20); // 设置pageControl的属性 pageControl.numberOfPages = count; pageControl.currentPageIndicatorTintColor = [UIColor blueColor]; pageControl.pageIndicatorTintColor = [UIColor redColor]; self.scrollView.delegate = self; NSTimer *timer = [NSTimer timerWithTimeInterval:1.0 target:self selector:@selector(nextImage) userInfo:nil repeats:YES]; // self.timer = timer; // [timer fire]; NSRunLoop *runLoop = [NSRunLoop currentRunLoop]; [runLoop addTimer:timer forMode:NSRunLoopCommonModes]; } - (void)nextImage { NSInteger page = self.pageControl.currentPage; if (page == self.pageControl.numberOfPages - 1) { page = 0; } else { page++; } [self.scrollView setContentOffset:CGPointMake(page * self.scrollView.frame.size.width, 0) animated:YES]; } - (void)scrollViewDidScroll:(UIScrollView *)scrollView { CGPoint point = self.scrollView.contentOffset; NSInteger page = (point.x + self.scrollView.frame.size.width * 0.5)/self.scrollView.frame.size.width; self.pageControl.currentPage = page; } @end
效果：
