Creating ‘Pulse’ style scrolling – Horizontally scrolling UITableView as a subview of UITableViewCell

‘Pulse’ is a free news reading application for iPhone, iPad, and Android by Alphonso Labs Inc. I was introduced to Pulse through an iTunes U lecture from Stanford University “10 Hacks to go from Idea to #1 App”. In that lecture, the developers have mentioned that they have used horizontal UITableViews to create the Interface. Intrigued as I was, I had to try it myself and you should also.

Pulse has a unique UI that is as useful as it is pretty:

Each row contain feed from a single source and is horizontally scrollable. The visual representation is enough to get the gist of overall news and read only the stories that seem interesting or important. While this is a unique and efficient news reading application for the users, its also appealing to the developers (at least it was to me.)

So, here is a tutorial for creating the same interface (scree on the left):

 Things We Need

1. A UITableView whose cells have other UITableViews as subviews. You might find this tutorial helpful.

2. A bunch of images.

3. A taste for uniqueness. Most Important!

Lets Start

What we’re going to do is rotate our tableview that is the subview by -90 degrees. Then we are going to add images to each of its cells and rotate those images by 90 degrees.

Adjusting Sizes in IB

To start with, lets adjust the sizes a little bit. Open TableViewCell.xib (our UITableViewCell subclass from the above mentioned tutorial) and change the sizes as following:

1. Make the cell’s ‘View’ 320×220 for iPhone or 768×220 for iPad.

2. Make the UITableView 220×768. (Yes, the width and height is opposite to that of the cell because we’re going to rotate it.)

Adding and Initializing Required Properties

In our UITableViewController subclass, we need an array of arrays. Each of its object (i.e. an array) is going to contain a collection of objects that we want to be displayed in our horizontal tableview, in this case NSString objects having names of images. Lets declare those in our header file:

#import <UIKit/UIKit.h>

@class TableViewCell;

@interface TableViewController : UIViewController <UITableViewDataSource, UITableViewDelegate> {
      UITableView *tableView;
      TableViewCell *tableViewCell;
}

@property (nonatomic, retain) IBOutlet UITableView *tableView;
@property (nonatomic, retain) IBOutlet TableViewCell *tableViewCell;
@property (nonatomic, retain) NSArray *titlesArray;
@property (nonatomic, retain) NSArray *peopleArray;
@property (nonatomic, retain) NSArray *thingsArray;
@property (nonatomic, retain) NSArray *fruitsArray;
@property (nonatomic, retain) NSArray *arrays;

@end

and initialize in the implementation file:

- (void)viewDidLoad {
      [super viewDidLoad];

      titlesArray = [[NSArray alloc] initWithObjects:@"People", @"Things", @"Fruits", nil];
      peopleArray = [[NSArray alloc] initWithObjects:@"Gardener.png", @"Plumber.png",
                    @"BusinessWoman.png", @"BusinessMan.png", @"Chef.png", @"Doctor.png", nil];
      thingsArray = [[NSArray alloc] initWithObjects:@"StopWatch.png", @"TrashCan.png",
                    @"Key.png", @"Telephone.png", @"ChalkBoard.png", @"Bucket.png", nil];
      fruitsArray = [[NSArray alloc] initWithObjects:@"Pineapple.png", @"Orange.png",
                    @"Apple.png", nil];

      arrays = [[NSArray alloc] initWithObjects:peopleArray, thingsArray, fruitsArray, nil];
}

In our UITableViewCell subclass, we need an array to hold the content that is going to be displayed in its tableview. Lets declare that in its header:

#import <UIKit/UIKit.h>

@interface TableViewCell : UITableViewCell <UITableViewDataSource, UITableViewDelegate> {
      UITableView *horizontalTableView;
      NSArray *contentArray;
}

@property (nonatomic, retain) IBOutlet UITableView *horizontalTableView;
@property (nonatomic, retain) NSArray *contentArray;

@end

It will later be initialized in tableView:cellForRowAtIndexPath in the UITableViewController subclass.

Altering UITableViewDelegate and DataSource

We implemented UITableViewDelegate and DataSource for both our UITableViewController subclass and UITableViewCell subclass earlier. Now, we just need to change them a little bit.

In UITableViewController subclass, the datasource method tableView:cellForRowAtIndexPath: will be (Please also have a look at the second update):

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
      static NSString *CellIdentifier = @"Cell";
      TableViewCell *cell = (TableViewCell*)[self.tableView 
                         dequeueReusableCellWithIdentifier:CellIdentifier];

      if (cell == nil) {
           [[NSBundle mainBundle] loadNibNamed:@"TableViewCell" owner:self options:nil];

           CGAffineTransform rotateTable = CGAffineTransformMakeRotation(-M_PI_2);
           tableViewCell.horizontalTableView.transform = rotateTable;
           tableViewCell.horizontalTableView.frame = CGRectMake(0, 0, 
                         tableViewCell.horizontalTableView.frame.size.width,
                         tableViewCell.horizontalTableView.frame.size.height);

           tableViewCell.contentArray = [arrays objectAtIndex:indexPath.section];
           tableViewCell.horizontalTableView.allowsSelection = NO;

           cell = tableViewCell;
           self.tableViewCell = nil;
      }

      return cell;
}

Note: horizontalTableView is the subview of TableViewCell. In the preparatory tutorial it was named tableViewInsideCell.

Since we are separating the content through sections rather than rows, there are going to be more than one sections each having one row:

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
      // Return the number of sections.
      return [arrays count];

} 
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
      return 1;
}

- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section {
      return [titlesArray objectAtIndex:section];
}

Also change the height of each row to 220:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
      return 220;
}

In UITableViewCell subclass, tableView:cellForRowAtIndexPath: will be:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
      static NSString *CellIdentifier = @"Cell";
      UITableViewCell *cell = [self.horizontalTableView 
                           dequeueReusableCellWithIdentifier:CellIdentifier];

      if (cell == nil) {
           cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle 
                              reuseIdentifier:CellIdentifier] autorelease];
      }

      //Since we are reusing the cells, old image view needs to be removed form the cell
      for (UIImageView *view in cell.subviews) {
            [view removeFromSuperview];
      }

      UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, 200, 200)];
      imageView.image = [UIImage imageNamed:[contentArray objectAtIndex:indexPath.row]];

      //Use UIContentModeScaleAspectFit or other depending upon the size of your images, 
                    mine were small but not proportional so...    
      imageView.contentMode = UIViewContentModeCenter;
      CGAffineTransform rotateImage = CGAffineTransformMakeRotation(M_PI_2);
      imageView.transform = rotateImage;

      [cell addSubview:imageView];
      [imageView release];

      return cell;
}

Adjust the row height here also:

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
      return 220;
}

and done!

Here is what the result would look like:

Again, its raw, certainly not as pretty as Pulse, but it can be (rather should be) refined before using in an actual application. If it helped, you’re welcome 🙂

Any improvements or suggestions are most welcome in the comments sections. Do subscribe for more unique stuff.

Update

Borut pointed out that our custom cells with UITableView inside them are not being reused. If we study the code carefully, we will find out that we are not assigning any reuseIdentifier because we are not using the default -initWithStyle:reuseIdentifier method for creating cells. The reuseIdentifier property of UITableViewCell is readonly , we cannot set it. A workaround is to create a getter method in our UITableViewCell subclass for the reuseIdentifier and use the same string being used to dequeue the reusable cells. In our case, this should do:

- (NSString *) reuseIdentifier {
    return @"Cell";
}

Note that in this tutorial we are using @”Cell” for dequeuing cells in both UITableViewCell subclass and UITableViewController subclass. This needs to return the one we are using in the UITableViewCOntroller subclass because we want to reuse this cell there.

Update 2

Borut wanted to update the content dynamically and was having problems with the current version. Like I said earlier, this is a very limited implementation and can be improved. We improved it a little more. If you want to dynamically add remove content, change the ‘arrays’ ivar type to NSMutableArray and update the array. Now we need to tell our two tableviews to reload, not one, but two tableviews. First call reload on the parent tableView after editing the array, example:

[arrays removeLastObject];
[self.tableView reloadData];

Next we change our cellForRowAtIndexPath of parent tableView to add a method call to reload the child tableView:

-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell";
    TableViewCell *cell = (TableViewCell*)[self.tableView 
                          dequeueReusableCellWithIdentifier:CellIdentifier];
	if (cell == nil) { 
        [[NSBundle mainBundle] loadNibNamed:@"TableViewCell" owner:self options:nil];
        cell = tableViewCell;
		self.tableViewCell = nil;

    //changed the location of the closing bracket	
    }   
	
    CGAffineTransform rotateTable = CGAffineTransformMakeRotation(-M_PI_2);
    cell.horizontalTableView.transform = rotateTable;
    cell.horizontalTableView.frame = CGRectMake(0, 0, cell.horizontalTableView.frame.size.width, 
                                     cell.horizontalTableView.frame.size.height);
    
    cell.contentArray = [arrays objectAtIndex:indexPath.section];
    
    //addition
    [cell reloadContent];
    cell.horizontalTableView.allowsSelection = YES;
    
    return cell;
}

Now also add the reloadContent method to the UITableViewCell subclass:

- (void)reloadContent {
    [self.horizontalTableView reloadData];
}

Update 3

Thanks a lot for your appreciation. Since there were a lot of requests for code. I’ve uploaded it to dropbox. Here is the link:
http://dl.dropbox.com/u/17653793/Pulse.zip

---