首页 > 代码库 > UI基础之UIScrollView的使用
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
当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;
// 设置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
效果:
UI基础之UIScrollView的使用