Keep UIButton Size the same when activated multiple times - ios

I have a UIButton constraints set to width and height 80 by 80. But when I press the UIbutton to activate a UIScrollView menu, the constraints changes and the button looks like this the image below. (The button is the blue oval shape at the bottom of the screen)
Here's the viewwcontroller.m codes for the UIbutton and UIscrollview animations.
#import "ViewController.h"
#interface ViewController ()
#end
#implementation ViewController
#synthesize scrollView;
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
draw1 = 0;
scrollView.frame = CGRectMake(0, 300, 480, 55);
[scrollView setContentSize:CGSizeMake(480, 55)];
openMenu.frame = CGRectMake(220, 270, 60, 30);
}
- (void)viewDidAppear:(BOOL)animated
{
[super viewDidAppear:animated];
draw1 = 1;
}
- (IBAction)OpenMenu:(id)sender {
if (draw1 ==0) {
draw1 = 1;
[UIView animateWithDuration:0.5
delay:0.0
options: UIViewAnimationOptionCurveEaseOut
animations:^{
scrollView.frame = CGRectMake(0, 1000, 568, 200);
openMenu.layer.frame = CGRectMake(self.view.center.x - 30, self.view.frame.size.height - 80, 60, 30);
}
completion:^(BOOL finished){
NSLog(#"Done!");
}];
} else {
draw1 = 0;
[UIView animateWithDuration:0.5
delay:0.0
options: UIViewAnimationOptionCurveEaseOut
animations:^{
scrollView.frame = CGRectMake(0, 300, 568, 200);
openMenu.layer.frame = CGRectMake(self.view.center.x - 30, 270, 60, 30);
}
completion:^(BOOL finished){
NSLog(#"Done!");
}];
}
}
#end
How can you make it so the button constraints says to 80 by 80 and doesn't change when it is activated?

Please check your selected image. I guess its size is over 80-80. Or maybe, its height > width.

Related

Animation is not coming out correctly

I'm creating a menu that slides from the bottom and up via a UIButton that is pressed to activate the animation. But the animation is coming out incorrectly. It is supposed to work like this -https://youtu.be/79ZQDzzOHLk?t=2m52s (but in portrait mode) But here's how it works after I coded it:
And here's the codes for the animation in the viewcontroller.m
#import "ViewController.h"
#interface ViewController ()
#end
#implementation ViewController
#synthesize scrollView;
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
draw1 = 0;
scrollView.frame = CGRectMake(0, 300, 480, 55);
[scrollView setContentSize:CGSizeMake(480, 55)];
openMenu.frame = CGRectMake(220, 270, 60, 30);
}
- (IBAction)OpenMenu:(id)sender {
if (draw1 ==0) {
draw1 = 1;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.5];
[UIView setAnimationDelay:0.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIButton beginAnimations:nil context:nil];
[UIButton setAnimationDuration:0.5];
[UIButton setAnimationDelay:0.0];
[UIButton setAnimationCurve:UIViewAnimationCurveEaseOut];
scrollView.frame = CGRectMake(0, 245, 568, 55);
openMenu.frame = CGRectMake(220, 200, 60, 30);
[self.view bringSubviewToFront:scrollView];
[UIView commitAnimations];
} else {
draw1 = 0;
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.5];
[UIView setAnimationDelay:0.0];
[UIView setAnimationCurve:UIViewAnimationCurveEaseOut];
[UIButton beginAnimations:nil context:nil];
[UIButton setAnimationDuration:0.5];
[UIButton setAnimationDelay:0.0];
[UIButton setAnimationCurve:UIViewAnimationCurveEaseOut];
scrollView.frame = CGRectMake(0, 300, 568, 55);
openMenu.frame = CGRectMake(220, 270, 60, 30);
[self.view bringSubviewToFront:scrollView];
[UIView commitAnimations];
}
}
#end
How do I fix it so the UIButton comes at the bottom of the screen in portrait mode and it goes up and down like in the Youtube tutorial?
Change it to this:
#import "ViewController.h"
#define SCREEN_WIDTH ((([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationPortrait) || ([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationPortraitUpsideDown)) ? [[UIScreen mainScreen] bounds].size.width : [[UIScreen mainScreen] bounds].size.height)
#define SCREEN_HEIGHT ((([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationPortrait) || ([UIApplication sharedApplication].statusBarOrientation == UIInterfaceOrientationPortraitUpsideDown)) ? [[UIScreen mainScreen] bounds].size.height : [[UIScreen mainScreen] bounds].size.width)
#interface ViewController ()
#end
#implementation ViewController
#synthesize scrollView;
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
draw1 = 0;
scrollView.frame = CGRectMake(0, SCREEN_HEIGHT-55, SCREEN_WIDTH, 55);
[scrollView setContentSize:CGSizeMake(SCREEN_WIDTH, 55)];
[scrollView setContentSize:CGSizeMake(480, 55)];
}
- (IBAction)OpenMenu:(id)sender {
if (CGAffineTransformIsIdentity(scrollView.transform)) {
[UIView animateWithDuration:0.5 animations:^{
scrollView.transform = CGAffineTransformMakeTranslation(0, 55);
}];
} else {
[UIView animateWithDuration:0.5 animations:^{
scrollView.transform = CGAffineTransformIdentity;
}];
}
}
#end
or, just change this method from what is above to the following (it's the same thing, just more elegant and simpler):
- (IBAction)OpenMenu:(id)sender
to this:
- (IBAction)OpenMenu:(id)sender {
[UIView animateWithDuration:0.5 animations:^{
scrollView.transform = CGAffineTransformIsIdentity(scrollView.transform) ?
CGAffineTransformMakeTranslation(0, 100):CGAffineTransformIdentity;
}];
}

UIScrollView's "pull up to load more" and “pull down to go back" causes flickering (with sample codes)

I’m working on a UI effect, with “pull up to load more” and “pull down to go back”.
It should works like: When user pull theUIScrollView up by a certain distance, a load-more action is triggered, and lower half of theUIScrollView’s content would be scrolled into visible area. After that, if user pull down thescrollView by a distance, it should roll back to the upper half.
I have implemented it by settingcontentInsets of theUIScrollView when dragging triggered the action.
The problem is that at the time of changing of thescrollView’s contentInsets, it flickers. I printed some logs and found that it is caused by an unusually jump ofcontentOffset.y whencontentInsets changes! But I don’t know why.
The following are simplified but enoughViewController codes for reproducing the issue. With logs you can see clearly what happens.
Could someone helps me to solve it?
#import "IssueShowcaseViewController.h"
#interface IssueShowcaseViewController () <UIScrollViewDelegate>
{
BOOL _isShowingUpperView;
}
#property (nonatomic, strong) UIScrollView* scrollView;
#property (nonatomic, strong) UIView* upperView;
#property (nonatomic, strong) UIView* lowerView;
#end
#implementation IssueShowcaseViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.scrollView = [[UIScrollView alloc] initWithFrame:self.view.bounds];
self.upperView = [[UIView alloc] initWithFrame:self.scrollView.bounds];
self.lowerView = [[UIView alloc] initWithFrame:CGRectOffset(self.scrollView.bounds, 0, self.scrollView.bounds.size.height)];
[self.upperView setBackgroundColor:[UIColor blueColor]];
[self.lowerView setBackgroundColor:[UIColor greenColor]];
//Add upperView to upper half, and lowerView to lower half:
[self.scrollView addSubview:self.upperView];
[self.scrollView addSubview:self.lowerView];
[self.view addSubview:self.scrollView];
_isShowingUpperView = YES;
self.scrollView.delegate = self;
// Observe scrollView.contentOffset for watching unnormal changes:
[self.scrollView addObserver:self forKeyPath:#"contentOffset" options:NSKeyValueObservingOptionNew | NSKeyValueObservingOptionOld context:nil];
// Set contentSize as the sum height of two subviews:
self.scrollView.contentSize = CGSizeMake(self.view.frame.size.width, CGRectGetMaxY(self.lowerView.frame) - CGRectGetMinY(self.upperView.frame));
// But the contentInset is set as to not allow scrolling into lower half:
// 1-pixel more space is necessary, as the scrollView would not be able to scroll downwards without it:
self.scrollView.contentInset = UIEdgeInsetsMake(0, 0, 1-self.lowerView.frame.size.height, 0);
}
- (void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
if (_isShowingUpperView)
{
if (scrollView.contentOffset.y > 60)
{
scrollView.contentInset = UIEdgeInsetsMake(1-self.upperView.frame.size.height, 0, 0, 0);
_isShowingUpperView = NO;
}
}
else
{
if (scrollView.contentOffset.y < self.upperView.frame.size.height - 60)
{
scrollView.contentInset = UIEdgeInsetsMake(0, 0, 1-self.lowerView.frame.size.height, 0);
_isShowingUpperView = YES;
}
}
}
#pragma mark Here we can see what happens:
- (void) scrollViewDidScroll:(UIScrollView *)scrollView {
NSLog(#"contentOffsetY = %f", scrollView.contentOffset.y);
}
- (void) observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary *)change context:(void *)context {
if (object == self.scrollView) {
CGPoint oldOffset = [[change objectForKey:#"old"] CGPointValue];
CGPoint newOffset = [[change objectForKey:#"new"] CGPointValue];
if (fabs(newOffset.y - oldOffset.y) > 300) {
NSLog(#"Weird: %#", change);
}
}
}
#end
After so many tries, I have found a solution: First set a zero contentInsets in an animation block, then in the completion block, set the new contentInsets and correct contentOffset:
- (void) scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
if (_isShowingUpperView)
{
if (scrollView.contentOffset.y > 60)
{
[UIView animateWithDuration:0.0f animations:^{
scrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3f animations:^{
scrollView.contentOffset = CGPointMake(0, self.upperView.frame.size.height);
} completion:^(BOOL finished) {
scrollView.contentInset = UIEdgeInsetsMake(1-self.upperView.frame.size.height, 0, 0, 0);
}];
}];
_isShowingUpperView = NO;
}
}
else
{
if (scrollView.contentOffset.y < self.upperView.frame.size.height - 60)
{
[UIView animateWithDuration:0.0f animations:^{
scrollView.contentInset = UIEdgeInsetsMake(0, 0, 0, 0);
} completion:^(BOOL finished) {
[UIView animateWithDuration:0.3f animations:^{
scrollView.contentOffset = CGPointMake(0, 0);
} completion:^(BOOL finished) {
scrollView.contentInset = UIEdgeInsetsMake(0, 0, 1-self.lowerView.frame.size.height, 0);
}];
}];
_isShowingUpperView = YES;
}
}
}

Animating status bar iOS 7

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) {
;
}];
}

Display animating view within ViewController

EDITED:
I had created a slide in menu for my view and it works as i wanted, this was the original guide that I used.
http://www.youtube.com/watch?v=79ZQDzzOHLk
My goal was to get this programmed once in a class and get it to work on any view controller that i decided to call it in.
Thanks to #harsh.prasad and some additional research I have managed to get this to work to a point where it works as I want apart apart from linking buttons on to it.
So to update this question in the hope it may help someone else.
This is what I did:
I created a UIView class and called it MenuOne.
MenuOne.h
#import <UIKit/UIKit.h>
#interface TFMenuOne : UIView {
// Pop Up Menu
IBOutlet UIScrollView *scrollView;
IBOutlet UIButton *openMenu;
int draw1;
IBOutlet UIButton *backButton;
}
// Pop Up Menu
- (IBAction)openMenu_clicked:(id)sender;
// Reset draw1 to 0
- (void) resetView: (id) sender;
#property (retain, nonatomic) IBOutlet UIScrollView *scrollView;
#end
MenuOne.m
#import "TFMenuOne.h"
#implementation TFMenuOne
#synthesize scrollView;
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
draw1 = 0;
scrollView = [[UIScrollView alloc] init];
[scrollView setBackgroundColor:[UIColor whiteColor]];
[scrollView setFrame:CGRectMake(0, 315, 568, 5)];
[scrollView setContentSize:CGSizeMake(568, 5)];
backButton = [[UIButton alloc] init];
[backButton setBackgroundColor:[UIColor greenColor]];
backButton.frame = CGRectMake(224, 350, 120, 30);
openMenu = [[UIButton alloc] init];
[openMenu setBackgroundImage:[UIImage imageNamed:#"menu-button-#2.png"]
forState:UIControlStateNormal];
openMenu.adjustsImageWhenHighlighted = NO;
[openMenu addTarget:self
action:#selector(openMenu_clicked:)
forControlEvents:UIControlEventTouchUpInside];
openMenu.frame = CGRectMake(256, 269, 64, 46);
[self addSubview:scrollView];
[self addSubview:backButton];
[self addSubview:openMenu];
}
return self;
}
// Allow for touch even through transparent View class
-(BOOL)pointInside:(CGPoint)point withEvent:(UIEvent *)event {
for (UIView *view in self.subviews) {
if (!view.hidden && view.userInteractionEnabled && [view pointInside:[self convertPoint:point toView:view] withEvent:event])
return YES;
}
return NO;
}
- (void) resetView: (id) sender {
draw1 = 1;
[self openMenu_clicked:sender];
}
- (IBAction)openMenu_clicked:(id)sender {
if (draw1 == 0) {
draw1 = 1;
[UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
scrollView.frame = CGRectMake(0, 260, 568, 60);
} completion:^(BOOL finished) {
}];
[UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
openMenu.frame = CGRectMake(256, 214, 64, 46);
} completion:^(BOOL finished) {
}];
[UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
backButton.frame = CGRectMake(224, 275, 120, 30);
} completion:^(BOOL finished) {
}];
} else {
draw1 = 0;
[UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
scrollView.frame = CGRectMake(0, 315, 568, 5);
} completion:^(BOOL finished) {
}];
[UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
openMenu.frame = CGRectMake(256, 269, 64, 46);
} completion:^(BOOL finished) {
}];
[UIView animateWithDuration:0.2 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
backButton.frame = CGRectMake(224, 350, 120, 30);
} completion:^(BOOL finished) {
}];
}
}
/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
// Drawing code
}
*/
#end
After a lot of trial and error, in order to get this UIView class to appear on multiple ViewControllers I call the view like this in the m file of the view controller. The obstacles I ran in to was that the menu would open but when I left the view controller to go to another view controller the menu would be in the state it was in when i left, it wouldn't reset back to closed. The code below covered that thanks again to #harsh.prasad. I also managed to get the menu to animate in.
#interface TFMapViewController ()
{
TFMenuOne *menuView;
}
#end
#implementation TFMapViewController
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
if (self) {
// Custom initialization
[menuView resetView:nil];
}
return self;
}
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
menuView = [[TFMenuOne alloc] initWithFrame:CGRectMake(0, 51, 568, 320)];
[self.view addSubview:menuView];
}
- (void) viewDidAppear:(BOOL)animated
{
[UIView animateWithDuration:0.5 delay:0.5 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
menuView.frame = CGRectMake(0, 0, 568, 320);
} completion:^(BOOL finished) {
}];
}
- (void) viewDidDisappear:(BOOL)animated
{
[menuView resetView:nil];
[UIView animateWithDuration:0.0 delay:0.0 options:UIViewAnimationOptionBeginFromCurrentState animations:^{
menuView.frame = CGRectMake(0, 51, 568, 320);
} completion:^(BOOL finished) {
}];
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
// Allows for Exit button to work
- (IBAction)returned:(UIStoryboardSegue *)segue {
}
#end
I you want you can use tabsController if that kind of feature you want, otherwise create a class of your slide in menu view and then you can use it in all of your views as you like. No same piece of code is to be rewritten.
EDIT:
Suppose you have created a class CustomMenuView which basically creates your menu view. So now you can use this in every view controller you want to use it in in the following way:
CustomMenuView *menuView = [CustomMenuView alloc] initWithFrame:CGRectMake(0, 200, 320, 100);
menuView.<properties you want to pass> = <set properties here>;
[self.view addSubView:menuView];
This will set the view with the custom menu and then you can handle the actions in this menu.
1)Here is an old tutorial for creating menu - http://www.raywenderlich.com/32054/how-to-create-a-slide-out-navigation-like-facebook-and-path/projectlayout
2)A better way is to create Drawer menu With container views. You can read more about container views from WWDC videos.
3)Or if you are lazy to d it yourself, try this library http://cocoacontrols.com/platforms/ios/controls/jtrevealsidebar
P.S. No , you do not havev to repeat the code.
You can try this,
First make a view on the origin point x = 0 y = 480 (for iphone4) and then run this code.
CGRect theFrame = self.viewMenuShare.frame;
theFrame.origin = CGPointMake(0, 480);
self.viewMenuShare.frame = theFrame;
theFrame.origin = CGPointMake(0,480 - 187);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:0.3f];
self.viewMenuShare.frame = theFrame;
[UIView commitAnimations];

Subclassed UIView not displaying proper after animating frame

I have subclassed UIView to contain basically a UIPickerView and a UIToolbar.
When the user selects a particular row in the picker I will then add a UIImageView over the picker. However this image is not visible when I have animated my UIView to slide up the screen. If I don't animate the UIView then it will display properly.
I'm displaying the UIImageView like this (in the UIView):
- (void)showMailSetupPopover {
if (self.popoverMailSetupImageView == nil) {
UIImageView *popoverMailSetupImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"popover-mail-setup-addreminder"]];
popoverMailSetupImageView.alpha = 0.0;
popoverMailSetupImageView.frame = CGRectMake(8, self.frame.origin.y + 65, popoverMailSetupImageView.bounds.size.width, popoverMailSetupImageView.bounds.size.height);
self.popoverMailSetupImageView = popoverMailSetupImageView;
}
[self addSubview:self.popoverMailSetupImageView];
[UIView animateWithDuration:0.5 animations:^{
self.popoverMailSetupImageView.alpha = 1.0;
} completion:^(BOOL finished) {}];
}
This is how I add theUIView to self.view:
RMMessageTypePickerView *messageTypePickerView = [[RMMessageTypePickerView alloc] initWithFrame:CGRectMake(0, self.view.bounds.size.height, 320, 260) reminderMessageType:RMReminderMessageTypeText delegate:self];
self.messageTypePickerView = messageTypePickerView;
[self.view addSubview:self.messageTypePickerView];
[UIView animateWithDuration:0.2 animations:^{
self.messageTypePickerView.frame = messageTypePickerViewTargetFrame;
self.addReminderTableView.frame = addReminderTableViewTargetFrame;
} completion:^(BOOL finished) {
if (firstShow) {
[self processSelectedMessageTypeRow:RMReminderMessageTypeText];
}
}];
Found out the issue,
Replaced
popoverMailSetupImageView.frame = CGRectMake(8, self.frame.origin.y + 65, popoverMailSetupImageView.bounds.size.width, popoverMailSetupImageView.bounds.size.height);
with
popoverMailSetupImageView.frame = CGRectMake(8, 65, popoverMailSetupImageView.bounds.size.width, popoverMailSetupImageView.bounds.size.height);
self.frame.origin.y is not needed.

Resources