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

Answer 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.

Answer 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.

Answer 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

Answer 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.

Answer 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)'.

Answer 6

I wrote a simple UIScrollView subclass that like UITableView implement cell reusability, the projet MMHorizontalListView is on gitHub, there is also a test project, so you can see how to use it with an example, it works also with old iOS versions like 4.x (probably even older...)

Answer 7

There is a simple brilliant trick to get a UITableView to do both vertical and horizontal scroll perfectly.

You can do it both with and without autolayout - I will explain it with autolayout.

On you UITableView have a width constraint and no tailing alignment constraint. The bind this width constraint with an IBOutlet and in your controller set the following to properties on the table view.

let contentWidth = 1000 // you calculate that
tableViewWidthConstraint.constant = contentWidth
tableView.contentSize.width = (contentWidth * 2) - UIScreen.main.bounds.size.width

The tableview needs to be full width to render all the content in the horizontal direction, and the we plays with the content size compared with screen size that does the trick.

The following locations of them below works but you can try the in different steps in the lifecycle:

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    tableViewWidthConstraint.constant = contentWidth
}

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)

    tableView.contentSize.width = (contentWidth * 2) - UIScreen.main.bounds.size.width
}

// and this is needed to support rotation:
override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) {
        coordinator.animate(alongsideTransition: { (UIViewControllerTransitionCoordinatorContext) -> Void in
            self.tableView.contentSize.width = (contentWidth * 2) - UIScreen.main.bounds.size.width
        }, completion: nil)
    }
    super.viewWillTransition(to: size, with: coordinator)
}