As much as possible, I tried to do everything in Interface Builder, but sadly, some of the logic could not be done in IB.
1. Create a New Xcode Project, choose Single View Application template.
A ViewController will be created for us.
I'm using the latest Xcode up to date, so you may see a longer UIView in our xib file (for iPhone 5 devices). But if you want the old UIView size, you may change it by choosing Retina 3.5 Full Screen on the Simulated Metrics (right panel of the image above).
2. Search for a ScrollView object from the Objects Library (Lower-Right panel) and drag the ScrollView to the UIView (the gray rectangle above).
Leave a small space below the scrollView so that we can put the PageControl on that area.
3. Search for a PageControl object from the Objects Library (Lower-Right panel) and drag it just below our scrollView.
4. Add a <UIScrollViewDelegate> on your Interface header.
//You may put it in your .h file
@interface ViewController : UIViewController <UIScrollViewDelegate>
//OR in your .m file, directly above the @implementation header
@interface ViewController ( ) <UIScrollViewDelegate>
Read about Interface And Implementation topic to know the difference of the two.
5. Add an IBOutlet property for scrollView and pageControl in your interface.
@property (nonatomic, strong) IBOutlet UIScrollView *scrollView;
@property (nonatomic, strong) IBOutlet UIPageControl *pageControl;
And, synthesize these properties in your implementation section.
@synthesize scrollView;
@synthesize pageControl;
6. Connect your IBOutlet properties to the objects in your .xib file.
7. Right-click on your scrollView object in your .xib file. Set the delegate to the File's Owner.
8. Click the scrollView object in your .xib file and only check the Scrolling Enabled and Paging Enabled.
9. Click the pageControl object in your .xib file.
- Set the number of Pages you want. Number of Pages == number of PageControl dots
- Change TintColor according to your preference.
- Tint Color is for the normal color of the pageControl dots
- Current Page is for the currently selected page
The rest of the tutorial will be done programmatically.
//In this tutorial, I added three images to my project, namely, image1, image2, image3.
10. Add an NSArray property to your interface (.h) and synthesize your array to your implementation (.m) file.
@property (nonatomic, strong) NSArray *imageArray; //.h
@synthesize imageArray; //.m
11. In your viewDidLoad, add these codes.
- (void)viewDidLoad
{
[super viewDidLoad];
//Put the names of our image files in our array.
imageArray = [[NSArray alloc] initWithObjects:@"image1.jpg", @"image2.jpg", @"image3.jpg", nil];
for (int i = 0; i < [imageArray count]; i++) {
//We'll create an imageView object in every 'page' of our scrollView.
CGRect frame;
frame.origin.x = self.scrollView.frame.size.width * i;
frame.origin.y = 0;
frame.size = self.scrollView.frame.size;
UIImageView *imageView = [[UIImageView alloc] initWithFrame:frame];
imageView.image = [UIImage imageNamed:[imageArray objectAtIndex:i]];
[self.scrollView addSubview:imageView];
}
//Set the content size of our scrollview according to the total width of our imageView objects.
scrollView.contentSize = CGSizeMake(scrollView.frame.size.width * [imageArray count], scrollView.frame.size.height);
}
11. Implement the scrollViewDidScroll method of ScrollViewDelegate.
#pragma mark - UIScrollView Delegate
- (void)scrollViewDidScroll:(UIScrollView *)sender
{
// Update the page when more than 50% of the previous/next page is visible
CGFloat pageWidth = self.scrollView.frame.size.width;
int page = floor((self.scrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
self.pageControl.currentPage = page;
}
12. Hit Run and you're done!
