What i want to do is, when the user clicks the button then the button should fill with color with animation from bottom to top.
I tried this which added the color but the animation effect was not added.
float originalY = btn.frame.origin.y;
float originalH = btn.bounds.size.height;
[UIView animateWithDuration:3.0f
delay:1.0f
options:UIViewAnimationOptionTransitionFlipFromBottom
animations:^{
btn.frame = CGRectMake(btn.frame.origin.x, (originalY + originalH), btn.bounds.size.width, 0);
[btn setBackgroundImage:[UIImage imageNamed:#"Screen Shot 2012-11-07 at 4.22.30 PM.png"] forState:UIControlStateNormal];
[btn setTitleColor:[[UIColor alloc]initWithRed:38.0/255.0 green:38.0/255.0 blue:38.0/255.0 alpha:1.0] forState:UIControlStateNormal];
} completion:^(BOOL finished) {
}];
The best solution would be to subclass UIButton and add a method that changes the background image's alpha value from 0 to 1.
Or you could just override the drawRect method and fill up the background with a color there.
i think you probably do something like this, i used UIlabel it may also work for UIButton to .
#import <QuartzCore/QuartzCore.h>
....
'theLabel.layer.backgroundColor = [UIColor whiteColor].CGColor;
[UIView animateWithDuration:2.0 animations:^{
theLabel.layer.backgroundColor = [UIColor greenColor].CGColor;
} completion:NULL];'`
Related
I'm having a problem here with designing my UI in Xcode.
I've programmatically created(when a button is pressed) a UIImageView(black, transparent overlay), UITextView(editable), and a UIButton to clear these former two UISubviews.
This problem is all appearing both on the Simulator, and my iPhone.
This is my code
- (IBAction)openCommentTextView:(id)sender {
doneButton = [[UIButton alloc] initWithFrame:CGRectMake(20, 40, 60, 35)];
doneButton.alpha = 0.0;
doneButton.layer.cornerRadius = 7;
doneButton.layer.borderColor = [[UIColor colorWithWhite:1.0 alpha:1.0] CGColor];
doneButton.layer.borderWidth = 3;
[doneButton setTitle:#"Done" forState:UIControlStateNormal];
[doneButton setTitleColor:[UIColor colorWithWhite:1.0 alpha:1.0] forState:UIControlStateNormal];
doneButton.titleLabel.font = [UIFont fontWithName:#"AvenirNext-Regular" size:15];
[doneButton addTarget:self action:#selector(finishEditing:) forControlEvents:UIControlEventTouchUpInside];
commentTextView = [[UITextView alloc] initWithFrame:CGRectMake(20, 90, 280, 230)];
[commentTextView becomeFirstResponder];
commentTextView.alpha = 0.0;
if ([commentsTextViewViewer.text isEqual: #"Comment..."]) {
commentsTextViewViewer.text = #"";
} else {
commentTextView.text = commentsTextViewViewer.text;
}
commentTextView.keyboardAppearance = UIKeyboardAppearanceDark;
commentTextView.layer.cornerRadius = 7;
commentTextView.font = [UIFont fontWithName:#"GillSans" size:20];
commentTextView.backgroundColor = [UIColor colorWithWhite:1.0 alpha:0.4];
backgroundOverlay = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 330, 568)];
backgroundOverlay.backgroundColor = [UIColor colorWithWhite:0.0 alpha:1.0];
backgroundOverlay.alpha = 0.0;
[self.view insertSubview:doneButton atIndex:11];
[self.view insertSubview:commentTextView atIndex:10];
[self.view insertSubview:backgroundOverlay atIndex:9];
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0];
commentTextView.alpha = 1.0;
doneButton.alpha = 1.0;
[UIView commitAnimations];
[UIView setAnimationDuration:0.3];
backgroundOverlay.alpha = 1.0;
[UIView commitAnimations];
}
However, somehow the UIButton(doneButton) and the UITextView(commentTextView) is under the UIImageView(black overlay). Both the UIButton and the UITextView responds. (I set the UIImageView(black overlay) alpha to 1.0, and the UIButton and UITextView didn't appear, although both responded)
It turned out like this (sorry I couldn't include the image directly into here... I didn't have enough reputation)
But when I copied this code and pasted into a new single-view application, it worked perfectly as I wished it to. (like this)
I really have no idea why this is happening... I've searched all over the web but with no success.
Is this something to do with XCode, or my iPhone itself?
I'd be very happy if someone can help me work this out.
Thank you.
A couple of things that might help. I've never had much luck in terms of the atIndex: method of view insertion except index 0. Try using relative position, since you know the button and textview NEED to be above the background overlay.
[self.view addSubview:backgroundOverlay];
[self.view insertSubview:doneButton aboveSubview:backgroundOverlay];
[self.view insertSubview:commentTextView aboveSubview:backgroundOverlay];
Also, you'll need a second call to [UIView beginAnimations:nil context:nil]; before animating the second bit of code. Or, alternatively, use the UIView animation blocks which is recommended if you're targeting iOS 4 or higher.
I'm trying to give my UIButton a new background image when the user pressed the button and then animate the width. Problem is that the button doesn't scale the image (I'm only using retina images).
Before click:
After click:
And the code that makes things happen:
UIImage *buttonProfileDefault = [[UIImage imageNamed:#"Profile_Button_Default"] resizableImageWithCapInsets:UIEdgeInsetsMake(3, 3, 3, 3)];
[self.profileButton setBackgroundImage:buttonProfileDefault forState:UIControlStateNormal];
[self.profileButton removeConstraint:self.profileButtonConstraint];
// Animate
CGRect originalFrame = self.profileButton.frame;
originalFrame.size.width = 40;
[UIView animateWithDuration:0.2f
animations:^{
self.profileButton.frame = originalFrame;
}
completion:^(BOOL finished) {
}];
try this code...
[UIView beginAnimations:nil context:NULL];
[UIView setAnimationDuration:1.0];
[self.profileButton setBackgroundImage:[UIImage imageNamed:#"Profile_Button_Default"] forState:UIControlStateNormal];
[self.profileButton setBackgroundImage:[UIImage imageNamed:#"Profile_Button_Default"] forState:UIControlStateSelected];
[self.profileButton setFrame:CGRectMake(self.profileButton.frame.origin.x, self.profileButton.frame.origin.y, self.profileButton.frame.size.width + 40, self.profileButton.frame.size.height)];
[UIView commitAnimations];
i hope this help you...
The way you are creating the Edge Insets, would keep the leftmost 3 and the rightmost 3 poins (or pixels) constant, and it would stretch the head on the button. If you want the head's size to be constant, you have to include it in the left side, leave 1 pixel stretchable and then comes the right side. Assuming your picture's width is 50, you would write:
UIImage * buttonProfileDefault = [[UIImage imageNamed:#"Profile_Button_Default"] resizableImageWithCapInsets:UIEdgeInsetsMake(3, 46, 3, 3)];
However, this would make your picture positioned in the left side of the button. The solution I recommend would be to use 2 images:
a resizable image containing only the border of the button, set as the button's background image
an image containing only the head, set as the buttons image with constant size
The code would look something like:
UIImage *backgroundImage = [[UIImage imageNamed:#"border.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(3, 3, 3, 3)]; // in this case you can use 3, 3, 3, 3
[self.profileButton setBackgroundImage:backgroundImage forState:UIControlStateNormal];
UIImage *titleImage = [UIImage imageNamed:#"head.png"];
[self.profileButton setImage:titleImage forState:UIControlStateNormal];
Hope this helps!
I have modified your code on following points:
provided complete name of image Profile_Button_Default.png (or .jpg etc),
added states for image as in case of normal it these effects will not be appeared in starting of button touched
Now Check:
UIImage *buttonProfileDefault = [[UIImage imageNamed:#"Profile_Button_Default.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(3, 3, 3, 3)];
[self.profileButton setBackgroundImage:buttonProfileDefault forState:UIControlStateNormal];
[self.profileButton setBackgroundImage:buttonProfileDefault
forState:UIControlStateSelected];
[self.profileButton setBackgroundImage:buttonProfileDefault forState:UIControlStateHighlighted];
[self.profileButton removeConstraint:self.profileButtonConstraint];
// Animate
CGRect originalFrame = self.profileButton.frame;
originalFrame.size.width = 40;
[UIView animateWithDuration:0.2f
animations:^{
self.profileButton.frame = originalFrame;
}
completion:^(BOOL finished) {
}];
I think the problem is that your changing the background and then resizing.
The key to getting it working with auto layout is to animate the widthConstraint constant value and also set the background image in an animation.
For example, I have a button on my view name button, I have an IBOutlet to my width constraint named buttonWidth - Below is the code for my buttonPress
:
UIImage *imageButton = [[UIImage imageNamed:#"button"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)];
[UIView animateWithDuration:0.01f
animations:^{
[self.button setBackgroundImage:imageButton forState:UIControlStateNormal];
}
completion:^(BOOL finished) {
[UIView animateWithDuration:1.0f
animations:^{
self.buttonWidth.constant = 300;
[self.view layoutIfNeeded];
}
completion:^(BOOL finished) {
}];
}];
As you can see with my code above, the key to making it work for me was setting the button background inside an animation also, for some reason if i changed the background image outside the animation it would not set it correctly until the animation completed.
Also setting the frame when using autoLayout didn't work for me, so I animated the constraint constant
Try this, instead of assigning the image as
UIImage *buttonProfileDefault = [[UIImage imageNamed:#"Profile_Button_Default"] resizableImageWithCapInsets:UIEdgeInsetsMake(3, 3, 3, 3)];
do this
UIImage *buttonProfileDefault = [UIImage imageNamed:#"Profile_Button_Default"];
no need for setting constraint of resizableImageWithCapInsets.
Could you not make a copy of the image and resize it to the correct button size?
Check out IWasRobbed "s answer in this post.
He has a nice function there for you and claims to use this method for his buttons.
I had this same problem, but it happened when my app loaded up, I messed around with the button's attributes in the inspector and if you scroll down and Un-check autoresize subviews it might work, it did for me!
I've had a similar situation resizing subviews when using a nib. Not sure if you are or not, but what fixed my problems was unchecking 'Use Autolayout' on my various views.
So I've searched a lot but I didn't find an answer for my problem.
I want to make a button that would have two images, first image that is when button is in normal state, the other one when it is in highlighting state. The problem is that i want these images to change in animated manner, for example the first image fades out, when the second fades in. And they change in such a way that the animation time remains constant.
The only way I thought is, to make a custom button, add couple of ImageViews and on button touch down event, one ImageView fades in, other fades out, on button touch up event, I could do the opposite. But this method doesn't seem the most suitable. Is there a better option that I am not seeing?
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
myButton.frame = CGRectMake(80, 50, 150, 40);
[myButton setTitle:#"Say, Hi!" forState:UIControlStateNormal];
[myButton setBackgroundImage:[UIImage imageNamed:#"xyz.png"] forState:UIControlStateNormal];
[myButton addTarget:self action:#selector(buttonClicked:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:myButton];
-(IBAction)buttonClicked:(UIButton *)sender
{
[UIView animateWithDuration:0.7f
animations:^
{
[sender setAlpha:0.5f];
}
completion:^(BOOL finished)
{
[sender setAlpha:1.0f];
[sender setBackgroundImage:[UIImage imageNamed:#"abc.png"] forState:UIControlStateNormal]; }
];
}
you can set the animation duration and also alpha accordingly.
I've done it the following way, similarly as Ilker Baltaci has described it:
I subclassed UIButton (although it's not advised because it's a class cluster) and added a function to it:
- (void) blinkAndFlipButtonAnimationWithText: (NSString*) buttonText {
[UIView animateWithDuration: 0.2 delay: 0 options: UIViewAnimationOptionCurveLinear
animations: ^{
self.alpha = 0.1;
}
completion: ^(BOOL finished) {
[UIView animateWithDuration: 0.2 delay: 0 options: UIViewAnimationOptionCurveLinear
animations: ^{
self.alpha = 1;
}
completion: ^(BOOL finished) {
[UIView transitionWithView: self duration: 0.25 options: (UIViewAnimationOptionTransitionFlipFromBottom | UIViewAnimationOptionCurveEaseInOut)
animations: ^{
[self setTitle: buttonText forState: UIControlStateNormal];
}
completion: ^(BOOL finished) {
if ([self.delegate respondsToSelector: #selector(primaCustomButtonDidFinishFlipAnimation:)]) {
[self.delegate primaCustomButtonDidFinishFlipAnimation: self];
}
}
];
}
];
}
];
}
a lot of block-animation cascades, ugly i know!
But anyway, you can adapt the animation block to your needs and exclude the delegate callback.
then in your IBAction/target-action method for the button press just call the method, like:
- (IBAction) facebookButtonPresse: (id) sender {
[self.facebookButton blinkAndFlipButtonAnimationWithText: #"+3"];
}
if you want fade out/fade in animation for the button i can replace you custom button with an UIImageview which has the same background image as you initial uibutton.This will be the first thing to to in the action of teh button.When the button is replaced with the uiview cou can apply fade out animation to UIImageview from initial backgorund image to new (selected version). When the animation ends, in the completion block begin another animation which fades out the selected iamge to normal background iamge.Then the second animation ends remove your uiimageview and add your button back.
//Declare your uiimageviews as ivars
UIImageView *imageViewnormal = [[UIimageView alloc] initWithImage:normalIamge];
UIImageView *imageViewhighlighted = [[UIimageView alloc] initWithImage:highlightImage];
In the action for UIControlEventTouchDown of your button
// make your button invisible
yourbutton.alpha = 0;
//add to same rect 2 imageviews with initial and selected backgrounds of uibutton
imageViewnormal.alpha = 1;
imageViewhighlighted.alpha = 0;
[self.view addSubview:imageViewhighlighted];
[self.view addSubview:imageViewnormal];
// newImageViewWithInitialBackground needs to be inserted secondly and alpha value 1
// newImageViewWithSelectedBackground has alpha 0 and is behind newImageViewWithInitialBackground
[UIView animateWithDuration:0.3
animations:^
{
imageViewnormalalpha = 0;
imageViewhighlighted.alpha = 1;
}
completion:^(BOOL finished)
{
}];
In the action for UIControlEventTouchUpInside of your button
[UIView animateWithDuration:0.3
animations:^
{
imageViewnormal.alpha = 1;
imageViewhighlighted.alpha = 0;
}
completion:^(BOOL finished)
{
//Remove both of the uiimageviews aand make your button visible
[imageViewnormal removeFromSuperview];
[mageViewhighlighted removeFromSuperview];
yourbutton.alpha = 1;
}];
use following code, it's working properly, I used this code in my project:
UIButton *myButton=[UIButton buttonWithType:UIButtonTypeRoundedRect];
myButton.frame=CGRectMake(40, 20, 80, 25);
[myButton setImage:[UIImage imageNamed:#"normalImage.png"] forState:UIControlStateNormal];
[myButton setImage:[UIImage imageNamed:#"highlightedImage.png"] forState:UIControlStateHighlighted];
[myButton addTarget:self action:nil forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:myButton];
xCode 7,iOS9
//for zoom in
[UIView animateWithDuration:0.5f animations:^{
self.sendButton.transform = CGAffineTransformMakeScale(1.5, 1.5);
} completion:^(BOOL finished){}];
// for zoom out
[UIView animateWithDuration:0.5f animations:^{
self.sendButton.transform = CGAffineTransformMakeScale(1, 1);
}completion:^(BOOL finished){}];
Hi I have a UIView to which I add a UIButton in its initWithFrame: method like this:
UIButton * dropB = [UIButton buttonWithType:UIButtonTypeRoundedRect];
dropB.frame = CGRectMake(190, 22, 52, 22);
dropB.backgroundColor = [UIColor clearColor];
dropB.titleLabel.font = [UIFont fontWithName:#"Helvetica-Bold" size:11];
[dropB setTitle:#"DROP" forState:UIControlStateNormal];
[dropB addTarget:viewController
action:#selector(dropSelectedObject)
forControlEvents:UIControlEventTouchUpInside];
[self addSubview:dropB];
Then, as I try to animate the view with a resizing like this:
[UIView beginAnimations:#"MoveIt" context:nil];
[UIView setAnimationDuration:0.5];
[UIView setAnimationBeginsFromCurrentState:YES];
self.dropButton.center = CGPointMake(self.dropButton.center.x + 80, self.dropButton.center.y -10);
self.frame = CGRectMake(0, 0, WIDTH, HEIGHT);
self.center = CGPointMake(CENTER_X, CENTER_Y);
[UIView commitAnimations];
The button only gets translated to a new position which is the previous one (the original coordinates were relative to the view i guess). How can I make it translate to the point i specify?
Ok it was pretty simple (and stupid).
Since I needed the UIButton to remain at a fixed height I had to specify what space was 'flexible' while resizing. This can be done using the autoresizingMask property of an UIView this way:
dropB.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin |UIViewAutoresizingFlexibleBottomMargin;
and not calling anithing among the animation instructions
I'm creating a menu and I want the buttons to "pop" I guess on the screen. Basically I want to start at 0px dimensions and then go up to the full size of the buttons. I can animate the alpha and the position if I want to but can't do the dimensions and I think its because its an image on the button.
If I do a UIButtonTypeRoundRect you can see the button being animated behind the image but the image is static.
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
[button setBackgroundImage:[UIImage imageNamed:#"settings.png"] forState:UIControlStateNormal];
button.frame = CGRectMake(20, 20, 0, 0);
button.alpha = 0;
[self.view addSubview:button];
CGRect frame = button.frame;
[UIView beginAnimations:#"button" context:nil];
[UIView setAnimationDuration:1];
button.alpha = 1;
frame.size.width += 53;
frame.size.height += 53;
button.frame = frame;
[UIView setAnimationDelegate:self];
[UIView commitAnimations];
So the Alpha works but the resize doesn't. I've also played with stretchableImageWithLeftCapWidth to try and give it context or something but to no avail.
Cheers for your help.
Could you try using the following code instead?
button.transform = CGAffineTransformMakeScale(1.5,1.5);
button.alpha = 0.0f;
[UIView beginAnimations:#"button" context:nil];
[UIView setAnimationDuration:1];
button.transform = CGAffineTransformMakeScale(1,1);
button.alpha = 1.0f;
[UIView commitAnimations];
Your button should start slightly larger and then shrink back down. If this scales properly, just adjust the scalefactor before and after to suit.
Updated for Swift:
You can insert this in whatever IBAction you've got tied to a button to animate it when it's touched.
// animate button
// play with the scale (1.25) to adjust to your liking
yourButton.transform = CGAffineTransformMakeScale(1.25, 1.25)
yourButton.alpha = 0.0
UIView.beginAnimations("yourButton", context: nil)
// play with the animationDuration to adjust to your liking
UIView.setAnimationDuration(0.25)
yourButton.transform = CGAffineTransformMakeScale(1.0, 1.0)
yourButton.alpha = 1.0