Add UIScrollView with Paging to Existing UIViewController

raginggoat picture raginggoat · Aug 16, 2013 · Viewed 11.3k times · Source

I'm wanting to add a UIScrollView with paging to go through different views from my existing view controller which is the root view of my app. I also have tab bar and navigation bar controllers along with it. Can I add a scroll view to this view controller to accomplish what I'm wanting, and if so, can someone point me in the right direction on how to go about it?

Here is my view controller.

#import "KFBViewController.h"
#import "ListViewController.h"
#import "ActionAlertsViewController.h"
#import "MarketUpdatesViewController.h"
#import "AgStoriesViewController.h"
#import "KFBNewsViewController.h"
#import "MemberBenefits.h"
#import "SocialNetworks.h"
#import "WebViewController.h"
#import "YouTubeView.h"
#import "KFBFlickrViewController.h"
#import "RSFM.h"
#import "UAPush.h"
#import "TUSafariActivity.h"

@interface KFBViewController ()
{

}

@end

@implementation KFBViewController

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self)
    {
        self.title = NSLocalizedString(@"Home", @"Home");
        self.tabBarItem.image = [UIImage imageNamed:@"home"];
        self.navigationController.delegate = self;
    }
    return self;
}

- (void) showMenu
{
    NSURL *urlToShare = [NSURL URLWithString:@"https://itunes.apple.com/us/app/kentucky-farm-bureau/id580530986?mt=8"];
    NSArray *activityItems = @[urlToShare];
    // TUSafariActivity *activity = [[TUSafariActivity alloc] init];

    UIActivityViewController *activityVC = [[UIActivityViewController alloc]initWithActivityItems:activityItems applicationActivities:nil];
    activityVC.excludedActivityTypes = @[UIActivityTypePrint, UIActivityTypeAssignToContact, UIActivityTypePostToWeibo, UIActivityTypeSaveToCameraRoll];

    [self presentViewController:activityVC animated:TRUE completion:nil];
}

- (IBAction)gotoSecondView
{
    YouTubeView *youTubeView = [[YouTubeView alloc] initWithNibName:@"YouTubeView" bundle:nil];
    youTubeView.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
    [self presentViewController:youTubeView animated:YES completion:nil];
}
- (IBAction)gotoPublicAffairs
{
    ListViewController *publicAffairs = [[ListViewController alloc]initWithStyle:UITableViewStylePlain];
    WebViewController *wvc = [[WebViewController alloc]init];
    [publicAffairs setWebViewController:wvc];
    publicAffairs.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
    [self.navigationController pushViewController:publicAffairs animated:YES];
}

- (IBAction)gotoActionAlerts
{
    ActionAlertsViewController *actionAlerts = [[ActionAlertsViewController alloc]initWithStyle:UITableViewStylePlain];
    WebViewController *wvc = [[WebViewController alloc]init];
    [actionAlerts setWebViewController:wvc];
    actionAlerts.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
    [self.navigationController pushViewController:actionAlerts animated:YES];
}

- (IBAction)gotoMarketUpdates
{
    MarketUpdatesViewController *marketUpdates = [[MarketUpdatesViewController alloc]initWithStyle:UITableViewStylePlain];
    WebViewController *wvc = [[WebViewController alloc]init];
    [marketUpdates setWebViewController:wvc];
    marketUpdates.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
    [self.navigationController pushViewController:marketUpdates animated:YES];
}

- (IBAction)gotoAgStories
{
    AgStoriesViewController *agStories = [[AgStoriesViewController alloc]initWithStyle:UITableViewStylePlain];
    WebViewController *wvc = [[WebViewController alloc]init];
    [agStories setWebViewController:wvc];
    agStories.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
    [self.navigationController pushViewController:agStories animated:YES];
}

- (IBAction)gotoKFBNews
{
    KFBNewsViewController *kfbNews = [[KFBNewsViewController alloc]initWithStyle:UITableViewStylePlain];
    WebViewController *wvc = [[WebViewController alloc]init];
    [kfbNews setWebViewController:wvc];
    kfbNews.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
    [self.navigationController pushViewController:kfbNews animated:YES];
}

- (IBAction)gotoMemberBenefits
{
    MemberBenefits *memberBenefits = [[MemberBenefits alloc] initWithNibName:nil bundle:nil];
    memberBenefits.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
    [self.navigationController pushViewController:memberBenefits animated:YES];
}

-(IBAction)gotoPhotos:(id)sender
{
    KFBFlickrViewController *photosView = [[KFBFlickrViewController alloc] initWithNibName:@"KFBFlickrViewController" bundle:nil];
    [self.navigationController pushViewController:photosView animated:YES];
}

- (IBAction)gotoSocialNetworks
{
    SocialNetworks *socialNetworks = [[SocialNetworks alloc] initWithNibName:nil bundle:nil];
    socialNetworks.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
    [self.navigationController pushViewController:socialNetworks animated:YES];
}

- (IBAction)gotoFarmMarkets
{
    RSFM *rsfm = [[RSFM alloc] initWithNibName:nil bundle:nil];
    rsfm.modalTransitionStyle = UIModalTransitionStyleFlipHorizontal;
    [self.navigationController pushViewController:rsfm animated:YES];
}

- (IBAction)settingsButtonPressed:(id)sender
{
    [UAPush openApnsSettings:self animated:YES];
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    self.title = @"Home";

    UIBarButtonItem *settingsButton = [[UIBarButtonItem alloc] initWithTitle:@"\u2699" style:UIBarButtonItemStyleBordered target:self action:@selector(settingsButtonPressed:)];
    [settingsButton setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIFont boldSystemFontOfSize:24], UITextAttributeFont,nil] forState:UIControlStateNormal];
    self.navigationItem.leftBarButtonItem = settingsButton;

    UIBarButtonItem *systemAction = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:@selector(showMenu)];
    self.navigationItem.rightBarButtonItem = systemAction;
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

-(NSUInteger)supportedInterfaceOrientations
{
    return UIInterfaceOrientationMaskPortrait;
}

@end

Answer

hgwhittle picture hgwhittle · Aug 16, 2013

This works really well for me:

Declare a property for your UIScrollView, and set your ViewController as a UIScrollViewDelegate

@interface ViewController : UIViewController<UIScrollViewDelegate>

@property (strong, nonatomic) UIScrollView *theScrollView;

@end

**Note that I'm setting up my UIScrollView with code, but it can easily be done with a XIB.

In viewDidLoad: of your ViewController

    self.theScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 50, self.view.frame.size.width, 300)];
    self.theScrollView.delegate = self;
    self.theScrollView.pagingEnabled = YES;
    self.theScrollView.showsHorizontalScrollIndicator = NO;     
    self.theScrollView.showsVerticalScrollIndicator = NO;
    [self.view addSubview:self.theScrollView];

    NSArray *viewArray = [NSArray arrayWithObjects://your UIViews];

    for(int i=0; i<viewArray.count; i++)
    {
        CGRect frame;
        frame.origin.x = self.theScrollView.frame.size.width * i;
        frame.origin.y = 0;
        frame.size = self.theScrollView.frame.size;

        UIView *subview = [[UIView alloc] initWithFrame:frame];
        [subview addSubview:[viewArray objectAtIndex:i]];
        [self.theScrollView addSubview:subview];
    }

    self.theScrollView.contentSize = CGSizeMake(self.theScrollView.frame.size.width * viewArray.count, self.theScrollView.frame.size.height);

Most paging scrollViews also have a UIPageControl associated with it. To do that, override this UIScrollViewDelegate method:

- (void)scrollViewDidScroll:(UIScrollView *)sender {
    CGFloat pageWidth = self.theScrollView.frame.size.width;
    int page = floor((self.theScrollView.contentOffset.x - pageWidth / 2) / pageWidth) + 1;
    self.thePageControl.currentPage = page;
}