iOS开发之剖析"秘密"App内容页面效果(二)

@前些天写了一篇"秘密"的Cell效果文章,但是与在工作中想要的效果还是有差距,而且扩展性很不好,于是重写封装,把整体视图都放到scrollView中,基本是和secret app 一模一样的效果了.

@代码如下:(模糊效果的类就不写了,大家可以搜"UIImage+ImageEffects",还要导入Accelerate.framework)

1.MTSecretAppEffect.h

#import <Foundation/Foundation.h>

@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 <QuartzCore/QuartzCore.h>

#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 () <UIScrollViewDelegate, UITableViewDataSource, UITableViewDelegate>

@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

@效果图:

iOS开发之剖析"秘密"App内容页面效果(二)