I want to add bar like Play Music app of google shows in the their application. I want to use that same animation effect as they are doing. So Can any one guide me that is there any open source code to add this functionality in the app or i need to code it all manually, any guide will be helpful, I search net but i did not found any.
#interface ViewController ()
#property (nonatomic, weak) UILabel *popupLabel;
#end
#implementation ViewController
- (UILabel *)popupLabel
{
if( !_popupLabel ) {
CGFloat height = 44.0;
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0,
self.view.bounds.size.height - height,
self.view.bounds.size.width,
height)];
label.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.5];
label.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;
label.textAlignment = NSTextAlignmentCenter;
label.textColor = [UIColor whiteColor];
label.alpha = 0.0;
[self.view addSubview:label];
_popupLabel = label;
}
[self.view bringSubviewToFront:_popupLabel];
return _popupLabel;
}
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
[self performSelector:#selector(showWithMessage:) withObject:#"1 song added to playlist" afterDelay:2.0];
}
- (void)showWithMessage:(NSString *)message
{
self.popupLabel.text = message;
[UIView animateWithDuration:1.0 animations:^{
self.popupLabel.alpha = 1.0;
}];
}
- (void)hide
{
[UIView animateWithDuration:1.0 animations:^{
self.popupLabel.alpha = 0.0;
}];
}
Related
Alright, I'm almost positive I'm just doing something stupid, but I'm new to this, so please excuse my incompetence. I have a nested animation block, and it changes the view controller once it's finished - one problem. It fires prematurely. I don't know if it's me incorrectly changing the view controller, or the block is incorrect. Any help would be great. Thanks in advance.
SplashViewController.m
#import "SplashViewController.h"
#import "MenuViewController.h"
#interface SplashViewController ()
#end
#implementation SplashViewController
-(void) drawColoredBars
{
UIView *greenBar = [[UIView alloc] initWithFrame:CGRectMake(75.0, -self.view.bounds.size.height, 3.0, self.view.bounds.size.height)];
UIView *orangeBar = [[UIView alloc] initWithFrame:CGRectMake(87.5, -self.view.bounds.size.height - 25, 3.0, self.view.bounds.size.height)];
UIView *yellowBar = [[UIView alloc] initWithFrame:CGRectMake(100.0, -self.view.bounds.size.height - 50, 3.0, self.view.bounds.size.height)];
UIColor *green = [UIColor colorWithRed:142.0/255.0f green:149.0/255.0f blue:31.0/255.0f alpha:0.6f];
UIColor *orange = [UIColor colorWithRed:204.0/255.0f green:82.0/255.0f blue:29.0/255.0f alpha:0.6f];
UIColor *yellow = [UIColor colorWithRed:254.0/255.0f green:190.0/255.0f blue:16.0/255.0f alpha:0.6f];
greenBar.backgroundColor = green;
orangeBar.backgroundColor = orange;
yellowBar.backgroundColor = yellow;
greenBar.tag = 1;
orangeBar.tag = 2;
yellowBar.tag = 3;
[self.view addSubview:greenBar];
[self.view addSubview:orangeBar];
[self.view addSubview:yellowBar];
}
-(void) animate
{
MenuViewController *menu = [[MenuViewController alloc] init];
double delay = 0.0;
double x = 75.0;
for (int i = 1; i < 4; i++) {
CGRect frame = CGRectMake(x, 0.0, 3.0, self.view.bounds.size.height);
[UIView animateWithDuration: 2.5
delay: delay
options: UIViewAnimationOptionCurveEaseIn
animations:^{
[self.view viewWithTag:i].frame = frame;
}
completion:^(BOOL finished){
[UIView animateWithDuration: 2.5
delay: 2.5
options: UIViewAnimationOptionCurveEaseIn
animations:^{
self.view.alpha = 0.0;
}
completion:^(BOOL finished){
[self presentViewController:menu animated:NO completion:nil];
}];
}];
delay = delay + 0.5;
x = x + 12.5;
}
}
- (void)viewDidLoad
{
[super viewDidLoad];
CAGradientLayer *layer = [GradientBackground drawGradient];
layer.frame = self.view.bounds;
[self.view.layer insertSublayer:layer atIndex:0];
[self drawColoredBars];
[self animate];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
}
#end
Once again, thanks!
The viewDidLoad method is too early to set up animations. Try putting [self animate] in viewDidAppear: instead.
Also, make sure [self.view viewWithTag:i] doesn't return nil. If it returns nil, the outer animation block doesn't have anything to animate and will fire its completion block immediately.
I'm trying to figure out an approach to build something like the image below, which is a list of items that when a section is clicked slides out content. It's a really common UX on most websites and what not. My idea is to have each gray box (button) slide out a UIView containing some other items. I'm still new to iOS development but I'm struggling to find how you can animate a UIView to slide down and push the content below it down as well. Hoping some one can give me a good starting point or point to some info outside the realm of the apple docs.
Thanks!
So if you just have a few views, I would not recommend the UITableView approach, since it is not so easy to customize with animations and table views usually want to fill the whole screen with cells. Instead write a expandable UIView subclass that has the desired two states. Add a method to switch between extended and collapsed state. On expanding/collapsing adjust their positions so that they always have enough space.
I provide you an example of views adjusting their frames. I guess it should be easy to do the same with auto layout constraints: give the views a fixed height constraint and change this on collapsing/expanding. The same way set the constraints between the views to be 0 so that they are stacked on top of each other.
Expandable View:
#interface ExpandingView(){
UIView *_expandedView;
UIView *_seperatorView;
BOOL _expanded;
}
#end
#implementation ExpandingView
- (id)init
{
self = [super initWithFrame:CGRectMake(15, 0, 290, 50)];
if (self) {
_expanded = NO;
self.clipsToBounds = YES;
_headerView = [[UIView alloc] initWithFrame:self.bounds];
_headerView.backgroundColor = [UIColor colorWithWhite:0.8 alpha:1];
[self addSubview:_headerView];
_seperatorView = [[UIView alloc] initWithFrame:CGRectMake(0, self.bounds.size.height-1, self.bounds.size.width, 1)];
_seperatorView.backgroundColor = [UIColor lightGrayColor];
[self addSubview:_seperatorView];
_expandedView = [[UIView alloc] initWithFrame:CGRectOffset(self.bounds, 0, self.bounds.size.height)];
_expandedView.backgroundColor = [UIColor blueColor];
[self addSubview:_expandedView];
}
return self;
}
- (void)layoutSubviews{
[self adjustLayout];
}
- (void)adjustLayout{
_headerView.frame = CGRectMake(0, 0, self.bounds.size.width, 50);
_seperatorView.frame = CGRectMake(0, 49, self.bounds.size.width, 1);
_expandedView.frame = CGRectMake(0, 50, self.bounds.size.width, self.bounds.size.height-50);
}
- (void)toggleExpandedState{
_expanded = !_expanded;
self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, _expanded?200:50);
[self adjustLayout];
}
#end
ViewController:
#interface ExpandingViewController (){
NSArray *_expandingViews;
}
#end
#implementation ExpandingViewController
- (void)viewDidLoad
{
[super viewDidLoad];
_expandingViews = #[
[[ExpandingView alloc] init],
[[ExpandingView alloc] init],
[[ExpandingView alloc] init],
];
for(ExpandingView *view in _expandingViews){
[view.headerView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(expandingViewTapped:)]];
[self.view addSubview:view];
}
}
- (void)viewWillLayoutSubviews{
int y = 100;
for(ExpandingView *view in _expandingViews){
view.frame = CGRectOffset(view.bounds, (CGRectGetWidth(self.view.bounds)-CGRectGetWidth(view.bounds))/2, y);
y+=view.frame.size.height;
}
}
- (void)expandingViewTapped:(UITapGestureRecognizer*)tapper{
ExpandingView *view = (ExpandingView*)tapper.view.superview;
[UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:0 options:0 animations:^{
[view toggleExpandedState];
[self.view layoutIfNeeded];
} completion:nil];
}
I've read multiple solutions here on SO, but they all don;t seem to work in my case.
I've got a class NotificationBar:
.h file:
#interface NotificationBar : UIView <UIGestureRecognizerDelegate>
#property (strong, nonatomic) UILabel *messageLabel;
- (id)initWithFrame:(CGRect)frame message:(NSString *)message;
- (void) show:(int)duration;
#end
.m file:
#import "NotificationBar.h"
#implementation NotificationBar
#synthesize messageLabel;
- (id)initWithFrame:(CGRect)frame message:(NSString *)message
{
self = [super initWithFrame:frame];
if (self)
{
self.alpha = 0;
self.backgroundColor = [UIColor cabmanBlue];
self.userInteractionEnabled = YES;
self.messageLabel = [[UILabel alloc] initWithFrame:CGRectMake(self.bounds.origin.x + 5, 0 , self.bounds.size.width - 10, self.bounds.size.height)];
[self.messageLabel setBackgroundColor:[UIColor clearColor]];
[self.messageLabel setTextColor:[UIColor whiteColor]];
[self.messageLabel setFont:[UIFont boldSystemFontOfSize:14]];
[self.messageLabel setNumberOfLines:2];
self.messageLabel.text = message;
[self addSubview:messageLabel];
UITapGestureRecognizer *tapRec = [[UITapGestureRecognizer alloc] initWithTarget:self action:#selector(dismiss:)];
tapRec.delegate = self;
tapRec.cancelsTouchesInView = NO;
[self addGestureRecognizer:tapRec];
}
return self;
}
- (void) show:(int)duration
{
[[[[[UIApplication sharedApplication] keyWindow] subviews] lastObject] addSubview:self];
[UIView animateWithDuration:0.5 animations:^{ self.alpha = 1; } completion:^(BOOL finished) {
[UIView animateWithDuration:0.5 delay:duration options:UIViewAnimationOptionCurveLinear animations:^{ self.alpha = 0;} completion:^(BOOL finished)
{
if(finished) [self removeFromSuperview];
}];
}];
}
- (void) dismiss:(UITapGestureRecognizer *)gesture
{
[self.layer removeAllAnimations];
[UIView animateWithDuration:0.5 animations:^{ self.alpha = 0; } completion:^(BOOL finished) {
if(finished)
{
[self removeFromSuperview];
}
}];
}
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
return YES;
}
#end
And I use the class in the following way:
- (void) displayNotificationMessage:(NSString *)message withSound:(BOOL) withSound
{
UIView *topView = [self.window.subviews lastObject];
[[[NotificationBar alloc] initWithFrame:CGRectMake(topView.bounds.origin.x,
64,
topView.bounds.size.width,
40)
message:message] show:10];
if(withSound) AudioServicesPlaySystemSound(1007);
}
The view is always presented and shown. The dismiss function isn't triggered and it seems it doesn't respond to anything. displayNotificationMessage is placed in AppDelegate. displayNotificationMessage is some times used when a viewcontroller with a mapview is displayed or in a UITableViewController. You could say it has to work the same way as UIAlertView: always presented no matter in which screen the user is.
Does anyone see an error or something?
Thank in advance!
Your UILabel takes over almost your entire view bounds:
self.messageLabel = [[UILabel alloc] initWithFrame:CGRectMake(self.bounds.origin.x + 5, 0 , self.bounds.size.width - 10, self.bounds.size.height)];
You may try reducing it's size and then see if the gesture works in the other locations or you can try adding the gesture to the label
[self.messageLabel addGestureRecognizer:singleTap];
I just tried your code on a custom UIView and it works just fine. Having the UILabel as a subview has no effect, it responds well. To me it looks like you probably have either another UIView put over this one (which makes this one buried and therefore unresponsive) or you have another Tap Gesture registered in your superview.
Im trying (struggling) to implement a snapchat like error message display for my app (snapchat error messages slide down over the status bar somehow) in iOS7. I cannot for the life of me get my animation to work right. Here is my method that does the animation
- (void)animateHeaderViewWithText:(NSString *)text {
//add header views
[self.headerView addSubview:self.headerLabel];
[self.navigationController.view addSubview:self.headerView];
//Hide the Status Bar
statusBarHidden = TRUE;
[self setNeedsStatusBarAppearanceUpdate];
self.headerLabel.text = text;
[UIView animateWithDuration:.5 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{
self.headerLabel.frame = CGRectMake(0, 0, 320, 20);
self.headerView.frame = CGRectMake(0, 0, 320, 20);
} completion:^(BOOL finished) {
[UIView animateWithDuration:.5 delay:5.0 options:UIViewAnimationOptionCurveEaseIn animations:^{
//UnHide the Status Bar
statusBarHidden = FALSE;
[self setNeedsStatusBarAppearanceUpdate];
self.headerLabel.frame = CGRectMake(0, -20, 320, 20);
self.headerView.frame = CGRectMake(0, -20, 320, 20);
} completion:^(BOOL finished) {
[self.headerView removeFromSuperview];
[self.headerLabel removeFromSuperview];
}];
}];
}
Only the second half of the animation really works right, the message slides back up fine and the status bar appears underneath it. However, the first half of the animation, when the view slides down, the status bar disappears causing my navigation bar to move up, screwing up my animation. How can I get my navigation bar to stay where it is initially placed, even when the status bar is gone
This code worked in portrait, but would need to be modified to work properly in both orientations. It uses a separate UIWindow as the overlay, so there's no need to hide or unhide the status bar.
#interface ViewController ()
#property (strong,nonatomic) UIWindow *dropdown;
#property (strong,nonatomic) UILabel *label;
#property (strong,nonatomic) UIWindow *win;
#end
#implementation ViewController
- (void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
self.dropdown = [[UIWindow alloc] initWithFrame:CGRectMake(0, -20, 320, 20)];
self.dropdown.backgroundColor = [UIColor redColor];
self.label = [[UILabel alloc] initWithFrame:self.dropdown.bounds];
self.label.textAlignment = NSTextAlignmentCenter;
self.label.font = [UIFont systemFontOfSize:12];
self.label.backgroundColor = [UIColor clearColor];
[self.dropdown addSubview:self.label];
self.dropdown.windowLevel = UIWindowLevelStatusBar;
[self.dropdown makeKeyAndVisible];
[self.dropdown resignKeyWindow];
}
- (IBAction)dropDown:(UIButton *)sender {
[self animateHeaderViewWithText:#"This is my test string"];
}
-(void)animateHeaderViewWithText:(NSString *) text {
self.label.text = text;
CGRect frame = self.dropdown.frame;
frame.origin.y = 0;
[UIView animateWithDuration:.6 delay:0 options:0 animations:^{
self.dropdown.frame = frame;
}completion:^(BOOL finished) {
;
}];
}
I created this dialog in IB:
I set a segue the following way:
This is how I configured the ViewController:
And this is how I configured the view metrics:
Here's what I get in the iOS Simulator:
So: could somebody tell me why, how could I get this they way I visually intend to and where I could find a very good Interface builder tutorial?
Thanks in advance.
The "Form Sheet" modal presentation style always uses the same size container, and you can't override it. With iOS 7 or later, you can define a custom modal presentation style to accomplish what you want, or search GitHub.
Here's an iOS 6-compatible implementation with a custom size.
/** Created in answer to mirx's question at http://stackoverflow.com/questions/18803961/why-are-the-dimensions-of-my-modal-view-different-from-what-i-expect/18805374?noredirect=1#comment27741546_18805374 */
#interface AHPresentingViewController : UIViewController
#property (nonatomic, weak) UIView *presentedBackgroundView;
#property (nonatomic, weak) UIViewController *formController;
#end
#implementation AHPresentingViewController
-(void)viewDidAppear:(BOOL)animated {
[super viewDidAppear:animated];
UITableViewController *table = [UITableViewController new];
table.title = #"Form";
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:table];
table.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:#selector(dismissPresentedForm:)];
[self presentForm:nav size:CGSizeMake(320, 240)];
}
-(void)presentForm:(UIViewController *)formVC size:(CGSize)size {
if(self.formController) return;
NSLog(#"Form view: %#",formVC.view);
UIView *background;
self.presentedBackgroundView = background = [[UIView alloc] initWithFrame:self.view.bounds];
background.opaque = NO;
background.backgroundColor = [UIColor blackColor];
background.alpha = 0;
[self.view addSubview:background];
formVC.view.frame = (CGRect){CGPointZero, size};
formVC.view.center = CGPointMake(CGRectGetWidth(self.view.bounds) / 2., CGRectGetHeight(self.view.bounds) + CGRectGetHeight(formVC.view.bounds));
[self addChildViewController:formVC];
self.formController = formVC;
[self.view addSubview:formVC.view];
[UIView animateWithDuration:0.5 animations:^{
background.alpha = 0.4;
formVC.view.center = CGPointMake(self.view.bounds.size.width / 2., self.view.bounds.size.height / 2.);
}];
}
-(void)dismissPresentedForm:(id)sender {
if(!self.formController) return;
[UIView animateWithDuration:0.5 animations:^{
self.presentedBackgroundView.alpha = 0;
self.formController.view.center = CGPointMake(CGRectGetWidth(self.view.bounds) / 2., CGRectGetHeight(self.view.bounds) + CGRectGetHeight(self.formController.view.bounds));
} completion:^(BOOL finished) {
[self.presentedBackgroundView removeFromSuperview];
[self.formController.view removeFromSuperview];
[self.formController removeFromParentViewController];
}];
}
#end