總得做點(diǎn)什么才能讓自己有成就感，
? ? ?最近剛剛進(jìn)入項(xiàng)目組，在做電商方面的項(xiàng)目，為了更好的總結(jié)自己，也為了方便記錄知識(shí)的積累，所以想試著寫一些東西，
1.有關(guān)UIScrollView的一些基礎(chǔ)
? ? 1）UIScrollView不同于UiView，它具備了可滾動(dòng)的效果，當(dāng)移動(dòng)設(shè)備的屏幕大小 不能滿足直接展示所有的內(nèi)容時(shí)，超出一個(gè)屏幕時(shí)，用戶可通過(guò)滾動(dòng)手勢(shì)來(lái)來(lái)查看屏幕以外的內(nèi)容。
? ? 2）將需要展示的內(nèi)容添加到UIScrollView中，通過(guò)設(shè)置UIScrollView的cocontentSize屬性，告訴UIScrollView所有內(nèi)容的尺寸，也就是告訴它滾動(dòng)的范圍。
? ? 3）沒有設(shè)置contentSize，scroEnabled = NO，或是沒有接收到觸摸事件:userInteractionEnabled = NO，都會(huì)導(dǎo)致UIScrollView無(wú)法滾動(dòng)。
2.UIScrollView常用屬性和方法
? ? ?1）有關(guān)顯示內(nèi)容的屬性
表示UIScrollView滾動(dòng)的位置
(就是內(nèi)容左上角與scrollView左上角的間距!!)
@property (nonatomic) CGPoint contentOffset;
表示UIScrollView內(nèi)容的尺寸,滾動(dòng)范圍(能滾多遠(yuǎn))
@property (nonatomic) CGSize contentSize;
在UIScrollView的四周增加額外的滾動(dòng)區(qū)域,一般用來(lái)避免scrollView的內(nèi)容被其他控件擋住
@property (nonatomic) UIEdgeInsets contentInset;
? ? ?2）效果或是滾動(dòng)條的屬性
設(shè)置UIScrollView是否需要彈簧效果
@property (nonatomic) BOOL bounces;
設(shè)置UIScrollView是否能滾動(dòng)
@property (nonatomic,getter=isScrollEnabled) BOOL scrollEnabled;
是否顯示水平滾動(dòng)條
@property (nonatomic) BOOL showsHorizontalScrollIndicator;
是否顯示垂直滾動(dòng)條
@property (nonatomic) BOOL showsVerticalScrollIndicator;
? ? ? 3）要想監(jiān)聽整個(gè)UIScrollView的滾動(dòng)過(guò)程,就必須給它設(shè)置一個(gè)代理對(duì)象,通過(guò)代理得知UIScrollView的滾動(dòng)過(guò)程。
?UIScrollView和delegate的通信
? ? ? ? ? ? ? 手勢(shì) ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 方法
? ? ? ? ? ? ? 開始拖拽 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?scrollViewWillBeginDragging:
? ? ? ? ? ? ? 具體到某個(gè)位置 ? ? ? ? ? ? ? ? ? ? scrollViewDidScroll:
? ? ? ? ? ? ? 用戶停止拖拽 ? ? ? ? ? ? ? ? ? ? ? ?scrollViewDidEndDragging:willDecelerate:?
3.實(shí)現(xiàn)動(dòng)畫
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) {
// 高度寬度同時(shí)拉伸 從中心放大
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.實(shí)現(xiàn)原理
? ? ? ?先創(chuàng)建UIScrollView視圖，規(guī)定大小和顯示位置，實(shí)現(xiàn)UIScrollViewDelegate代理，然后創(chuàng)建圖片視圖規(guī)定大小和顯示位置，注意圖片的填充方式為UIViewContentModeScaleAspectFill。最后創(chuàng)建遮罩視圖并規(guī)定大小顏色和位置等屬性。
將以上三個(gè)視圖按照順序添加到主視圖中， 先講遮罩視圖添加進(jìn)UIScrollView視圖中，[_scrollView addSubview:_otherView];
再將圖片視圖添加進(jìn)主視圖中，
[self.view addSubview:_image];
最后將UIScrollView視圖添加進(jìn)主視圖中，
[self.view addSubview:_scrollView];
接下來(lái)就是實(shí)現(xiàn)UIScrollViewDelegate代理方法- (void)scrollViewDidScroll:(UIScrollView *)scrollView；??
通過(guò)事實(shí)讀取UIScrollView滑動(dòng)到位置，來(lái)改變圖片視圖的大小，拉伸圖片。
