UIScrollView and image thumbnails - iphone

I want to have a scroll view, where you display 5 thumbnails on the scroll view each time.
Basically it's a table with one row and in each row we have 5 thumbnails in it.
You slide your finger to the right then you display the next set of 5 thumbnails.
What do I need to do this?? Is it true that we need a scroll view to do this? How can I start?

In your UIView that will contain your UIScrollView, place (something like) this code in -viewDidLoad:
UIScreen *screen = [UIScreen mainScreen];
pageWidth = screen.bounds.size.height;
pageHeight = screen.bounds.size.width;
scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, pageWidth, pageHeight)];
[scrollView setAutoresizingMask:UIViewAutoresizingNone];
[scrollView setContentSize:CGSizeMake(numPages * pageWidth, pageHeight)];
[scrollView setContentOffset:CGPointMake(pageWidth, 0)];
[scrollView setPagingEnabled:YES];
[scrollView setDelaysContentTouches:YES];
[scrollView setDelegate:self];
[scrollView setClearsContextBeforeDrawing:NO];
[scrollView setOpaque:YES];
[self.view insertSubview:scrollView atIndex:0];
[scrollView release];
// iterate through your thumbnails - which are UIViews
thumbnailViews = [NSMutableArray array];
[thumbnailViews retain];
NSUInteger pageCounter = 0;
for (...)
{
ThumbnailView *thumbnailView = [[ThumbnailView alloc] initWithFrame:CGRectMake( pageCounter*pageWidth, 0, pageWidth, pageHeight )];
[thumbnailView setMultipleTouchEnabled:YES];
[thumbnailView setViewController:self]; // this may be necessary to push/pop on navigation controller stack.
[thumbnailView restoreState];
[scrollView thumbnailView];
[thumbnailViews thumbnailView];
++pageCounter;
}
In my case, pageWidth, pageHeight, thumbnailViews and scrollView are all ivars for my UIView subclass.

I just looked in here as I'm learning about UIScrollViews myself. I started to try and get westsider's code to work, but I noticed that it is practically gobblygook. It should be in a UIViewController that implements the <UIScrollViewDelegate> protocol, and things like [scrollView thumbnailView]; is meaningless as here thumbnailView is a method name. I believe http://www.codeproject.com/Articles/46556/How-To-Use-UIScrollView-in-Your-iPhone-App.aspx is more coherent.
To answer the question, I think you want to create a UIScrollView in a standard manner--such as in the link, and you want to create a subclass of UIView called, say, UIView5 that has 5 UIImageViews. Then, instead of adding a normal UIView to the UIScrollView, like [scrollView addSubview:standardUIView];, you add UIView5 objects.

Related

Scrollbar doesn't show up

I'm new to ios programming.
I want users to be able to scroll screen, so I initialized UIScrollView and add other views into the instance of UIScrollView.
But, I'm not able to scroll screen and I don't see a scrollbar.
This is my code I wrote.
This view controller extends from UIViewController.
What is wrong with this?
Please help me.
Thank you very much!!
- (void)viewDidLoad
{
[super viewDidLoad];
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:self.view.frame];
scrollView.contentSize = self.view.frame.size;
[self.view addSubview:scrollView];
UIImage *img = [UIImage imageNamed:#"avatar.png"];
UIImageView *profileImg = [[UIImageView alloc] initWithImage:img];
CGPoint newPoint = self.view.center;
newPoint.y = 300;
profileImg.center = newPoint;
[scrollView addSubview:profileImg];
}
you need to set a content size and scroll enabled
[scrollView setFrame:self.view.bounds]; // not needed to be able to scroll
[scrollView setScrollEnabled:YES]; // needed to be able to scroll, defaults to YES
[scrollView setContentSize:CGSizeMake(320, 500)]; // the important part that is needed to be able to scroll
the 320 and 500 are desired maxed distances of scrolling to, this is not the actual scroll distance but the width and height of pixels that will be shown, you can think of the scroll view being a window and these values being the world outside
that is where you main error is, the width and height of your scroll view is the same width and height of the context size, therefore; it's like you are looking through a 1ft by 1ft window in to a room that is only 1ft by 1ft
UIScrollView Documentation

How to show multiple images inside UIScrollView in iOS

I am making one iPhone app in which i need to show some images inside UIScrollView, on left and right there will be two buttons user can click on button and it will show the next or previous image. Also at the bottom there is one button, when user will click on that button it will show the image which we have selected in scrollview.I would like to know how do we show multiple images inside that scrollview and while selecting bottom button, how to find which image was there inside scrollview.
An example from danielbeard.wordpress.com
In case your image names aren't just numbers:
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
[scrollView setPagingEnabled:YES];
[scrollView setAlwaysBounceVertical:NO];
NSArray *imagesArray = [NSArray arrayWithObjects:#"img1.png", #"img2.png", #"img3.png", nil];
for (int i = 0; i < [imagesArray count]; i++)
{
CGFloat xOrigin = i * scrollView.frame.size.width;
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(xOrigin, 0, scrollView.frame.size.width, scrollView.frame.size.height)];
[imageView setImage:[UIImage imageNamed:[imagesArray objectAtIndex:i]]];
[imageView setContentMode:UIViewContentModeScaleAspectFit];
[scrollView addSubview:imageView];
}
[scrollView setContentSize:CGSizeMake(scrollView.frame.size.width * [imagesArray count], scrollView.frame.size.height)];
have look on to this example:
http://danielbeard.wordpress.com/2012/09/17/adding-a-uiscrollview-to-a-uiview-ios/
Apple.developer PhotoScroller demonstrates the use of embedded UIScrollViews and CATiledLayer to create a rich user experience for displaying and paginating photos that can be individually panned and zoomed.
CATiledLayer is used to increase the performance of paging, panning, and zooming with high-resolution images or large sets of photos.
you just simply first
create a new view on runtime and image and assign tag all views like 1000 or 100 and increment on tag value and then add this view to scrollview and two buttons for left and right moving and make their outlet actions and add all the scrollview sub views in to an mutable array like this
indexStart=100;
UIView *AddView=[[UIView alloc]initWithFrame:CGRectMake(55, 0, 100, 100)];
AddView.tag=indexStart;
btnTap.tag=indexStart;
UIImageView *imgview=[[UIImageView alloc]initWithFrame:CGRectMake(0, 0, 100, 100)];
[AddView addSubview:imgview];
imgview.image=image;
imgview.tag=1000;
[ScrollView addSubview:AddView];
[imgArray addObject:AddView];
you use loop to do this and on left and right button you use this code and in this code editImgeView is the image view inbetween left and right button where you show the image you just simple indexstart ++ or -- if user choose right or left button
for (int index = 0; index < [imgAddArrayAfter count]; index ++ ) {
NSLog(#"index %d",index);
UIView *vc=[imgArray objectAtIndex:index];
NSLog(#"view tag %d",vc.tag);
if(vc.tag == indexStart)
{
UIImageView *modalView=(UIImageView *) [vc viewWithTag:1000];
editImgeView.image=modalView.image;
}
}
i hope you understand ;-)
- (void)viewDidLoad
{
[super viewDidLoad];
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
scrollView.contentSize = CGSizeMake(320, 465);
[scrollView setScrollEnabled:YES];
[scrollView setPagingEnabled:YES];
[scrollView setAlwaysBounceVertical:NO];
[self.view addSubview:scrollView];
NSMutableArray *arrImage = [NSMutableArray arrayWithObjects:#"food1.jpeg", #"food2.jpeg", #"food3.jpeg",#"food4.jpeg", #"food5.jpeg", #"food6.jpeg",#"food7.jpeg", #"food8.jpeg", #"foo9.jpeg",#"food10.jpeg", #"food11.jpeg", #"food12.jpeg",#"food13.jpeg", #"food14.jpeg", #"food15.jpeg", #"food16.jpeg", nil];
for (int i = 0; i < [arrImage count]; i++)
{
CGFloat xOrigin = i * scrollView.frame.size.width;
UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(xOrigin, 0, scrollView.frame.size.width, scrollView.frame.size.height)];
[imageView setImage:[UIImage imageNamed:[arrImage objectAtIndex:i]]];
[imageView setContentMode:UIViewContentModeScaleAspectFit];
[scrollView addSubview:imageView];
}
[scrollView setContentSize:CGSizeMake(scrollView.frame.size.width * [arrImage count], scrollView.frame.size.height)];
}
I know this thread is old, but I think the problem with loading lot's of images in the scroll view still exists. If you ever want to load images in the scroll view you will face a problem of memory usage. The images most likely will consume most of your device's memory. The only way of doing is to create reusable scroll view that works similar to the uitableview - the scroll view that has pool of views (with images) ready to display. This can be quite complex to create.
I have created open source project to support reusable loading images in the scroll view. It is very easy to implement. You need to call couple of delegate and data source methods and that's it. There is also sample project for obj-c and swift in order to make easy to understand. Please feel free to contribute. I hope it will be useful.
here is a source: https://github.com/sumofighter666/ReusableScrollView

UIScrollView scrolls too far after initial zoom

My UIScrollView is populated with a large content and then zoomed with "setZoomScale:animated", such that it fits into the scrollview frame. The view appears properly zoomed out, and properly positioned in the scrollview. However, the user is able to scroll outside the content (the scrollview background color shows). It seems that he can scroll as far as the original content size (as if the content was not zoomed out).
Strangely enough, after the user zooms manually the first time, everything works fine, and the scrollview is constrained to the content size again.
I have searched the web, and gone through the Apple docs and examples, but could not find anyone having the same problem. The Apple examples seem to show the same thing as I do.
My content is a custom view that is derived from UIView, and whose CALayer is replaced by a CATiledLayer (as in the Apple examples). The drawing I do myself in drawLayer:inContext:.
Here is a code snippet from MyScrollViewController:
- (void)loadView {
CGRect frame = [UIScreen mainScreen].applicationFrame;
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:frame];
scrollView.maximumZoomScale=1.0;
scrollView.delegate = self;
... setup theContentView ...
scrollView.contentSize = theContentView.bounds.size;
scrollView.contentInset = UIEdgeInsetsMake(20, 20, 20, 20);
[scrollView addSubview:theContentView];
self.view = scrollView;
double zoomScale = 0.5; // hardcoded for testing
[scrollView setZoomScale:zoomScale animated:NO];
NSLog(#"zoomscale=%g contentview=%# contentsize=%#", zoomScale, NSStringFromCGSize(theContentView.bounds.size), NSStringFromCGSize(scrollView.contentSize));
[scrollView release];
}
- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
return theContentView;
}
The NSLog statement shows a correctly set contentSize and zoomscale...
Hoping there is something obvious that I am missing...
I ended up setting the zoomScale on the next runloop (instead of directly from loadView), which worked:
- (void) loadView {
CGRect frame = [UIScreen mainScreen].applicationFrame;
UIScrollView *scrollView = [[UIScrollView alloc] initWithFrame:frame];
scrollView.maximumZoomScale=1.0;
scrollView.delegate = self;
... setup theContentView ...
scrollView.contentSize = theContentView.bounds.size;
scrollView.contentInset = UIEdgeInsetsMake(20, 20, 20, 20);
[scrollView addSubview:theContentView];
self.view = scrollView;
// set the zoom level on the next runloop invocation
[self performSelector:#selector(initialZoom) withObject:nil afterDelay:0];
[scrollView release];
}
- (void) initialZoom {
double zoomScale = 0.5; // hardcoded for testing
UIScrollView *scrollView = (UIScrollView *) self.view;
[scrollView setZoomScale:zoomScale animated:NO];
}
Another possibility, suggested by Maverick1st, is to set the zoomscale from viewDidAppear, rather than LoadView. That approach has the added advantage that it shows an animation of the zooming, indicating to the user that the view starts in a zoomed state.
- (void) viewDidAppear {
double zoomScale = 0.5; // hardcoded for testing
UIScrollView *scrollView = (UIScrollView *) self.view;
[scrollView setZoomScale:zoomScale animated:YES];
}
I'm new at this but you could try clipping subviews. I created a scroll view with interface builder, and there in the attributes inspector was a checkbox clip subviews, so i think you should do something like that, only programmatically. Hope that helps.

I would like to have two zoomable UIImageViews...on the same view, but I can't get it to work!

Ok I have been working on this feature for some time now and it is driving me nuts. I have looked all around the web and can't seem to find any answer. I want to have a view that has two UIScrollviews, that themselves contain a UIImageView each. So I can have to images on my view that are SEPARATELY scroll/zoomable.
It seems pretty simple, but I just can't get it to work. I setup the ScrollView/ImageView pairs in IB and hooked them up ok. Now my viewDidLoad code looks like this:
-(void) viewDidLoad
{
// set the image to be displayed, pic your own image here
imageView = [[MyImage alloc] initWithImage: [UIImage imageNamed: #"newBackground.png"]];
// yes we want to allow user interaction
[imageView setUserInteractionEnabled:YES];
// set the instance of our myScrollView to use the main screen
scrollView = [[MyScroll alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
// turn on scrolling
[scrollView setScrollEnabled: YES];
// set the content size to the size of the image
[scrollView setContentSize: imageView.image.size];
// add the instance of our myImageView class to the content view
[scrollView addSubview: imageView];
// flush the item
[imageView release];
// set max zoom to what suits you
[scrollView setMaximumZoomScale:1.0f];
// set min zoom to what suits you
[scrollView setMinimumZoomScale:0.25f];
// set the delegate
[scrollView setDelegate: self];
// scroll a portion of image into view (my image is very big) :)
//[scrollView scrollRectToVisible:CGRectMake(100, 100, 320, 440) animated:NO];
// yes to autoresize
scrollView.autoresizesSubviews = YES;
// set the mask
scrollView.autoresizingMask = (UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
// set the view
//self.view =scrollView;
[scrollView setFrame:CGRectMake(0, 0, 320, 240)];
self.view =scrollView;
imageView1 = [[MyImage alloc] initWithImage: [UIImage imageNamed: #"newBackground.png"]];
// yes we want to allow user interaction
[imageView1 setUserInteractionEnabled:YES];
// set the instance of our myScrollView to use the main screen
scrollView1 = [[MyScroll alloc] initWithFrame:[[UIScreen mainScreen] applicationFrame]];
// turn on scrolling
[scrollView1 setScrollEnabled: YES];
// set the content size to the size of the image
[scrollView1 setContentSize: imageView1.image.size];
// add the instance of our myImageView class to the content view
[scrollView1 addSubview: imageView1];
// flush the item
[imageView1 release];
// set max zoom to what suits you
[scrollView1 setMaximumZoomScale:1.0f];
// set min zoom to what suits you
[scrollView1 setMinimumZoomScale:0.25f];
// set the delegate
[scrollView1 setDelegate: self];
// scroll a portion of image into view (my image is very big) :)
//[scrollView scrollRectToVisible:CGRectMake(100, 100, 320, 440) animated:NO];
// yes to autoresize
scrollView1.autoresizesSubviews = YES;
// set the mask
scrollView1.autoresizingMask = (UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight);
// set the view
//self.view =scrollView;
[scrollView1 setFrame:CGRectMake(0, 300, 320, 220)];
//I do this only because I don't know what else to do. This effectively adds the scrollview to the scrollview...
self.view =scrollView1;
And the first scrollView loads, but then the second one is nested in that one! I tried doing[self.view addSubView:scrollView1]; but that just made the app crash. I'm trying my best to really dig in and figure out scrollViews as best I can, but I am just getting owned here.
Please help!
Thanks
** To further clarify, all I want is to have a scrollView on the top half of an image that can pan and zoom with an image inside of it, and then another scrollView separate from the firt that can pan and zoom on the bottom half of the screen, independent of the first.**
You need to add both scroll views as subviews of the ViewController's view (self.view):
[self.view addSubview:scrollView];
[self.view addSubview:scrollView1];
You'll then need to manually position those views so they're positioned like you want them (the above code will put the two scroll views on top of each other, with some arbitrary default size which may or may not be what you want).

Setting the size of a UIView

I have a UIViewController subclass to control a UIView that I want to add to a UIScrollView. I only want the view to be 100px high, but when I add it to the scroll view it gets made 460px high, ignoring the frame size I set:
MyViewController *vc = [[MyViewController alloc] init];
vc.view.frame = CGRectMake(0, 0, 320, 100);
myScrollView.autoresizesSubviews = NO
[myScrollView addSubview:vc.view];
[vc release];
I have set the scroll view to not autoresize subviews but it seems this is still happening! What can I do?
I have also tried setting the frame size inside loadView: in the UIViewController (which is where I will add all my controls and will need access to the size of the view) but that doesnt work either!
- (void)loadView {
[super loadView];
self.view.backgroundColor = [UIColor redColor];
self.view.frame = CGRectMake(0, 0, 320, 100); // still doesnt work
}
Any help would be greatly appreciated!
You are using loadView incorrectly, im even suprised you see a view (you shouldnt since in load view you arent assigns the vc view to anything), in loadView you must assign your view to a new UIView i nstance, anyway, you should be doing the same but in viewDidLoad instead of load view, that might work for you
Here is a snippet of how I do it. Note that the origin is with respect to the view you are adding to (in my case 'self').
appRect.origin=CGPointMake(0.0, 0.0);// origin
appRect.size = CGSizeMake(320.0f, 100.0f); //size
CGRect frame = CGRectInset(appRect, 0.0f, 0.0f);
gv=[[GraphicsView alloc] initWithFrame:appRect object:[model me]];
[gv setFrame:frame];
[self.view addSubview:gv];
[gv release];