iOS Splitscreen Collection Views with Storyboard

A quick tutorial on how to embed two collection views into a single controller. It will look like the image below. It can be extended to use other types of views.

iOS Simulator Screen shot 2013-02-01 5.04.41 AM

  1. Create a simple view application.
  2. In storyboard, Editor>Embed In>Navigation Controller on the default view.
  3. Add two ‘Collection View’s (not Collection View Controller)
  4. Differentiate one with tag ‘1’.
  5. Give the CollectionViewCells reusable identifiers and create classes for them.
  6. Add imageViews and link them.
  7. Right-click on the Collection Views and attach datasource and delegate to the parent view controller.
  8. Implement the functions in ViewController.m

It should look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
//
//  ViewController.m
//  splitscreen2
//
//  Created by Davy Chiu on 2013-02-01.
//  Copyright (c) 2013 Davy Chiu. All rights reserved.
//

#import "ViewController.h"
#import "TopCell.h"
#import "BottomCell.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

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

- (NSInteger)collectionView:(UICollectionView *)view numberOfItemsInSection:(NSInteger)section
{
    if (view.tag == 0) {
        return 1;
    } else {
        return 9;
    }
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)cv cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    if (cv.tag == 0) {
        TopCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@"TopCell" forIndexPath:indexPath];
   
        cell.imageView.image = [UIImage imageNamed:[[NSString stringWithFormat:@"female%d",indexPath.row]stringByAppendingString:@".png"]];
   
        return cell;
    } else {
        BottomCell *cell = [cv dequeueReusableCellWithReuseIdentifier:@"BottomCell" forIndexPath:indexPath];
       
        cell.imageView.image = [UIImage imageNamed:[[NSString stringWithFormat:@"female%d",indexPath.row]stringByAppendingString:@".png"]];
       
        return cell;
    }
}


@end
This entry was posted in Uncategorized. Bookmark the permalink.

2 Responses to iOS Splitscreen Collection Views with Storyboard

  1. rick says:

    Dear Sir:
    I try to do with your youTube same as the “Subviews Collection View in Storyboard” demo program.
    But when I run it, it crashed.
    Can you give me your source?
    Please .
    Thank you your help.

    Rick

Leave a Reply to rick Cancel reply

Your email address will not be published. Required fields are marked *