总得做点什么才能让自己有成就感，
最近刚刚进入项目组，在做电商方面的项目，为了更好的总结自己，也为了方便记录知识的积累，所以想试着写一些东西，
1.有关UIScrollView的一些基础
1）UIScrollView不同于UiView，它具备了可滚动的效果，当移动设备的屏幕大小 不能满足直接展示所有的内容时，超出一个屏幕时，用户可通过滚动手势来来查看屏幕以外的内容。
2）将需要展示的内容添加到UIScrollView中，通过设置UIScrollView的cocontentSize属性，告诉UIScrollView所有内容的尺寸，也就是告诉它滚动的范围。
3）没有设置contentSize，scroEnabled = NO，或是没有接收到触摸事件:userInteractionEnabled = NO，都会导致UIScrollView无法滚动。
2.UIScrollView常用属性和方法
1）有关显示内容的属性
表示UIScrollView滚动的位置
(就是内容左上角与scrollView左上角的间距!!)
@property (nonatomic) CGPoint contentOffset;
表示UIScrollView内容的尺寸,滚动范围(能滚多远)
@property (nonatomic) CGSize contentSize;
在UIScrollView的四周增加额外的滚动区域,一般用来避免scrollView的内容被其他控件挡住
@property (nonatomic) UIEdgeInsets contentInset;
2）效果或是滚动条的属性
设置UIScrollView是否需要弹簧效果
@property (nonatomic) BOOL bounces;
设置UIScrollView是否能滚动
@property (nonatomic,getter=isScrollEnabled) BOOL scrollEnabled;
是否显示水平滚动条
@property (nonatomic) BOOL showsHorizontalScrollIndicator;
是否显示垂直滚动条
@property (nonatomic) BOOL showsVerticalScrollIndicator;
3）要想监听整个UIScrollView的滚动过程,就必须给它设置一个代理对象,通过代理得知UIScrollView的滚动过程。
UIScrollView和delegate的通信
手势 方法
开始拖拽 scrollViewWillBeginDragging:
具体到某个位置 scrollViewDidScroll:
用户停止拖拽 scrollViewDidEndDragging:willDecelerate:
3.实现动画
DemoViewController.h
#import@interface DemoViewController : UIViewController
@property (strong, nonatomic) IBOutlet UIImageView *image;(图片视图)
@property (strong, nonatomic) IBOutlet UIView *otherView;（遮罩视图）
@property (strong, nonatomic) IBOutlet UIScrollView *scrollView;（视图）
@end
DemoViewController.m
@interface DemoViewController (){
CGFloat headerImageHeight;
CGFloat scale;
}
@end
@implementation DemoViewController
- (void)viewDidLoad {
[super viewDidLoad];
headerImageHeight = (headerImageHeight == 0 ? self.view.frame.size.height * 0.5 : headerImageHeight);
_scrollView = [[UIScrollView alloc]initWithFrame:[UIScreen mainScreen].bounds];
_scrollView.delegate = self;
_scrollView.alwaysBounceVertical = YES;
_scrollView.backgroundColor = [UIColor clearColor];
_image = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.view.frame.size.width,headerImageHeight)];
_image.image = [UIImage imageNamed:@"WechatIMG1.jpeg"];
_image.contentMode = UIViewContentModeScaleAspectFill;
scale = _image.frame.size.width / _image.frame.size.height;
_otherView = [[UIView alloc] initWithFrame:CGRectMake(0, headerImageHeight-[UIScreen mainScreen].bounds.size.height * 0.1, self.view.frame.size.width, self.view.frame.size.height)];
_otherView.backgroundColor = [UIColor colorWithRed:204/255.0f green:204/255.0f blue:204/255.0f alpha:1];
[_scrollView addSubview:_otherView];
[self.view addSubview:_image];
[self.view addSubview:_scrollView];
// Do any additional setup after loading the view from its nib.
}
#pragma mark ---- UIScrollViewDelegate ----
- (void)scrollViewDidScroll:(UIScrollView *)scrollView1 {
//图片上下偏移量
CGFloat imageOffsetY = _scrollView.contentOffset.y;
//上滑
if (imageOffsetY < 0) {
// 高度宽度同时拉伸 从中心放大
CGFloat imgH = headerImageHeight - scrollView1.contentOffset.y * 2;
CGFloat imgW = imgH * scale;
_image.frame = CGRectMake(scrollView1.contentOffset.y * scale,0, imgW,imgH);
} else {
//只拉伸高度
_image.frame = CGRectMake(0,0, _image.frame.size.width,(self.view.frame.size.height * 0.554)-imageOffsetY);
}
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
@end
4.实现原理
先创建UIScrollView视图，规定大小和显示位置，实现UIScrollViewDelegate代理，然后创建图片视图规定大小和显示位置，注意图片的填充方式为UIViewContentModeScaleAspectFill。最后创建遮罩视图并规定大小颜色和位置等属性。
将以上三个视图按照顺序添加到主视图中， 先讲遮罩视图添加进UIScrollView视图中，[_scrollView addSubview:_otherView];
再将图片视图添加进主视图中，
[self.view addSubview:_image];
最后将UIScrollView视图添加进主视图中，
[self.view addSubview:_scrollView];
接下来就是实现UIScrollViewDelegate代理方法- (void)scrollViewDidScroll:(UIScrollView *)scrollView；
通过事实读取UIScrollView滑动到位置，来改变图片视图的大小，拉伸图片。
网友评论