Place two UIImages in one UIScrollView - ios

I was tasked to create a image viewer just like IKEA's catalogue viewer. It's completely out of my skills but after all I must try it.
I was once able to create photo viewer with UIScrollView like iPhone's Photo App, but IKEA's catalogue app is far more complicated as it has different parts per catalogue (title page, spread pages, back cover page). It cannot be done by my photo viewer code since it only requires simple array of UIImages. I have to separate them in several parts.
To achieve that, first I have to look for the way to put two UIImages into one UIScrollView, to make those two pages as one spread (two facing pages) zoomable UIScrollView. And our "web service" provides just an array of pages...
Is there any way to achieve this? I have searched around but all of them are the case about "marging" two UIImages, not putting them side by side as one UIImage. Should I have to create one UIImage from two UIImages then put it to the UIScrollView?
I know it's rather simple and noob question, but I really don't know where to start.
Any help would be appreciated.

If you want to make photo viewer then you must refere SDWebImage. This will cache UIIamge with lazy loading. Use it's sample code. It will help you a lot.
All the best !!!

To nest UIImages in the UIScrollView, you should create 2 UIImageViews, figure out the frame dimensions you need, then call [self.scrollView addSubview:myImageView]; for each UIImageView. For example:
UIImage *image1 = [UIImage imageNamed:#"image1"];
UIImage *image2 = [UIImage imageNamed:#"image2"];
UIImageView *imageView1 = [[UIImageView alloc] initWithImage:image1];
// put your specific frame values here
imageView1.frame = CGRectMake(100.0f,100.0f,200.0f,200.0f);
UIImageView *imageView2 = [[UIImageView alloc] initWithImage:image2];
// put your specific frame values here
imageView2.frame = CGRectMake(300.0f,100.0f,200.0f,200.0f);
// This is a property tied to your scrollView, either created in code or in Interface Builder
[self.scrollView addSubview:imageView1];
[self.scrollView addSubview:imageView2];

Related

Animated Background

I am making an app in which there are two buttons in the center. The background is there and I need the background to have an animation. With that said I mean like little raindrops constantly falling in the background. I have no clue on how to do this. My customer really, really wants this. Thanks!
Make sure the images are named in numerical order with the number at the end of the name. Then drag and drop the file of images into your Xcode folder area. Then you reference only the image name and not the number in animatedImageNamed.
You need to create an ImageView the size of the Background for each device you plan on using.
//place this in your viewDidLoad
UIImageView * background = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 320, 55)];
UIImage * image = [UIImage animatedImageNamed:#"MovingCar" duration:3.6];
background.image = image;
[self.view setBackgroundView: background];
You can change the duration to suit your needs accordingly.
You could use the UIView method animateWithDuration:animations: or one of it's variants that has a completion method to animate images from the top to the bottom of the screen. Take a look at the Xcode docs on that method, and search the web for examples.
As the other poster says, this site is for helping people with problems, not for asking others to provide you with ready-made solutions.
I could bang out some animation code for you that would create an endless stream of falling raindrops, but it would probably take me a couple of hours to get it fully working, and I'd have to charge you for it. (Plus I'm not very familiar with Swift so I'd have to do some translation from Objective-C, which is my day-to-day programming language.)

iOS: Working with custom ui elements

I'd like to use some custom UI elements for an app I'm writing. They're all encased in a .psd in separate layers. Once I isolate them, what's the best way to use them in my app? I've been looking for a tutorial but I can't find anything.
I.e. for a UIToolbar, do I add it as a subview?
UIImageView *imgView = [[UIImageView alloc] initWithFrame:CGRectMake(titleToolbar.frame.origin.x,
titleToolbar.frame.origin.y, titleToolbar.frame.size.width,
titleToolbar.frame.size.height)];
imgView.image = [UIImage imageNamed:#"toolbar1"];
[titleToolbar addSubview:imgView];
For a UIButton, do I just add it as the background image? Should I be subclassing things?
Forgive my ignorance :(
The best thing what you should do, is subclassing, and make universal components. Then like you did, add from code, and add as subviews.

Add a custom image to UIRefreshControl [duplicate]

I have been looking around but couldn't find anything good about this.
I would like to customize the default UIRefeshControl with different loader, etc. So far I can only change tintColor & attributedTitle properties and most code I found are just basically creating a new "pulltorefresh" effect but what I want is to just use the UIRefreshControl and customize it a bit.
Is this possible?
You can't add different loader without accessing private APIs, but you can add background image:
UIImageView *rcImageView =
[[UIImageView alloc] initWithImage:
[UIImage imageNamed: #"refreshControl.png"]];
[self.refreshControl insertSubview:rcImageView atIndex:0];
assuming self is an instance of UITableViewController subclass.
Image size you need is 320x43px (#2x 640x86px), the middle area (approximately 35px) will be covered by the loader animation.
I show application logo there...

How to customize UIRefreshControl with different image and position?

I have been looking around but couldn't find anything good about this.
I would like to customize the default UIRefeshControl with different loader, etc. So far I can only change tintColor & attributedTitle properties and most code I found are just basically creating a new "pulltorefresh" effect but what I want is to just use the UIRefreshControl and customize it a bit.
Is this possible?
You can't add different loader without accessing private APIs, but you can add background image:
UIImageView *rcImageView =
[[UIImageView alloc] initWithImage:
[UIImage imageNamed: #"refreshControl.png"]];
[self.refreshControl insertSubview:rcImageView atIndex:0];
assuming self is an instance of UITableViewController subclass.
Image size you need is 320x43px (#2x 640x86px), the middle area (approximately 35px) will be covered by the loader animation.
I show application logo there...

Load local UIImage asynchronously with caching

UIScrollViewController
|-----UIImageView1, 2, 3, 4, 5...
I have a UIScrollViewController which has several subviews. Every subview contains a UIImageview, when scrolling the UIImageView, pages on either side of current page will be loaded using
imageView = [[UIImageView alloc] initWithContentsOfFile:fileName];
But when the local image file becomes really big (>2MB), the scrolling becomes very influent amd gets stuck.
Is there a way to avoid this? For example using a cache or doing it asynchronously?
You can load images asynchronously, in another thread, or if you support only iOS higher than 4, it's quite easy to perform it with blocks.
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, NULL), ^{
UIImageView* imageView = [[[UIImageView alloc] initWithContentsOfFile:fileName]autorelease];
dispatch_async(dispatch_get_main_queue(), ^{
//Maybe correct the frame too
[self.view addSubview:imageView];
});
});
If you can't use blocks, you can execute in different thread, but it's a bit more involved.
Anyway, I recommend:
Better have created UIImageViews added to the scrollview, with a 'dummy' or 'spinner', then when user interaction stops (detected via delegate method), you can reload the visible imageviews.
When user is scrolling, better to load and cache UIImage objects for the images you want, (store them in an array or dictionary for example).
Scale the UIImage content to fit the UIImageView frame inside ScrollView. That way during rendering time, UIImage will not 'autoscale' the provided image, so it will be faster.

Resources