How to add animate images and text in the same view programatically? - ios

I am currently learning iOS development and I want to develop an iOS app where there is an animated image at the beginning top of the View Controller and a lot of text just after it. Please have a look at the picture below:
I have thought about the codes for both the image animation at the top and the large amount of text just after it. I was wondering whether someone could please review them and tell me whether they are fine or not.
The codes for both the image animation and the large amount of text will be placed inside the viewDidLoad method of the implementation file of the controller like this:
- (void)viewDidLoad
{
[super viewDidLoad];
// codes for image animation
// codes for large amount of text to be displayed
}
IMAGE ANIMATION CODES
For the image animation, I am going to use 5 png pictures: A.png, B.png, C.png, D.png and E.png. The slide show will start from A, then move on to B, then to C, to D and finally to E. All the 5 pictures are added to my project in Xcode. Below are the codes:
NSArray *imagelist = [[NSArray alloc] initWithObjects: [UIImage imageNamed:#"A.png"], [UIImage imageNamed:#"B.png"], [UIImage imageNamed:#"C.png"], [UIImage imageNamed:#"D.png"], [UIImage imageNamed:#"E.png"],nil];
UIImageView *animationImageView = [[UIImageView alloc] initWithFrame: CGRectMake(5,5,90,180)];
animationImageView.animationImages = imagelist;
animationimageView.animationDuration = 10;
[self.view addSubView:animationimageView];
[animationImageView startAnimating];
LARGE AMOUNT OF TEXT CODES
For the text, I have not added all the necessary text....because there is a lot more. That is why I need the text object to be scrollable. Below are the codes:
UITextView *largeText = [[UITextView alloc] initWitthFrame: CGRectMake(5,100,90,180)];
largeText.text = #"In organizations, we must work with and for others. To be able to mutually achieve our goals, we must be able to relate to others effectively. These leadership tips will help you do just that:
1)Catch people doing things right and then let them know that they are doing things right
2)Use feedback to stay informed about what other people are doing in your area of responsibility and authority
3)Have regular, focused meetings regarding the projects that you are responsible for
4)Provide adequate instructions. Time is lost if things are not done correctly
5)Train others to do jobs. You cannot do them all, nor can others do them if they have not been trained
6)Expect others to succeed. It becomes a self-fulfilling prophecy when you believe others are loyal, dedicated and doing a good job";
largeText.font = [UIFont fontWithName:#"TimesNewRomanPSMT" size:18];
largeText.editable = NO;
largeText.scrollEnabled = YES;
[self.view addSubView:largeText];
Please review the codes and can someone tell me whether the codes are fine or not.
Thanks for reading.

NSArray *imagelist = [[NSArray alloc] initWithObjects: [UIImage imageNamed:#"A.png"], [UIImage imageNamed:#"B.png"], [UIImage imageNamed:#"C.png"], [UIImage imageNamed:#"D.png"], [UIImage imageNamed:#"E.png"],nil];
UIImageView *animationImageView = [[UIImageView alloc] initWithFrame: CGRectMake(5,5,90,180)];
[self.view addSubView:animationimageView];
NSTimeInterval delay=0.0;
for (NSInteger i=0; i<[imagelist count]; i++) {
delay+=3.0;
[UIView animateWithDuration:0.5 delay:delay options:UIViewAnimationOptionCurveLinear animations:^{
animationImageView.image=[imagelist objectAtIndex:i];
}completion:nil];
}

Related

Display images in ScrollView

I want to display some images in a scroll view, but I am facing some issues.
Here is what I have:
- (void)viewDidLoad
{
[super viewDidLoad];
myObject = [[NSMutableArray alloc] init];
[myObject addObject:#"tut_5.jpg"];
[myObject addObject:#"tut_2.jpg"];
[myObject addObject:#"tut_3.jpg"];
[myObject addObject:#"tut_4.jpg"];
pageControlBeingUsed = NO;
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenWidth = screenRect.size.width;
CGFloat screenHight = screenRect.size.height;
for (int i = 0; i < [myObject count]; i++) {
CGRect frame;
frame.origin.x = self.takeTourScrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size = self.takeTourScrollView.frame.size;
NSString *val = [myObject objectAtIndex:i];
UIImage* theImage = [UIImage imageNamed:val];
UIImageView *img=[[UIImageView alloc] initWithFrame:CGRectMake(screenWidth*i,0,185 ,284)];
img.image = theImage;
[self.takeTourScrollView addSubview:img];
}
The first first image seems to be ok.
Then when I swipe left I am getting a blank screen
I swipe left again and then I see my second picture. And it goes like that for all the 4 images.
Any ideas what am I doing wrong ?
There are system components that will give you what you want with much less work and a more refined user experience. Using a UICollectionView is one possibility, as mentioned by Vive in her answer. My suggestion would be a UIPageViewController. There is a sample app called PhotoScroller from Apple that shows how to implement a UI very much like what you describe. Do a search in the Xcode docs for "PhotoScroller" to find it.
I'd advise to use UITableView/UICollectionView for such behaviour. You can set the image in each cell and they'll be reused - it will be much better in terms of memory management.
The tableView will by the way place all elements in proper places (you just need to define the height of the cell or the layout).
It will also properly resize on events (eg phone rotation).
Also, you should try to avoid hardcoding the sizes:
CGRectMake(screenWidth*i,0,185 ,284)
You will fail in case of smaller / bigger devices. It'll be a great pain to maintain the code after some time.
-- edit --
After #Duncan C posted his answer, I've noticed you're looking for a paging system. You can go with building your own solution either on UIPageViewController or on UICollectionView. However you can also use third party libraries, I really enjoy this one: https://www.cocoacontrols.com/controls/bwwalkthrough. It has a support of different animations and does a ton of stuff for you :).
you already set the x position of uiscrollview. do not need to set the x postion of UIImageView.Because you used imageview as a subview of uiimagescrollview.
change this line to
UIImageView *img=[[UIImageView alloc] initWithFrame:CGRectMake(screenWidth*i,0,185 ,284)];
with
UIImageView *img=[[UIImageView alloc] initWithFrame:CGRectMake(0,0,185 ,284)];

Show taken images from camera in a ScrollView

I have a simple application with only one button.
When user clicks on it, he can take a pictures, click "Done" in the camera and then can save it and see it on the ScrollView.
However, when he is taking another picture and clicking "Done" in the camera, the new picture overwrites the previous one and he can see only the picture that he has taken.
I want to save all these pictures and then if the user takes 4-5 pictures, he can see all of them by scrolling them.
Here is my code, im not sure why it is not working.
- (IBAction)Camera:(id)sender {
UIImagePickerController *picker = [[UIImagePickerController alloc] init];
picker.delegate = self;
picker.allowsEditing = YES;
picker.sourceType = UIImagePickerControllerSourceTypeCamera;
[self presentViewController:picker animated:YES completion:NULL];
}
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info{
NSMutableArray *images = [NSMutableArray arrayWithCapacity:[info count]];
for (UIView *v in [_scrollView subviews]) {
[v removeFromSuperview];
}
[self dismissViewControllerAnimated:YES completion:nil];
UIImage* image=[info valueForKey:#"UIImagePickerControllerEditedImage"];
UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil);
UIImageView *imageview = [[UIImageView alloc] initWithImage:image];
[_scrollView addSubview:imageview];
[images addObject:image];
self.chosenImages = images;
UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil);
[_scrollView setPagingEnabled:YES];
}
And in header i have an array of chosenImages
#property (nonatomic, copy) NSArray *chosenImages;
There are lots of things wrong with your code. Every time the user picks an image, you remove all the subviews from your scroll view, then add just the single selected image.
You have an array chosenImages which you might use to hold all the selected images, but you replace it with a new array, images, which only contains the single newly selected image.
You allocate images as a mutable array with enough capacity for the count of the info dictionary you get in didFinishPickingMediaWithInfo, but there's no point to doing that. The count of that dictionary is going to be the number of key/value pairs in the dictionary, which does not reflect the number of images the user selected (I believe the number of images the user selected will always be 1, ignoring the different formats like the original image and the (possible) edited image.)
I would suggest leaving the previous images in your scroll view, tracking the number and placement of those images, and simply adding a new image to the scroll view after the user picks.
You might think about using a UIPageViewController in page scroll mode rather than a raw scroll view. It manages paged scrolling much better than a scrollview will. There is a sample app from Apple called PhotoScroller (link) that even supports tiled rendering of the images, pinch-to-zoom, and panning around an image. It would be pretty easy to stitch that code into your app for handling these images. (You might not decide to deal with the tiled images - I adapted the PhotoScroller code, with tiled image support, into a client project, and generating the image tiles is a fair amount of work.)
Assuming that self.chosenImages is of NSMutableArray type, try this
[self.chosenImages addObjectsFromArray:images]
instead of
self.chosenImages = images;
and if it isn't mutable, you can always set it like so:
NSMutableArray *newArray = [self.chosenImages mutableCopy];
newArray = [newArray addObjectsFromArray:images];
self.chosenImages = [newArray copy];

Timing animation in Ios development

I'm looking for advice about how best to implement a Karaoke text effect to an IOS app. I'm new to IOS so am not familiar with all the various animation apis and libraries and am hoping that I can save some time if I am pointed in the right direction of what libraries to study.
In Javascript I would have used an array with the various words and timings of the audio track, and setTimeout to write the next element in the array to a div on the page. I did consider using this approach in a UIWebView but after some quick tests with UIWebview I wasn't really happy with how smooth it looked.
I did come across one very simple animation tutorial that loops through an array of images but it has a uniform animation duration which in my use case would not work, as the length of time the words needs to display on the screen will vary according to the audio. Here is the sample code that I was looking at.
NSArray *imageNames = #[#"win_1.png", #"win_2.png", #"win_3.png", #"win_4.png",
#"win_5.png", #"win_6.png", #"win_7.png", #"win_8.png",
#"win_9.png", #"win_10.png", #"win_11.png", #"win_12.png",
#"win_13.png", #"win_14.png", #"win_15.png", #"win_16.png"];
NSMutableArray *images = [[NSMutableArray alloc]init];
for (int i= 0; i < imageNames.count; i++) {
[images addObject:[UIImage imageNamed:[imageNames objectAtIndex:i]]];
}
UIImageView *animationImageView = [[UIImageView alloc] initWithFrame: CGRectMake(60,95, 86, 193)];
animationImageView.animationImages = images;
animationImageView.animationDuration = 0.5;
[self.view addSubview:animationImageView];
[animationImageView startAnimating];
UIImageView *slowAnimationImageView = [[UIImageView alloc] initWithFrame:CGRectMake(160, 95, 86, 193)];
slowAnimationImageView.animationImages = images;
slowAnimationImageView.animationDuration = 5;
[self.view addSubview:slowAnimationImageView];
[slowAnimationImageView startAnimating];
And I found that tutorial here: http://www.appcoda.com/ios-programming-animation-uiimageview/
thanks in advance for any suggestions of which approach is best to take.
So, I have already implemented what you describe and I can tell you that CoreText is the API you need to use. Only via CoreText rendering will you be able to render specific word portions in different colors and apply the color changes at specific times. But, the bad news is that this API is not really easy to use. You can find working example code in the files MutableAttrString.m and AVOfflineComposition.m at the following github project link github. The minimum code you would need is in the MutableAttrString.m file, it shows how to use CoreText to properly implement the logic you describe. You could try to roll your own solution with animated bitmaps, but the CoreText approach just renders text so it is way better for many reasons.

How to have an animated background iOS

I want to place an animated background on my app. I have looked into the UIMotionEffect class and yes that does seem beneficial. However, what I am really looking for is something like the dynamic wallpapers provided in iOS settings. The way those colored circles move around is exactly what I am looking for.
I've tried this with no luck:
self.view.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"circle"]];
[UIView animateWithDuration:5.0 animations:^{
self.view.backgroundColor = [[UIColor alloc] initWithPatternImage:[UIImage imageNamed:#"circle"]];
}];
My only problem is I have no idea where to start. I looked into OpenGL. I assume it could be done that way, but it seems like a possible rabbit trail that I might not need to take. I also found some videos on YouTube but they involve Adobe Flash, which I do not have. Any suggestions on where to venture for this?
If it's a simple GIF you don't need to get fancy. Just separate the images (many tools to do that) and use the following code (might be some typos):
NSArray *array = [NSArray arrayWithObjects:
[UIImage imageNamed:#"image1.png"],
[UIImage imageNamed:#"image2.png"],
........,
nil];
UIImage *image = [UIImage animatedImageWithImages:array duration:6.0f];
[image startAnimating];

How do I make the area on the top of a UISearchBar (when on a UITableView) in iOS 7 transparent?

Here is a picture describing the problem. Notice that the area above the UISearchBar does not have the background as below it. I don't want the gray color, I want the dark maroon background when pulling down on the UITableView.
Everything I know of is set to [UIColor clearColor], including backgrounds of views, etc. It works fine in iOS 6 but not iOS 7!
I've also attached a sample project so someone can take a look and see what I am doing wrong here?
Click here to download my sample project
Maybe I am just missing something stupid?
Thanks!
Two things you could do: 1) add an explicit clear background view to the UITableView. Or, 2) set your UIImageView to be the background view of the UITableView.
Either of these work. Here's the code that makes your sample work:
- (void)viewDidLoad
{
[super viewDidLoad];
UIImageView *backgroundImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
backgroundImageView.image = [UIImage imageNamed:#"Film_bg.png"];
[self.view addSubview:backgroundImageView];
[self.view sendSubviewToBack:backgroundImageView];
// solution 1
// self.tableView.backgroundView = [UIView new];
// self.tableView.backgroundView.backgroundColor = [UIColor clearColor];
// solution 2
self.tableView.backgroundView = backgroundImageView;
}

Resources