Horizontal UITableView

Question

I want implement a layout in my ipad application that has a uitable view that scrolls left and right rather then up and down :

So rather than

row 1 row 2 row 3 ( scrolling vertically ) It would be : row 1, row2, row 3 (scrolling horizontally )

I've seen that UItableView is designed to only do vertical scrolling so doing a transform does not give the desired effect. Is there a standard way to do this taking advantage of a datasource provider like uitableview provides?
I basically want to do somthing similar to what the BBC News reader app on the Ipad does with the list of stories to select from.

Thanks

Solution 1

I have published sample code that demonstrates one approach for implementing horizontally scrolling table views using transforms. It's called EasyTableView and provides the same interface for both vertically and horizontally scrolling table views.

Solution 2

This is the method that I use:

1) Implement you own subclass of UITableView and override its initWithCoder: method as shown below:

- (id)initWithCoder:(NSCoder *)aDecoder
{
    assert([aDecoder isKindOfClass:[NSCoder class]]);

    self = [super initWithCoder:aDecoder];

    if (self) {

        const CGFloat k90DegreesCounterClockwiseAngle = (CGFloat) -(90 * M_PI / 180.0);

        CGRect frame = self.frame;
        self.transform = CGAffineTransformRotate(CGAffineTransformIdentity, k90DegreesCounterClockwiseAngle);
        self.frame = frame;    

    }

    assert(self);
    return self;
}

2) Create your own UITableViewCell class and override initWithCoder: again:

- (id)initWithCoder:(NSCoder *)aDecoder
{
    assert([aDecoder isKindOfClass:[NSCoder class]]);

    self = [super initWithCoder:aDecoder];

    if (self) {

        const CGFloat k90DegreesClockwiseAngle = (CGFloat) (90 * M_PI / 180.0);

        self.transform = CGAffineTransformRotate(CGAffineTransformIdentity, k90DegreesClockwiseAngle);
    }

    assert(self);
    return self;
}

3) Now you can create a UITableView element in IB and set its class to be "MyHorizontalTableView" in the identity inspector.

4) Create your UITableViewCell element in IB and set its class to be "MyHorizontalTableViewCell" in the identity inspector.

And that's it.

This would work by overriding other initializers too in case you prefer not to use IB to instantiate your table view or cell.

A sample project that I built around this concept can be found in GitHub.

Solution 3

If you can restrict your app to only iOS 6 and upwards, the best way to do this is with UICollectionView.

If you need to support iOS 4/5, then try one of the opensource reimplementations of UICollectionView, eg. PSTCollectionView

Solution 4

This question has been answered by apple. Scrolling example by apple

Demonstrates how to implement two different style UIScrollViews. The first scroller contains multiple images, showing how to layout large content with multiple chunks of data (in our case 5 separate UIImageViews).

this works for iPad also.

Solution 5

For now you have to use UIScrollView and set scrolling to horizontal only. As for the data you need handle the dequeing and optimizations yourself. If you do not expect more than a dozen or so objects then you can probably skip it, but if they are data intensive try to implement a similar data sourcing and loading as UITableView uses. Note that the BBC News reader app also uses paging enabled to scroll by each 'page (4 or so news icons)'.

View more solutions

Comments

[Maurice Raguse]

nice but there is a Problem.... If I try to resize the table while running the App the cells won't resize vertical. The horizontal size is not a problem, because there is the heightForRow Methode from the delegate... but there is no one for the with... and after the transformation the autoresize wont work :-(

[Omer Obaid]

i need to do all these 4 steps?

[diegoreymendez]

@OmerObaid - there are other ways to achieve the same result. You could theoretically override other initializers instead. This is just one way to do it.

[Colas]

Can you give me some hints (links or code) on how to do this. I guess I have to play with UICollectionViewLayout. Any help appreciated. Thanks!

[JosephH]

You're correct; you'd use a Grid Layout with a single row.

[Colas]

How can I create a single-row Grid Layout? So far, I use a trick: I ask for very large minimal space between two elements.

[Maulik]

@diegoreymendez : the transforming calculation didn't worked on iOS 8.1.3 (iPad)

[tounaobun]

There is a white line on the bottom. Set tableView.separatorStyle = UITableViewCellSeparatorStyleNone; would remove it.

[ULazdins]

Dead resource link :(

[Saqib Saud]

that sample code was way too old. you can still access it web-beta.archive.org/web/20100805074840/http://…

[viral]

Excellent Solution. Neat & Clean. +1

[Thripthi Haridas]

tried above code, but tableview is not scrolling horizontally. tableview width has increased but not scrolling. Please help

[Joshua Wolff]

@Raegtime To solve this, set constraints for the height within the UITableViewCell. I had the same problem and solved it with constraints

[Joshua Wolff]

self.heightAnchor.constraint(equalToConstant: 200).isActive = true changes the "height" of the cell, which is really the width

[Joshua Wolff]

Overall though, would like to mention that having used this, it works almost as good as a solution built-in by Apple, if there were one