Adding a multiple images to a UIScrollView (iOS)

This is the code that I use when setting up a UIScrollView to contain multiple images that can be scrolled through. I add this code in the viewDidLoad or viewWillAppear methods and then set the numberOfViews to the number of images I want to display. This will also scale the images to fit the size of the screen using an aspect fit scaling. The example code loads images named “image_1”, “image_2” etc.

-(void) setupScrollView {
    //add the scrollview to the view
   self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 
                                           self.view.frame.size.width, 
                                           self.view.frame.size.height)];
   self.scrollView.pagingEnabled = YES;
   [self.scrollView setAlwaysBounceVertical:NO];
    //setup internal views
   NSInteger numberOfViews = 3;
   for (int i = 0; i < numberOfViews; i++) {
      CGFloat xOrigin = i * self.view.frame.size.width;
      UIImageView *image = [[UIImageView alloc] initWithFrame:
                                                CGRectMake(xOrigin, 0, 
                                                self.view.frame.size.width, 
                                                self.view.frame.size.height)];
      image.image = [UIImage imageNamed:[NSString stringWithFormat:
                                        @"image_%d", i+1]];
      image.contentMode = UIViewContentModeScaleAspectFit;
      [self.scrollView addSubview:image];
    }
    //set the scroll view content size
   self.scrollView.contentSize = CGSizeMake(self.view.frame.size.width * 
                                            numberOfViews, 
                                            self.view.frame.size.height);
    //add the scrollview to this view
   [self.view addSubview:self.scrollView];
}

Gradient background for UIView in iOS

One of the pieces of code I find myself re-using constantly is creating a gradient background for a UIView in iOS. This example will show two examples of how to create a simple gradient background.

First, in Xcode, create a new Single View iOS application

Then create a new file File > New > New File and call this file “BackgroundLayer”, this will create BackgroundLayer.h and BackgroundLayer.m automatically for you.

Then copy the following code into the BackgroundLayer.h header file

#import <Foundation/Foundation.h>
#import <QuartzCore/QuartzCore.h>

@interface BackgroundLayer : NSObject

+(CAGradientLayer*) greyGradient;
+(CAGradientLayer*) blueGradient;

@end

Then copy the following code into the BackgroundLayer.m file

#import "BackgroundLayer.h"

@implementation BackgroundLayer

//Metallic grey gradient background
+ (CAGradientLayer*) greyGradient {

    UIColor *colorOne = [UIColor colorWithWhite:0.9 alpha:1.0];
    UIColor *colorTwo = [UIColor colorWithHue:0.625 saturation:0.0 brightness:0.85 alpha:1.0];
    UIColor *colorThree     = [UIColor colorWithHue:0.625 saturation:0.0 brightness:0.7 alpha:1.0];
    UIColor *colorFour = [UIColor colorWithHue:0.625 saturation:0.0 brightness:0.4 alpha:1.0];

    NSArray *colors =  [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, colorThree.CGColor, colorFour.CGColor, nil];

    NSNumber *stopOne = [NSNumber numberWithFloat:0.0];
    NSNumber *stopTwo = [NSNumber numberWithFloat:0.02];
    NSNumber *stopThree     = [NSNumber numberWithFloat:0.99];
    NSNumber *stopFour = [NSNumber numberWithFloat:1.0];

    NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, stopThree, stopFour, nil];
    CAGradientLayer *headerLayer = [CAGradientLayer layer];
    headerLayer.colors = colors;
    headerLayer.locations = locations;

    return headerLayer;

}

//Blue gradient background
+ (CAGradientLayer*) blueGradient {

    UIColor *colorOne = [UIColor colorWithRed:(120/255.0) green:(135/255.0) blue:(150/255.0) alpha:1.0];
    UIColor *colorTwo = [UIColor colorWithRed:(57/255.0)  green:(79/255.0)  blue:(96/255.0)  alpha:1.0];

    NSArray *colors = [NSArray arrayWithObjects:(id)colorOne.CGColor, colorTwo.CGColor, nil];
    NSNumber *stopOne = [NSNumber numberWithFloat:0.0];
    NSNumber *stopTwo = [NSNumber numberWithFloat:1.0];

    NSArray *locations = [NSArray arrayWithObjects:stopOne, stopTwo, nil];

    CAGradientLayer *headerLayer = [CAGradientLayer layer];
    headerLayer.colors = colors;
    headerLayer.locations = locations;

    return headerLayer;

}

@end

Then finally, in your ViewController #import “BackgroundLayer.h” and add the following code to the viewWillAppear method:

CAGradientLayer *bgLayer = [BackgroundLayer blueGradient];
bgLayer.frame = self.view.bounds;
[self.view.layer insertSublayer:bgLayer atIndex:0];

And don’t forget to add the QuartzCore framework to your project.

Run the project and you get a result like this:

Click here to download the project

Edit: Thanks to moi in the comments below, add the following code to your view controller so that the CALayer rotates with the view

- (void)willAnimateRotationToInterfaceOrientation:(UIInterfaceOrientation)toInterfaceOrientation duration:(NSTimeInterval)duration
{
    // resize your layers based on the view’s new bounds
    [[[self.subview.layer sublayers] objectAtIndex:0] setFrame:self.subview.bounds];
}