As promised, here is a UIScrollView tutorial. I’ve gone ahead and made it extremely simple 
. Should be a nice change from some of the other more complicated tutorials I’ve seen online.
As the scroll view we are going to create is very simple, it is perhaps worthwhile to checkout Apple’s documentation on this object so you can go ahead and add your own custom features.
Apple UIScrollView Class Reference
Enjoy the tutorial . I’ve also attached a copy of the updates I made to the Dapp exported code files so you can just browse the code if you wish.
And just to be extra nice to those that just want to have a quick look at some of the code without downloading or watching anything .
HomeView.h
// Parent View Controller @class HomeViewController; @interface HomeView : UIView { HomeViewController *refParentViewController; UIScrollView *ourScrollView; } - (id)initWithParentViewController:(HomeViewController *)parent; @end |
HomeView.m
// Header File #import "HomeView.h" // Parent View Controller #import "HomeViewController.h" // Please add the QuartzCore.framework to the project #import <QuartzCore/QuartzCore.h> // Private Methods @interface HomeView() - (void)loadRectangleView1; - (void)loadRectangleView2; - (void)loadRectangleView3; - (void)loadScrollView; @end @implementation HomeView #pragma mark - #pragma mark Memory Management - (void)dealloc { [ourScrollView release]; [super dealloc]; } #pragma mark - #pragma mark Initialization - (id)initWithParentViewController:(HomeViewController *)parent { if ((self = [super init])) { // Update this to initialize the view with your own frame size [self setFrame:CGRectMake(0, 0, 320, 460)]; // Assign the reference back to the parent view controller refParentViewController = parent; // Set the view background color [self setBackgroundColor:[UIColor lightGrayColor]]; // Our load scrollview method [self loadScrollView]; } return self; } #pragma mark - #pragma mark Load Subview Methods - (void)loadScrollView { ourScrollView = [[UIScrollView alloc] init]; // Now to populate and configure our scroll view // 416 is the height of our view that is leftover, after you take away the navigation bar (44 pixels) and status bar (20 pixels) [ourScrollView setFrame:CGRectMake(0, 0, 320, 416)]; // Now we need to add our rectangle views as subviews of our scroll view. [self loadRectangleView1]; [self loadRectangleView2]; [self loadRectangleView3]; // Now we need to set our content size for our scroll view. Which can be any size and is not limited by our scroll view frame size. [ourScrollView setContentSize:CGSizeMake(320, 500)]; [self addSubview:ourScrollView]; } - (void)loadRectangleView1 { UIView *rectangleView1 = [[[UIView alloc] init] autorelease]; [rectangleView1 setBackgroundColor:[UIColor greenColor]]; rectangleView1.layer.cornerRadius = 10; rectangleView1.layer.borderColor = [[UIColor blackColor] CGColor]; rectangleView1.layer.borderWidth = 1; [rectangleView1 setFrame:CGRectMake(110, 37, 100, 100)]; [ourScrollView addSubview:rectangleView1]; } - (void)loadRectangleView2 { UIView *rectangleView2 = [[[UIView alloc] init] autorelease]; [rectangleView2 setBackgroundColor:[UIColor greenColor]]; rectangleView2.layer.cornerRadius = 10; rectangleView2.layer.borderColor = [[UIColor blackColor] CGColor]; rectangleView2.layer.borderWidth = 1; [rectangleView2 setFrame:CGRectMake(110, 196, 100, 100)]; [ourScrollView addSubview:rectangleView2]; } - (void)loadRectangleView3 { UIView *rectangleView3 = [[[UIView alloc] init] autorelease]; [rectangleView3 setBackgroundColor:[UIColor greenColor]]; rectangleView3.layer.cornerRadius = 10; rectangleView3.layer.borderColor = [[UIColor blackColor] CGColor]; rectangleView3.layer.borderWidth = 1; [rectangleView3 setFrame:CGRectMake(110, 356, 100, 100)]; [ourScrollView addSubview:rectangleView3]; } |
To your app success!,
Cliff
P.S. Technology is only a small part of your app success. There is the business, sales and marketing that you need to think of too :). Which is why I also provide a bunch of free education on how to succeed on the App Store - http://kerofrog.com :).
Is this the same for sliders? I wanted to do a slider animation with images within the dapp code but to no avail.
UISliders are a separate control, but I assume you are talking about sliding images across similar to how you can do this in the photos app that comes with the iPhone?
In that case, what you want to be turning on is the paging property for UIScrollViews.
eg: myScrollview.paging = YES;
Doing this will mean that the scroll view will stop on multiples of it’s bounds, effectively mimic’ing what you see on the photos app. Have a play with the setting
.
More options can be found in the UIScrollView class reference:
http://developer.apple.com/library/ios/#DOCUMENTATION/UIKit/Reference/UIScrollView_Class/Reference/UIScrollView.html
Hey Cliff, I was wondering if there was anyway to “lock” a SWITCH with/in your table view so when you scroll it moves with your rows. Hope you could help.
Sure, not too difficult to do
.
Find your ‘cellForRowAtIndexPath’ delegate TableView method, and a shortway down you will see an if (cell == nil) { } block.
You can add subviews into the cell here by calling -
UISwitch *switchView = [[UISwitch alloc] init];
// Do other code to setup your UISwitch
[cell.contentView addSubview:switchView];
// Release the switch as content view grabbed a copy
[switchView release];
Important that you do it within that if cell == nil block, otherwise you are gonna get a bunch of duplicate switches being created
.
Im getting the idea now. I messed around with it but still couldn’t get it to show up. Can I email you my samples?
Don’t forget to add the ScrollView to your View
… and to initialize it.
UIScrollView *ourScrollView = [[UIScrollView alloc] init];
// Code for loading subviews in scroll view goes here…
[self addSubview:ourScrollView];
// May or may not need to release scroll view here, depending on how you plan to use it
[ourScrollView release];
Cliff,
followed your tutorial precisely. Builds fine but not running. Black screen on iOS Simulator. Any suggestions what should I look at (xcode v. 4.0.2, targeting iphone 4.3)
thanks !
Hmm… no idea
.
Could be a number of things :/.
Zip up your xcode project folder and send it over and I’ll be able to see the problem
. – cliff@kerofrog.com.au
this is so simple! i would like to know how to make a scrollview horizontal for 50+ images with text display page number “1 of 50″ and bottom of the image scroll view text display the description of the image. Im not looking to do a photoviewer such as three20 or egophotoviewer way since i have my own background, ads(bottom), and home bottom at the very top of the screen. Im planning to have a scroll view with three of those in the middle of the screen. can you give me an example or sample on how to do that?
Thanks!
Ok, this is mainly a pseudo code
.. and I haven’t tested it, but this should give you a good idea regardless.
Basically you are loading the images in a horizontal fashion. So for example (assuming image size of 320 x 460)…
CGFloat xOffset = 0;NSInteger pageNumber = 1;
for (NSString *imageName in imagesArray) {
UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:imageName]];
[imageView setFrame:CGRectMake(xOffset, 0, 320, 460)];
[ourScrollView addSubview:imageView];
[imageView release];
UILabel *pageNumberLabel = [[UILabel alloc] initWithFrame:CGRectMake(xOffset, 420, 320, 40)];
[pageNumberLabel setText:[NSString stringWithFormat:@"%d", pageNumber]];
[pageNumberLabel setTextAlignment:UITextAlignmentCenter];
[ourScrollView addSubview:pageNumberLabel];
[pageNumberLabel release];
xOffset = xOffset + 320;
pageNumber = pageNumber + 1;
}
// Now need to adjust our scrollview content size
[ourScrollView setContentSize:CGSizeMake(xOffset + 320, 460)];
That’s basically it, feel free to customize the dimensions of the objects and to add in description label, etc….
…
After this we can then use the UIScrollView to customize how the images scroll (as well as other properties). Read up the Apple UIScrollView reference for more details:
http://developer.apple.com/library/ios/#DOCUMENTATION/UIKit/Reference/UIScrollView_Class/Reference/UIScrollView.html
Cool, thanks for that!.
I”ll play around with it
sweet!
how would you do this with some text???….I tried using Text View. But when clicking on the view a keyboard pops up (not want im wanting).
For your textview, use:
myTextView.editable = NO;
That will prevent users editing the text (no keyboard), yet still allow scrolling to be enabled.
The other option, if you wanted to use a ScrollView would be to add your UITextView (or UILabel) objects as subviews of your ScrollView.
Very simple page control with sliding images.
Orientation is ok, easy to set manually in Xcode )))
…and please do not forget about page control and orientation, if is technically possible and if you have time-)
Orientation… ouch
. The only problem with orientation is that lets say you select ‘landscape’ orientation. Dapp can’t forcefully change the orientation to landscape, it has to ‘politely’ ask you to re-orient your device. That being said, anything is possible so maybe I can work out a way to get it in anyways 
. Hmm… page control. Could you expand on what type of feature you would want to use the page control for?
No probs. Hopefully this tutorial can help out others too. I reckon I’ve come up with a good way that I could implement UIScrollViews into Dapp.
I’ll update the Planned Updates section.
Just work!!!-)))
Thank you for clear and excellent tutorial!!!
Very quick feedback!