Animation on button using images - objective-c

I have a UIButton which has arrow kind of blue image set as
UIImage *arrowImage = [UIImage imageNamed:#"bluearrow.png"];
[self.prevbutton setBackgroundImage:arrowImage forState:UIControlStateNormal];
Now I have another image yellow.png, that I want to super impose on top of this button image and make a flashing animation continuously. How can I do this?

This should help you.
myButton.imageView.animationImages =
[NSArray arrayWithObjects:[UIImage imageNamed:#"image1.png"],
[UIImage imageNamed:#"image2.png"],
nil];
myButton.imageView.animationDuration = 0.5; //whatever you want (in seconds)
[myButton.imageView startAnimating];
As quoted from https://stackoverflow.com/a/7490535/716216

Related

add label to UIButtons in iCarousel

I implemented iCarousel method in my ViewController and all is working properly but there is one thing, i want to add below the carousel view label and for each image, i want to change the text in this label area. Here is my code I used for creating each image as button.
Thanks in advance.
UIImage *buttonImage =[NSArray arrayWithObjects:[UIImage imageNamed:#"Hotels.png"],
[UIImage imageNamed:#"image2.png"],
[UIImage imageNamed:#"image3.png"],
[UIImage imageNamed:#"image4.png"],
[UIImage imageNamed:#"image1.png"],
[UIImage imageNamed:#"FastFood.png"],
[UIImage imageNamed:#"Taxi.png"],nil];
UIButton *button =[UIButton buttonWithType:UIButtonTypeCustom];
button.frame = CGRectMake(0, 0, 200.0f, 200.0f);
[button setImage:[buttonImage objectAtIndex:index]forState:UIControlStateNormal];
[button addTarget:self action:#selector(buttonTapped:) forControlEvents:UIControlEventTouchUpInside];
return button;
iCarousel has a delegate method:
- (void)carouselCurrentItemIndexDidChange:(iCarousel *)carousel;
Use that method to update your label as it will fire every time the centred item in the carousel updates.
To actually work out which label text to use, you probably want to create a second array of strings to match your array of images. That way you can use the carousel.currentItemIndex property as the index into the strings array to select the correct label.

how load many photos from url in background (asynchronous)

i have this method i use to load many images to scroll view, but when the images load from the url my scroll view is stuck and i can't understand how to load them in the background so the user will not feel it.
this method will call few times (8) in "for" cycle.
- (void)loadPhotosToLeftscroll{
//getting image information from JSON
NSMutableDictionary *photoDict;
photoDict = [leftPhotoArray lastObject];
//getting the photo
NSString *photoPath = [photoDict objectForKey:#"photos_path"];
NSLog(#"photo Path:%#",photoPath);
NSData * imageData = [[NSData alloc] initWithContentsOfURL:[NSURL URLWithString:photoPath]];
UIImage *image = [UIImage imageWithData:imageData];
// use the image how you like, say, as your button background
//calculating the hight of next photo
UIImageView *leftImage = [leftBlockScroll.subviews lastObject];
//allocating photoView
UIImageView *photoView = [[UIImageView alloc]initWithFrame:CGRectMake(5 , leftImage.frame.origin.y + leftImage.frame.size.height+5, image.size.width/2, image.size.height/2 )];
photoView.userInteractionEnabled=YES;
[photoView.layer setMasksToBounds:YES];
[photoView.layer setCornerRadius:3];
//getting items list
NSDictionary *sh_items = [photoDict objectForKey:#"items"];
//adding image button
UIButton *imageOverButton = [UIButton buttonWithType:UIButtonTypeCustom];
imageOverButton.frame = CGRectMake(0, 0, photoView.frame.size.width, photoView.frame.size.height);
[imageOverButton addTarget:self action:#selector(LeftimagePressed:) forControlEvents:UIControlEventTouchUpInside];
[imageOverButton setTag:[leftPhotoArray count]-1];
[photoView addSubview:imageOverButton];
//adding sh button to imageView
[self addThe_sh_signs:sh_items To_ImageView:photoView];
//subViewing the image to the scrollView
[self insert_Image:image toImageView:photoView in_Scroll:leftBlockScroll];
//calclulating the position of next imageView in scroll.
nextLeftPhotoHight = photoView.frame.size.height + photoView.frame.origin.y + 5;
//calculating the hight of the highest scroll view in both.
leftBlockScroll.contentSize = CGSizeMake(160, [self theSizeOfScrollViewHight]);
rightBlocScroll.contentSize = CGSizeMake(160, [self theSizeOfScrollViewHight]);
isLoadindContant = NO;
[self.view reloadInputViews];
[leftBlockScroll reloadInputViews];
}
please do not send me to some link that trying to explain how to use the asynchronous.
Try to explain according the method you see here.
Im here for any question, that you need to ask to help me.
You will have to do it asynchronously in a proper way. I do not think there is any way around that. I subclassed an UIImageView object and placed many instances of it within the cells of a talbe (in your case within the scroll view). The subclass objects are initialized with an url and load their image asynchronously (with some caching so that the image is not loaded every time).
This tutorial helped me much in the beginning:
http://www.markj.net/iphone-asynchronous-table-image/
You will just have to adopt that to your scroll view. The underlaying principle remains the same.

changing image during translation

How can I change myLayer.contents with a set of images (i.e. switching between img1 and img2) during the translation? thanks!
UIImage *myImage = [UIImage imageNamed:#"img1.png"];
CALayer *myLayer = [CALayer layer];
myLayer.contents = (id)myImage.CGImage;
myLayer.Position = CGPointMake(0,0);
myLayer.Bounds=CGRectMake(0.0, 0.0, 50, 50);
[self.view.layer addSublayer:myLayer];
//translation1
CGPoint startPt = CGPointMake(10,10);
CGPoint endPt = CGPointMake(100,100);
CABasicAnimation *transl1 = [CABasicAnimation animationWithKeyPath:#"position"];
transl1.removedOnCompletion = FALSE;
transl1.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
transl1.fromValue = [NSValue valueWithCGPoint:startPt];
transl1.toValue = [NSValue valueWithCGPoint:endPt];
transl1.duration = 3;
transl1.fillMode = kCAFillModeForwards;
transl1.beginTime = 0;
[myLayer addAnimation: transl1 forKey: nil];
The walking man example:
I have dealt with exactly the same task, but I had to do a running spider which is 6 leg walk and has 12 frames.
It was actually very difficult to do and took me few months to perfect.
The thing is that the the waking man example is usually done by setting an array of image frames( First leg, Last Leg) to an animationImages property of UIImageView.
Then you turn the animation on and off together with moving character right and left and by this creating an illusion of walking.
Now the big problem arises when you want create an illusion of acceleration. There is no way to change the animation duration DURING the animation playback and this is a major setback that is very hard to overcome.
Here is the code that I produced to overcome this issue:
Here you define an array with the walking leg frames, frame per step.
animationImagesSpider = [NSArray arrayWithObjects:
[UIImage imageNamed:#"1#2x.png"], [UIImage imageNamed:#"2#2x.png"], [UIImage imageNamed:#"3#2x.png"], [UIImage imageNamed:#"4#2x.png"], [UIImage imageNamed:#"5#2x.png"], [UIImage imageNamed:#"6#2x.png"], [UIImage imageNamed:#"6#2x.png"], [UIImage imageNamed:#"8#2x.png"], [UIImage imageNamed:#"9#2x.png"], [UIImage imageNamed:#"10#2x.png"], [UIImage imageNamed:#"11#2x.png"], [UIImage imageNamed:#"1#2x.png"], nil];
Here you attach the array to the UIImageView:
imgViewSpider = [[UIImageView alloc] initWithFrame:CGRectMake(200,410,100,145)];
imgViewSpider.animationImages = animationImagesSpider;
Now if you simply call [imgViewSpider startAnimating]; this will start the animation at a constant speed until you stop it. To overcome this I have used a recursion that plays a short animation for each step and this allows to adjusts the duration between each steps:
- (void) spiderRun {
imgViewSpider.animationDuration= 0.51-(accSp/3.5);
[imgViewSpider setAnimationRepeatCount:222]; /// this is a dummy value that has no effect because animtion ends after the first frame
[imgViewSpider startAnimating];
[self performSelector:#selector(spiderRun) withObject:nil afterDelay: 0.5-(accSp/3.5)];
}
By constantly changing the accSp value, I can control the walk speed during the walk.
As the other poster said, create a second animation that animates the contents property of the layer to a new image.
I would suggest putting both animations into an animation group, and adding the animation group to the layer. Then you can easily control both the duration and start time of both animations. You could make the image swap take place over part of the total duration, timed to take place in the middle of the animation.
You'd set the start of the animation using the beginTime property, and the duration with the duration property.
You will need to create a second animation transl2, this animation will make the image swap. You will need to set the duration to a half of transl1 duration so that it will fall in the middle of the transl1 animation.
transl1.duration = 3
transl2.duration = 1.5

Distorted custom Navigation buttons on non-retina display (using stretchable image method)

I am adding custom navigation buttons to my navigation bars via the following code.
//Instance method in CustomNavButton Class
-(UIButton*)setupButtonWithImage:(UIImage*)image andFrame:(CGRect)frame
{
UIButton *button = [[[UIButton alloc]initWithFrame:frame]autorelease];
UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake((frame.size.width-20)/2, (frame.size.height-20)/2, 20, 20)];
imageView.image = image;
UIImage *buttonImageNormal = [UIImage imageNamed:#"customBtn_black"];
UIImage *stretchableButtonImageNormal = [buttonImageNormal
stretchableImageWithLeftCapWidth:12 topCapHeight:0];
button.titleLabel.font = [UIFont boldSystemFontOfSize:12];
[button setBackgroundImage:stretchableButtonImageNormal
forState:UIControlStateNormal];
[button setTitleShadowColor:[UIColor whiteColor] forState:UIControlStateNormal];
[button setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
[button addSubview:imageView];
return button;
}
//Call CustomNavButton and add to Navbar
- (void)viewDidLoad
{
[super viewDidLoad];
//Add left invite friends button
CustomNavButton *leftButton = [[CustomNavButton alloc]initWithImage:[UIImage imageNamed:#"friends_1"] andFrame:CGRectMake(0, 0, 40, 32)];
[leftButton.customNavButton addTarget:self action:#selector(inviteButtonPressed) forControlEvents:UIControlEventTouchUpInside];
UIBarButtonItem *leftBarButton = [[UIBarButtonItem alloc]initWithCustomView:leftButton];
self.navigationItem.leftBarButtonItem = leftBarButton;
[leftButton release];
}
The navigation buttons appear fine on my iPhone (IOS5 with Retina Display)
However, the buttons look distorted on my simulator (or non-retina display)
How can I resolve this? How can I display the buttons properly even for non-retina displays?
Note that I have created the #2x buttons for this as well
EDIT:
It seems like the issue likes with the stretching of the image
UIImage *stretchableButtonImageNormal = [buttonImageNormal
stretchableImageWithLeftCapWidth:12 topCapHeight:0];
If I change the leftCapWidth value to 0, the buttons on the simulator looks better (but still bad).
But by doing this, it will cause my retina display button look a little distorted (seems like I can't win).
Can anyone advise if the problem does really lie here, and how I can alter the values so that it works well for both retina and non-retina displays?
Do you have two files? MyImage.png and MyImage#2x.png? It looks like the system is trying to resize the #2x file by scaling it down, which usually causes some jaggedness like this when it is simply scaled down.
MyImage.png should be half the size of MyImage#2x.png.
Your not setting the file format .png or whatever it is you have. And as Chris said you need two files regular and #2x.

Make UITableView imageView square?

I have a app that will populate a UITableView after the user takes a picture.
The UITableViewCell's image is that picture that the user takes. I would prefer these images to be square.
I have tried just about everything, here's some code:
UIImage *theImage = [UIImage imageNamed:theImagePath];
cell.imageView.contentMode = UIViewContentModeScaleAspectFill;
cell.imageView.image = theImage;
Thanks!
Coulton
one option would be to pass in a square image:
UIGraphicsBeginImageContext(CGSizeMake(60.0f, 60.0f));
[fullSizeImage drawInRect:CGRectMake(0,0,60.0f, 60.0f)];
UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
you would probably want to only do this once for each image, and then cache the result.