Page Control for Switching Between Views

This is a tutorial request from Ze Kitez.

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!

Switching to Different Views with UIViewController

Now that we know how to make our own MainWindow.xib, it's about time to know how to switch from different views (with UIViewController).
If you have not read the tutorial on how to make our own MainWindow.xib, please read this first:
http://iosmadesimple.blogspot.com/2012/08/creating-our-own-mainwindowxib-for.html

1. If you still have your xcodeproj when we created MainWindow.xib, please use it before we proceed. Else, do follow the steps from the given link above before you proceed.

2. Let's add a new file, UIViewController subclass, name it FirstViewController.

3. In FirstViewController.h, I "prepared" these lines of code.  Create a UIButton outlet, and an IBAction method for that button.

4. In FirstViewController.m, synthesize your button, and implement the IBAction method we declared in .h file, but let us leave it blank first.

5. In FirstViewController.xib, I dragged a label and button object to the view (white rectangle). Since we created an IBOutlet button property in our .h file, it is expected that we can see our button variable when we 'right-click' the File's Owner (yellowish box).

6. Did you see that circle at the right side of secondViewButton (our button variable name)? We have to drag that to the UIButton object found in our View. Same goes with our IBAction method, we named that function goToSecondView, drag that circle to the button in our View. That means that if the user taps that button in our View, it will trigger an event, whatever happens after tapping that button depends on our code for goToSecondView function.

7. Open AppDelegate.h, import FirstViewController file, and create an outlet variable of FirstViewController.

8. Synthesize your FirstViewController variable, and add the line self.window.rootViewController = firstVC; 

This line means that the very first view that will be shown to the user is the view we created in our FirstViewController class.

9. Go to MainWindow.xib, drag a ViewController object to the Placeholder/Objects Panel. Go to the Identity Inspector of that ViewController object and change its class to FirstViewController.

10. Right-click AppDelegate object (yellow box), look for the variable we created in our .h file, in this case, its named firstVC, and connect it to the ViewController object we dragged awhile ago.

11. Hit "Run" and you should see this in your simulator. This view is from our FirstViewController class, right? If you click that button, nothing happens yet because we left the method (goToSecondView) blank.

If you see this, it means you have successfully linked the FirstViewController to your AppDelegate Class.

12. Create another ViewController subclass, name it SecondViewController. Add two buttons, "back" and "goToThirdViewButton." Prepare the IBAction methods of the two buttons (IBAction)goBack and (IBAction)goToThirdView.

13. Synthesize and implement the functions in SecondViewController.m, but let's leave it blank first.

14. Drag a Label and two Round Rect Button objects to the View. Make the necessary connections needed.

15. Open FirstViewController.m, import SecondViewController and add these lines of code to our (IBAction)goToSecondView method.

SecondViewController *secondVC = [[SecondViewController alloc] init];

[self presentModalViewController:secondVC animated:YES];

16. Open SecondViewController.m, add this line of code for the "back" button method. This code dismisses the secondViewController and shows the FirstViewController.

If you want to go to another view, let's say thirdView, do the same thing for the SecondViewController, create a new class, add a button "back" and implement it. Add the same lines of code from Step 15 to your (IBAction)goToThirdView method.

Run and you should be able to go to different views. :D