iOS開發之剖析"秘密"App內容頁面效果(二)

iOS開發之剖析"秘密"App內容頁面效果(二)

@前些天寫了一篇"秘密"的Cell效果文章,但是與在工作中想要的效果還是有差距,而且擴充性很不好,於是重寫封裝,把整體視圖都放到scrollView中,基本是和secret app 一模一樣的效果了.

@代碼如下:(模糊效果的類就不寫了,大家可以搜"UIImage+ImageEffects",還要匯入Accelerate.framework)

1.MTSecretAppEffect.h

#import @interface MTSecretAppEffect : NSObject/** *  建立整體的scrollView,把headScrollView和tableView全部載入在上面,靠它來上下滑動,其餘的滑動全部禁止 * *  @return mainScrollView */- (UIScrollView *)createMainScrollView;/** *  建立headScrollView * *  @return headScrollView */- (UIScrollView *)createHeadScrollView;/** *  建立頭部的模糊view * *  @param scrollview headScrollView * *  @return blurImageView */- (UIImageView *)createBlurImageViewOfView:(UIScrollView *)scrollview;/** *  在- (void)scrollViewDidScroll:(UIScrollView *)scrollView 中調用的方法 * *  @param scrollView *  @param mainScrollView *  @param tableView *  @param headScrollView *  @param blurImageView */- (void)scrollDidScrollView:(UIScrollView *)scrollView withMainScrollView:(UIScrollView *)mainScrollView withTableView:(UITableView *)tableView withHeadScrollView:(UIScrollView *)headScrollView withBlurImageView:(UIImageView *)blurImageView;@end

2.MTSecretAppEffect.m

#import "MTSecretAppEffect.h"#import "UIImage+ImageEffects.h"#import #define HEADER_HEIGHT 200.0f#define HEADER_INIT_FRAME CGRectMake(0, 0, 320, HEADER_HEIGHT)const CGFloat kBarHeight = 50.0f;const CGFloat kBackgroundParallexFactor = 0.5f;const CGFloat kBlurFadeInFactor = 0.015f;@implementation MTSecretAppEffect// 欠缺:調用者設定代理- (UIScrollView *)createMainScrollView{    // 和Self.view同大小的底部ScrollView    UIScrollView *mainScrollView = [[UIScrollView alloc] initWithFrame:[UIApplication sharedApplication].keyWindow.frame];    mainScrollView.bounces = YES;    mainScrollView.alwaysBounceVertical = YES;    mainScrollView.contentSize = CGSizeZero;    mainScrollView.showsVerticalScrollIndicator = YES;    mainScrollView.scrollIndicatorInsets = UIEdgeInsetsMake(50.0f, 0, 0, 0);    return mainScrollView;    }- (UIScrollView *)createHeadScrollView{    UIScrollView *headScrollView = [[UIScrollView alloc] initWithFrame:HEADER_INIT_FRAME];    headScrollView.scrollEnabled = NO;    headScrollView.contentSize = CGSizeMake(320, 1000);        return headScrollView;}- (UIImageView *)createBlurImageViewOfView:(UIScrollView *)scrollview{    UIGraphicsBeginImageContextWithOptions(scrollview.bounds.size, scrollview.opaque, 0.0);    [scrollview.layer renderInContext:UIGraphicsGetCurrentContext()];    UIImage *img = UIGraphicsGetImageFromCurrentImageContext();    UIGraphicsEndImageContext();    UIImageView *blurImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, HEADER_HEIGHT)];    blurImageView.image = [img applyBlurWithRadius:12 tintColor:[UIColor colorWithWhite:0.8 alpha:0.4] saturationDeltaFactor:1.8 maskImage:nil];    blurImageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;    blurImageView.alpha = 0;    blurImageView.backgroundColor = [UIColor clearColor];        return blurImageView;}- (void)scrollDidScrollView:(UIScrollView *)scrollView withMainScrollView:(UIScrollView *)mainScrollView withTableView:(UITableView *)tableView withHeadScrollView:(UIScrollView *)headScrollView withBlurImageView:(UIImageView *)blurImageView{        CGFloat y = 0.0f;    CGRect rect = HEADER_INIT_FRAME;     if (scrollView.contentOffset.y < 0.0f) {        // 下拉變大效果        y = fabs(MIN(0.0f, mainScrollView.contentOffset.y));        headScrollView.frame = CGRectMake(CGRectGetMinX(rect) - y / 2.0f, CGRectGetMinY(rect) - y, CGRectGetWidth(rect) + y, CGRectGetHeight(rect) + y);            }    else {                y = mainScrollView.contentOffset.y;        blurImageView.alpha = MIN(1 , y * kBlurFadeInFactor);        CGFloat backgroundScrollViewLimit = headScrollView.frame.size.height - kBarHeight;                if (y > backgroundScrollViewLimit) {            headScrollView.frame = (CGRect) {.origin = {0, y - headScrollView.frame.size.height + kBarHeight}, .size = {320, HEADER_HEIGHT}};            tableView.frame = (CGRect){.origin = {0, CGRectGetMinY(headScrollView.frame) + CGRectGetHeight(headScrollView.frame)}, .size = tableView.frame.size };            tableView.contentOffset = CGPointMake (0, y - backgroundScrollViewLimit);            CGFloat contentOffsetY = -backgroundScrollViewLimit * kBackgroundParallexFactor;            [headScrollView setContentOffset:(CGPoint){0,contentOffsetY} animated:NO];        }        else {            headScrollView.frame = rect;            tableView.frame = (CGRect){.origin = {0, CGRectGetMinY(rect) + CGRectGetHeight(rect)}, .size = tableView.frame.size };            [tableView setContentOffset:(CGPoint){0,0} animated:NO];            [headScrollView setContentOffset:CGPointMake(0, -y * kBackgroundParallexFactor)animated:NO];        }    }}@end

3.main.m

#import "RootViewController.h"#import "CommentCell.h"#import "MTSecretAppEffect.h"#define HEADER_HEIGHT 200.0f@interface RootViewController () @property (nonatomic,strong) MTSecretAppEffect *secretEffect;     // secretApp 效果對象@property (nonatomic,strong) UIScrollView *mainScrollView;        // 與view相同大小的scrollView@property (nonatomic,strong) UIScrollView *headScrollView;        //@property (nonatomic,strong) UIImageView  *blurImageView;         //@property (nonatomic,strong) UITableView *tableView;              //@end@implementation RootViewController- (void)viewDidLoad{    [super viewDidLoad];        // 0.建立SecretApp effect 效果對象    self.secretEffect = [[MTSecretAppEffect alloc] init];    // 1.主底部scrollView    self.mainScrollView = [self.secretEffect createMainScrollView];    self.mainScrollView.delegate = self;    self.view = self.mainScrollView;    // 2.head背景View    self.headScrollView = [self.secretEffect createHeadScrollView];    // 3.背景圖片視圖    UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, HEADER_HEIGHT)];    imageView.image = [UIImage imageNamed:@"secret.png"];    imageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;    [self.headScrollView  addSubview:imageView];    // 4.模糊視圖    _blurImageView = [self.secretEffect createBlurImageViewOfView:self.headScrollView];    [self.headScrollView addSubview:_blurImageView];    // 5.tableView    self.tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, HEADER_HEIGHT, CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame) - 50 ) style:UITableViewStylePlain];    self.tableView.scrollEnabled = NO;    self.tableView.delegate = self;    self.tableView.dataSource = self;    self.tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];    self.tableView.separatorColor = [UIColor clearColor];    // 6.添加視圖    [self.view addSubview:self.headScrollView];    [self.view addSubview:self.tableView];    // 7.設定一下    self.mainScrollView.contentSize = CGSizeMake(320, self.tableView.contentSize.height + CGRectGetHeight(self.headScrollView.frame));}- (void)scrollViewDidScroll:(UIScrollView *)scrollView {        // 8.調用方法    [self.secretEffect scrollDidScrollView:scrollView withMainScrollView:self.mainScrollView withTableView:self.tableView withHeadScrollView:self.headScrollView withBlurImageView:self.blurImageView];}#pragma mark - 隱藏狀態列- (BOOL)prefersStatusBarHidden {    return YES;}#pragma mark - UITableView dataSource- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {    return 1;}- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {    return 20;}- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {        return 40;}- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {        CommentCell *cell = [tableView dequeueReusableCellWithIdentifier:[NSString stringWithFormat:@"Cell %ld", indexPath.row]];    if (!cell) {        cell = [[CommentCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:[NSString stringWithFormat:@"Cell %ld", indexPath.row]];    }    cell.textLabel.text = [NSString stringWithFormat:@"section = %ld row = %ld",indexPath.section,indexPath.row];    return cell;}- (void)didReceiveMemoryWarning{    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end

@: