您现在的位置是:首页 > 文章详情

iOS开发-UIScrollView原理

日期:2017-06-27点击:251

UIScrollView在开发中是不可避免,关于UIScrollView都有自己一定的理解。滚动视图有两个需要理解的属性,frame和bounds,frame是定义了视图在窗口的大小和位置,bounds表示视图在其自身坐标系中的位置和大小,frame影响视图在窗口位置,bounds会影响子视图的位置。

先来看一张图片:

我们用一个父View将整个窗口铺满,然后添加子视图:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
UIView *redView = [[UIView alloc] initWithFrame:CGRectMake(20, 20, 100, 100)];
redView.backgroundColor = [UIColor redColor];
 
UIView *greenView = [[UIView alloc] initWithFrame:CGRectMake(160, 150, 150, 180)];
greenView.backgroundColor = [UIColor greenColor];
 
UIView *blueView = [[UIView alloc] initWithFrame:CGRectMake(60, 400, 200, 150)];
blueView.backgroundColor = [UIColor blueColor];
 
UIView *yellowView = [[UIView alloc] initWithFrame:CGRectMake(180, 600, 180, 200)];
yellowView.backgroundColor = [UIColor yellowColor];
 
[self.container addSubview:redView];
[self.container addSubview:greenView];
[self.container addSubview:blueView];
[self.container addSubview:yellowView];
UILabel *desc=[[UILabel alloc]initWithFrame:CGRectMake(150, 20, 200, 20)];
[desc setText: @"博客园-FlyElephant" ];
[desc setFont:[UIFont systemFontOfSize:14]];
[desc setTextAlignment:NSTextAlignmentCenter];
[self.container addSubview:desc];
  [self.view addSubview:self.container];

重新设置Bounds:

1
2
3
CGRect bounds=self.container.bounds;
bounds.origin=CGPointMake(0, 200);
self.container.bounds=bounds;

效果如下:

通过设置Bounds可以让视图向上移动,那么我可以通过手势简单的定义UIScrollView:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
@ interface   FEScrollView()
 
@property (assign,nonatomic) CGSize contentSize;
 
@end
 
@implementation FEScrollView
 
-(instancetype)initWithFrame:(CGRect)frame{
     self=[super initWithFrame:frame];
     if  (self) {
         UIPanGestureRecognizer *panGesture=[[UIPanGestureRecognizer alloc]initWithTarget:self action:@selector(handlePanGesture:)];
         [self addGestureRecognizer:panGesture];
     }
     return  self;
}
 
-( void )handlePanGesture:(UIPanGestureRecognizer *)panGestureRecongnizer{
     CGPoint translation = [panGestureRecongnizer translationInView:self];
     CGRect bounds = self.bounds;
     
     CGFloat newBoundsOriginY = bounds.origin.y - translation.y;
     bounds.origin.y=newBoundsOriginY;
     self.bounds = bounds;
   
     [panGestureRecongnizer setTranslation:CGPointZero inView:self];
}<br>@end

效果如下:

UIScrollView是可以设置ConteSize的,我们也可以设置,并控制滑动的范围:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
-( void )handlePanGesture:(UIPanGestureRecognizer *)panGestureRecongnizer{
     CGPoint translation = [panGestureRecongnizer translationInView:self];
     CGRect bounds = self.bounds;
     
     //需要设置contentsize
     CGFloat newBoundsOriginX = bounds.origin.x - translation.x;
     CGFloat minBoundsOriginX = 0.0;
     CGFloat maxBoundsOriginX = self.contentSize.width - bounds.size.width;
     bounds.origin.x = fmax(minBoundsOriginX, fmin(newBoundsOriginX, maxBoundsOriginX));
     
     CGFloat newBoundsOriginY = bounds.origin.y - translation.y;
     CGFloat minBoundsOriginY = 0.0;
     CGFloat maxBoundsOriginY = self.contentSize.height - bounds.size.height;
     bounds.origin.y = fmax(minBoundsOriginY, fmin(newBoundsOriginY, maxBoundsOriginY));
   
     self.bounds = bounds;
     [panGestureRecongnizer setTranslation:CGPointZero inView:self];
}

UIScrollView实际上比我们实现的要复杂很多反弹效果,动量滚动,放大试图以及涉及到的代理方法,本文就是简单介绍一下原理,实际开发中如非特殊的必要,没必要继承UIView去实现UIScrollView。如果对UIScrollView有特殊需求,倒是可以继承UIScrollView实现自己的功能~


本文转自Fly_Elephant博客园博客,原文链接:http://www.cnblogs.com/xiaofeixiang/p/5144256.html,如需转载请自行联系原作者

原文链接:https://yq.aliyun.com/articles/362306
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章