iOS開発の剖析「秘密」Appコンテンツページ効果(二)
@先日、「秘密」のCell効果の文章を書きましたが、仕事で望む効果とはまだ差があり、拡張性が悪いので、パッケージを書き直し、全体のビューをscrollViewに入れました.基本的にsecret appとそっくりの効果です.
@コードは以下の通りです:(ファジイ効果のクラスは書かないで、みんなは“UIimage+ImageEffects”を検索することができて、またAccelerate.frameworkをインポートします)
1.MTSecretAppEffect.h
2.MTSecretAppEffect.m
3.main.m
@コードは以下の通りです:(ファジイ効果のクラスは書かないで、みんなは“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
@効果図: