一、知识点简单介绍
1.UIScrollView控件是什么?
(1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限
(2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容
(3)普通的UIView不具备滚动功能,不能显⽰示过多的内容
(4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容
(5) 举例:手机上的“设置”、其他⽰示例程序
2.UIScrollView的简单使用
(1)将需要展⽰的内容添加到UIScrollView中
(2)设置UIScrollView的contentSize属性,告诉UIScrollView所有内容的尺⼨寸,也就是告诉 它滚动的范围(能滚多远,滚到哪⾥里是尽头)
3.属性
(1)常用属性:
1)@property(nonatomic)CGPoint contentOffset; 这个属性⽤用来表⽰示UIScrollView滚动的位置
2)@property(nonatomic)CGSize contentSize;这个属性⽤用来表⽰示UIScrollView内容的尺⼨寸,滚动范围(能滚多远)
3)@property(nonatomic)UIEdgeInsets contentInset; 这个属性能够在UIScrollView的4周增加额外的滚动区域
(2)其他属性:
1)@property(nonatomic) BOOL bounces; 设置UIScrollView是否需要弹簧效果
2)@property(nonatomic,getter=isScrollEnabled)BOOLscrollEnabled; 设置UIScrollView是否能滚动
3)@property(nonatomic) BOOL showsHorizontalScrollIndicator; 是否显⽰示⽔水平滚动条
4)@property(nonatomic) BOOL showsVerticalScrollIndicator; 是否显⽰示垂直滚动条
4.注意点
• 如果UIScrollView⽆无法滚动,可能是以下原因:
(1)没有设置contentSize
(2) scrollEnabled = NO
(3) 没有接收到触摸事件:userInteractionEnabled = NO
(4)没有取消autolayout功能(要想scrollView滚动,必须取消autolayout)
//创建一个滑动视图
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 20, 375, 200)];
[self.view addSubview:scrollView];
scrollView.backgroundColor = [UIColor redColor];
//子视图
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 375, 200)];
[scrollView addSubview:view];
view.backgroundColor = [UIColor grayColor];
//子视图
UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(0, 200, 375, 200)];
[scrollView addSubview:view2];
view2.backgroundColor = [UIColor blackColor];
//滑动视图显示范围
scrollView.contentSize = CGSizeMake(375, 200*2);
//水平滑动条
scrollView.showsHorizontalScrollIndicator = NO;
//垂直滑动条
scrollView.showsVerticalScrollIndicator = YES;
//设置滚动条风格
scrollView.indicatorStyle = UIScrollViewIndicatorStyleBlack;
//是否反弹
scrollView.bounces = YES;
//设置翻页效果
scrollView.pagingEnabled = YES;
//设置偏移量
scrollView.contentOffset = CGPointMake(100, 20);
/**放大倍数*/
scroll.zoomScale = 2;
scroll setZoomScale:<#(CGFloat)#> animated:<#(BOOL)#>
//每次点击增加X值 设置位置
- (void)action
{
CGPoint offset = scrollView.contentOffset;
offset.x += 375;
[scrollView setContentOffset:offset animated:YES];
}
// 增加额外的滚动区域(逆时针,上、左、下、右)
// top left bottom right
scrollView.contentInset = UIEdgeInsetsMake(20, 20, 20, 20);
、、、、、、、、、、、、、、、实现右侧循环滑动、、、、、、、、、、、、、、、、、
//1.创建滑动视图
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 90, 375, 200)];
//2.设置代理
scrollView.delegate = self;
//3.设置内容区域(大小)
scrollView.contentSize = CGSizeMake(375*6, 200);
//4.添加视图
[self.view addSubview:scrollView];
scrollView.pagingEnabled = YES;
//5.添加图片
for (int i=0; i<6; i++) {
NSString *imgName = [NSString stringWithFormat:@"image%d.jpg",i+1];
UIImageView *imgView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imgName]];
imgView.frame = CGRectMake(0+375*i, 0, 375, 200);
[scrollView addSubview:imgView];
}
//6.添加pageCtrl分页
_pageCtrl = [[UIPageControl alloc] initWithFrame:CGRectMake(0, 260, 375, 30)];
_pageCtrl.numberOfPages = 5;
_pageCtrl.currentPage = 0;
[self.view addSubview:_pageCtrl];
//视图停止滑动时切换page 实现右侧无限滑动
//视图停止的时候
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
//x偏移量除以图片的宽度等于5
if (scrollView.contentOffset.x/375 == 5) {
//滚动到第一页
CGPoint point = CGPointMake(0, 0);
[scrollView setContentOffset:point animated:NO];
_pageCtrl.currentPage = 0;
}else {
//向右偏移的宽度X值除以375,第二个图就是2个375,第三个就是3个375,以此类推
_pageCtrl.currentPage = scrollView.contentOffset.x/375;
}
}
、、、、、、、、、、、、、、、实现图片渐变显示、、、、、、、、、、、、、、、、、
- (void)viewDidLoad {
[super viewDidLoad];
imgView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image1.jpg"]];
imgView1.frame = CGRectMake(0, 90, 375, 200);
imgView1.alpha = 1;
[self.view addSubview:imgView1];
imgView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image2.jpg"]];
imgView2.frame = CGRectMake(0, 90, 375, 200);
imgView2.alpha = 0;
[self.view addSubview:imgView2];
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 90, 375, 200)];
scrollView.delegate = self;
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.backgroundColor = [UIColor clearColor];
scrollView.contentSize = CGSizeMake(375*2, 200);
[self.view addSubview:scrollView];
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
imgView1.alpha = 1 - scrollView.contentOffset.x/375.0;
imgView2.alpha = scrollView.contentOffset.x/375.0;
}
、、、、、、、、、、、代理方法UIScrollViewDelegate、、、、、、、、、、、、、
/**
* 滑动时实时调用
*/
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
/**结束拖拽时调用 可以使图片集中 具体参见代码示例 */
- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset
{
//计算X方向的偏移量
CGFloat x = targetContentOffset->x;
NSInteger page = (x + 200 * 0.5) / 200;
targetContentOffset->x = 200 * page;
}
-(void)scrollViewDidScroll:(UIScrollView*)scrollView;
//会在视图滚动时收到通知。包括一个指向被滚动视图的指针,从中可以读取contentOffset属性以确定其滚动到的位置。
-(void)scrollViewWillBeginDragging:(UISCrollView*)scrollView;
//当用户首次在某个方向上进行拖动时得到通知。这个方法会得到被作为参数传递的滚动视图指针,也同样可以从中读取 contentOffset 属性。
-(void)scrollViewDidEndDragging:(UIScrollView*)scrollView willDecelerate:(BOOL)decelerate;
//当用户抬起拖动到手指时得到通知。还会得到一个布尔值,知名报告滚动视图最后位置之前,是否需要减速。
-(void)scrollViewWillBeginDecelerate:(UIScrollView*)scrollView;
//当用户抬起手指而视图需要继续移动时,会收到通知。这个方法可以用来读取 contentOffset属性,从而判断出当用户抬起手指钱最后一次滚动到的位置,虽然这个位置并不会使滚动条的最终停止位置。
-(void)scrollViewDidEndDecelerating:(UIScrollView*)scrollView;//当上面提到的减速完毕、滚动视图停止时得到通知。收到这个通知的时刻,滚动视图的contentOffset属性会反映出滚动条最终停止的位置。
-(void)scrollViewDidEndZooming:(UIScrollview*)scrollView withView:(UIView*)view atScale:(float)scale;//当用户对内容进行缩放时,会收到通知。缩放比例表示为一个浮点值,会作为参数传递进来。
-(BOOL)scrollViewShouldScrollToTop:(UIScrollView*)scrollView;
-(void)scrollViewDidScrollToTop:(UIScrollView*)scrollView;
//当用户点出iPhone状态条时,滚动视图委托可以决定视图是否滚动回到开头。
、、、、、、、、、、、、、、、、、图片放大缩小、、、、、、、、、、、、、、、、、
/**
* 放大缩小时实时调用
*/
当用户在UIScrollView身上使用捏合手势时,UIScrollView会调用代理的viewForZoomingInScrollView:方法,这个方法返回的控件就是需要进行缩放的控件。
- (void)scrollViewDidZoom:(UIScrollView *)scrollView
//设置实现缩放
//设置代理scrollview的代理对象
_scrollview.delegate=self;
//设置最大伸缩比例
_scrollview.maximumZoomScale=2.0;
//设置最小伸缩比例
_scrollview.minimumZoomScale=0.5;
//告诉scrollview要缩放的是哪个子控件
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return _imageview; //图片对象名称
}
//开始放大或者缩小时会调用此方法
- (void)scrollViewWillBeginZooming:(UIScrollView *)scrollView withView:(UIView *)view{
NSLog(@"开始缩放了");
}
- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale{
NSLog(@"结束缩放了");
}
/**双击手势实现放大缩小图片 要遵守协议 并实现viewForZoomingInScrollView方法*/
- (void)doubleAction:(UITapGestureRecognizer *)tap
{
if(_bgScrollView.zoomScale > 1)
{
[_bgScrollView setZoomScale:1.0 animated:YES];
}else{
[_bgScrollView setZoomScale:2.0 animated:YES];
}
}