Created
March 13, 2014 20:30
-
-
Save mnmaraes/9536364 to your computer and use it in GitHub Desktop.
This Gist Emulates a standard app intro view. The images "sea" and "fire" are because of the transition between a red and blue background. Use your own image (anyone will do, really).
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// TUIIntroPageViewController.m | |
// TestUIs | |
// | |
// Created by Murillo Nicacio de Maraes on 3/13/14. | |
// Copyright (c) 2014 m-one. All rights reserved. | |
// | |
#import "TUIIntroPageViewController.h" | |
@interface TUIIntroPageViewController () <UIScrollViewDelegate> | |
#pragma mark - First Page Views | |
@property (nonatomic) UIImageView *firstPageBackgroundImageView; | |
@property (nonatomic) UIView *firstPageInfoView; | |
#pragma mark - Second Page Views | |
@property (nonatomic) UIImageView *secondPageBackgroundImageView; | |
@property (nonatomic) UIView *secondPageInfoView; | |
@end | |
@implementation TUIIntroPageViewController | |
-(void)viewDidLoad | |
{ | |
[super viewDidLoad]; | |
[self viewSetUp]; | |
} | |
-(void)viewSetUp | |
{ | |
UIScrollView *containerScrollView = [self newContainerScrollView]; | |
[containerScrollView addSubview:self.firstPageInfoView]; | |
[containerScrollView addSubview:self.secondPageInfoView]; | |
[self.view addSubview:self.firstPageBackgroundImageView]; | |
[self.view addSubview:self.secondPageBackgroundImageView]; | |
[self.view addSubview:containerScrollView]; | |
} | |
#pragma mark - UIScrollViewDelegate | |
-(void)scrollViewDidScroll:(UIScrollView *)scrollView | |
{ | |
CGFloat deltaX = scrollView.contentOffset.x / CGRectGetWidth(self.view.frame); | |
self.firstPageBackgroundImageView.alpha = 1.0 - deltaX; | |
self.secondPageBackgroundImageView.alpha = deltaX; | |
self.firstPageInfoView.transform = CGAffineTransformMakeScale(1.0 * (1.0 - deltaX), 1.0 * (1.0 - deltaX)); | |
self.secondPageInfoView.transform = CGAffineTransformMakeScale(1.0 * deltaX, 1.0 * deltaX); | |
} | |
#pragma mark - Accessors | |
-(UIImageView *)firstPageBackgroundImageView | |
{ | |
if (!_firstPageBackgroundImageView) { | |
_firstPageBackgroundImageView = [[UIImageView alloc] initWithFrame:self.view.frame]; | |
_firstPageBackgroundImageView.image = [UIImage imageNamed:@"sea"]; | |
_firstPageBackgroundImageView.alpha = 1.0; // For clarity and comparison purposes | |
} | |
return _firstPageBackgroundImageView; | |
} | |
-(UIView *)firstPageInfoView | |
{ | |
if (!_firstPageInfoView) { | |
_firstPageInfoView = [UIView new]; | |
_firstPageInfoView.bounds = CGRectMake(0.0, 0.0, 240., 240.); | |
_firstPageInfoView.center = self.view.center; | |
UILabel *label = [UILabel new]; | |
label.bounds = CGRectMake(0.0, 0.0, 240., 66.); | |
label.center = CGPointMake(120., 180.); | |
label.numberOfLines = 0; | |
label.text = @"This is the first view of the sequence, pan it and watch it do something cool"; | |
label.textAlignment = NSTextAlignmentCenter; | |
label.textColor = [UIColor redColor]; | |
label.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody]; | |
UIView *view = [UIView new]; | |
view.bounds = CGRectMake(0.0, 0.0, 120., 120.); | |
view.center = CGPointMake(120., 60.); | |
view.layer.cornerRadius = 60.; | |
view.layer.borderWidth = 10.; | |
view.layer.borderColor = [[UIColor redColor] CGColor]; | |
[_firstPageInfoView addSubview:view]; | |
[_firstPageInfoView addSubview:label]; | |
} | |
return _firstPageInfoView; | |
} | |
-(UIImageView *)secondPageBackgroundImageView | |
{ | |
if (!_secondPageBackgroundImageView) { | |
_secondPageBackgroundImageView = [[UIImageView alloc] initWithFrame:self.view.frame]; | |
_secondPageBackgroundImageView.image = [UIImage imageNamed:@"fire"]; | |
_secondPageBackgroundImageView.alpha = 0.0; | |
} | |
return _secondPageBackgroundImageView; | |
} | |
-(UIView *)secondPageInfoView | |
{ | |
if (!_secondPageInfoView) { | |
_secondPageInfoView = [UIView new]; | |
_secondPageInfoView.bounds = CGRectMake(0.0, 0.0, 240., 240.); | |
_secondPageInfoView.center = CGPointMake(self.view.center.x + CGRectGetWidth(self.view.frame), self.view.center.y); | |
UILabel *label = [UILabel new]; | |
label.bounds = CGRectMake(0.0, 0.0, 240., 66.); | |
label.center = CGPointMake(120., 180.); | |
label.numberOfLines = 0; | |
label.text = @"This is the second view of the sequence, pan it and watch it do something cool"; | |
label.textAlignment = NSTextAlignmentCenter; | |
label.textColor = [UIColor blueColor]; | |
label.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody]; | |
UIView *view = [UIView new]; | |
view.bounds = CGRectMake(0.0, 0.0, 120., 10.); | |
view.center = CGPointMake(120., 60.); | |
view.transform = CGAffineTransformMakeRotation(M_PI_4); | |
view.backgroundColor = [UIColor blueColor]; | |
[_secondPageInfoView addSubview:view]; | |
view = [UIView new]; | |
view.bounds = CGRectMake(0.0, 0.0, 120., 10.); | |
view.center = CGPointMake(120., 60.); | |
view.transform = CGAffineTransformMakeRotation(-M_PI_4); | |
view.backgroundColor = [UIColor blueColor]; | |
[_secondPageInfoView addSubview:view]; | |
[_secondPageInfoView addSubview:label]; | |
} | |
return _secondPageInfoView; | |
} | |
#pragma mark - View Creation | |
-(UIScrollView *)newContainerScrollView | |
{ | |
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];; | |
scrollView.contentSize = CGSizeMake(2*CGRectGetWidth(self.view.frame), CGRectGetHeight(self.view.frame)); | |
scrollView.showsHorizontalScrollIndicator = NO; | |
scrollView.bounces = NO; | |
scrollView.pagingEnabled = YES; | |
scrollView.delegate = self; | |
return scrollView; | |
} | |
@end |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment