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 ro

Answer 1

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 2

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 3

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 4

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)
}

Answer 5

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 6

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