1

横に長いUITableViewを考えています。

  1. Cellは無限に増える可能性がある
  2. UITableView(UIScrollView)のオリジナルの挙動(慣性スクロールや、バウンス)はそのまま残したい
  3. 縦横スクロールは1タップで同時に行いたい
  4. できるだけカスタムクラスは作りたくない

という要件があります。

  • オリジナルのViewを作ってそれをScrollViewに貼り付けるという方法では、1. の要件を満たすのが複雑になります。
  • ScrollViewの上にTableViewを貼り付けて、縦ScrollはTableViewに、横ScrollはScrollViewにそれぞれ担当させると、一度に一方向へしかScrollが効かず、3. が満たされません。
  • TableViewCellの中にScrollViewまたはCollectionViewを乗せても、3. が満たされませんでした。
  • ScrollView上にTableViewを乗せそれぞれのUser Interaction EnableをNOにし、さらにその上にPanGestureを設定したUIViewを乗せて、UIViewで感知した縦横のPanGestureをScrollView、TableViewそれぞれに伝達しContentOffsetを操作しましたが、2. が満たされませんでした。

UITableViewの横スクロール問題はよく話題になるかとは思いますが、最善の(最も簡単で、オリジナルUIを継承しつつ、デバイス不可も少ない)方法はどのようなものなのでしょうか。
もし成功されている方がいらっしゃいましたら、アドバイスをお願いいたします。


回答してくださった皆さんのおかげで解決することができました。
結論としては、UICollectionViewを使用し、UICollectionViewLayoutを自作することですべての要件を満たすことができました。
以下、UICollectionViewLayoutのobjcのコードを転載しておきます。

#import "BidirectionalCollectionLayout.h" // UICollectionViewLayoutを継承

@implementation BidirectionalCollectionLayout {
    NSInteger cellCount;
    CGSize cellSize;
}

- (void)prepareLayout
{
    [super prepareLayout];
    cellCount = [self.collectionView numberOfItemsInSection:0];
    cellSize = CGSizeMake(2000.0f, 66.0f);
}

- (CGSize)collectionViewContentSize {
    return CGSizeMake(cellSize.width, cellCount * cellSize.height);
}

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *indexPathsArray = [self indexPathsForItemsInRect:rect];
    NSMutableArray *array = [NSMutableArray array];
    for (NSIndexPath *indexPath in indexPathsArray) {
        [array addObject:[self layoutAttributesForItemAtIndexPath:indexPath]];
    }
    return array;
}

- (NSArray *)indexPathsForItemsInRect:(CGRect)rect
{
    NSMutableArray *array = [NSMutableArray array];

    NSInteger minRow = MAX(0, (NSInteger)floor(rect.origin.y / cellSize.height));
    NSInteger maxRow = MIN(cellCount, (NSInteger)ceil((rect.origin.y + rect.size.height) / cellSize.height));
    for (NSInteger i = minRow; i < maxRow; i++) {
        [array addObject:[NSIndexPath indexPathForItem:i inSection:0]];
    }
    return array;
}

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    CGFloat offsetY = indexPath.item * cellSize.height;
    CGRect frame = CGRectMake(0, offsetY, cellSize.width, cellSize.height);
    attributes.frame = frame;
    return attributes;
}

@end
1
  • 「3、縦横スクロールは1タップで同時に行いたい」は斜め方向のスクロールか、あるいは地図アプリの様な自由なスクロールがしたいということでしょうか?そうだとすると「オリジナルのViewを作ってそれをScrollViewに貼り付ける」以外では難しそうに思います。そういう機能を持ったOSSライブラリを探してみるのもいいかもしれませんね。 Commented 2017年12月4日 6:43

3 件の回答 3

1

上記コメントで書きましたが、UITableViewを使って実現するのはなかなか難しいのではないかと思います。

「ScrollView上にTableViewを乗せ〜」で、かつそのViewへのタッチイベントを全て補足してそれぞれのビューをスクロールさせる方法なども一応考えられますが、UITableViewやUIScrollViewと同じ手触りのスクロールを実現するには相応の苦労が伴うと思います。

他の方法として、近い機能を提供するOSSライブラリを利用することが考えられます。

例えば、以下のライブラリはiOS上にMSエクセルの様なスプレッドシートを表示することができます。

kishikawakatsumi/SpreadsheetView
https://github.com/kishikawakatsumi/SpreadsheetView

UITableViewとは勝手が違う部分もあるでしょうが、縦横へのスクロールは可能になると思います。


追記

コメントで指摘されたとおり、UICollectionViewで実現可能でした。
以下、縦横へスクロールするUICollectionViewLayoutの簡易実装例です。
セルサイズ固定で、単一セクションのみ対応など必要最低限以下の実装ですので、
あくまで参考程度にお願いします。
より実用的なLayoutの実装にはUICollectionViewLayoutのドキュメント等を参考にしてください。
(Swiftで失礼。適宜Objective-Cへ読み替えてください)

import UIKit

// 縦横スクロールレイアウトの超簡易実装
// セルサイズ固定、単一Sectionのみ対応、ヘッダー・フッター非対応、セルの追加削除への考慮なし
class SampleLayout: UICollectionViewLayout {

    let cellSize = CGSize(width:1000, height: 60);

    private var _contentSize = CGSize.zero

    override var collectionViewContentSize: CGSize {
        return _contentSize
    }

    override func prepare() {
        super.prepare()
        let num = self.collectionView!.numberOfItems(inSection: 0)
        self._contentSize = CGSize(width: cellSize.width, height: cellSize.height * CGFloat(num))
    }

    override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
        let attr = UICollectionViewLayoutAttributes.init(forCellWith: indexPath)
        attr.frame = CGRect(origin: CGPoint(x:0, y: CGFloat(indexPath.item) * cellSize.height), size: cellSize)
        return attr
    }

    override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
        var attrs:[UICollectionViewLayoutAttributes] = []

        let begin = max(0, Int(floor(rect.minY / cellSize.height)))
        let end   = min(collectionView!.numberOfItems(inSection: 0), Int(ceil(rect.maxY / cellSize.height)))

        for item in (begin..<end) {
            attrs.append(layoutAttributesForItem(at: IndexPath(item: item, section: 0))!)
        }

        return attrs
    }
}
3
  • この回答で紹介されているライブラリの主目的はセルを自由にマージできることによってグリッドレイアウトを実現するものなので、もちろん要件は満たせると思いますが、素直にUICollectionViewを使えばいいんじゃないかと思います。 Commented 2017年12月4日 7:12
  • 確かにそうですね。UICollectionViewLayoutを自作して、Viewの幅を超える collectionViewContentSize を返す実装にする方が良さそうと思い直し、試してみていたところでした。 Commented 2017年12月4日 7:41
  • UICollectionViewLayoutの自作によりすべての要件を満たすことができました。ありがとうございました。objcコードを追記しておきます。 Commented 2017年12月5日 13:47
1

※コメントで指摘いただきましたが、下記方法では上下方向のスクロールができません。お目汚し失礼しました。

CGAffineTransformを利用するとViewを回転して表示することができます。
UITableViewを90度回転させて表示すれば目的の通りになると思います

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

    CGRect bounds = [[UIScreen mainScreen] bounds];

    UITableView *tblView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStylePlain];

    CGAffineTransform rotate90 = CGAffineTransformMakeRotation(-M_PI / 2.0);
    [tblView setTransform:rotate90];
    tblView.frame = bounds;
    [self.view addSubview:tblView];

}

ただし、UITableViewCellの中身も回転してしまうので、逆回転したビューをCellの上に配置してあげる必要があります。

---追記---
以下URLのようにUICollectionViewを使う方法もあるようです。
https://qiita.com/koyopro/items/b4363cfd7f0838f88103

---追記---
参照先がSwiftだったのでCocoaでのサンプルコードも載せておきます。

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

    CGRect bounds = [[UIScreen mainScreen] bounds];

    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

    layout.itemSize = CGSizeMake(50, 100);
    layout.sectionInset = UIEdgeInsetsMake(0, 0, 0, 0);
    layout.minimumLineSpacing = 0.0;
    layout.minimumInteritemSpacing = 0.0;
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:bounds collectionViewLayout:layout];

    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class])];

    collectionView.frame = CGRectMake(0, 0, bounds.size.width, 100);
    [self.view addSubview:collectionView];
    //クラスに<UICollectionViewDataSource>を設定しておいてください
    collectionView.dataSource = self;
}


- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 20;
}

- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    NSInteger row = indexPath.row;

    UICollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class]) forIndexPath:indexPath];

    if(cell == nil)
    {
    }
    cell.backgroundColor = [UIColor colorWithRed:row * 20 / 255.0 green:1.0 blue:0.0 alpha:1.0];

    return cell;
}
2
  • UITableViewを90度回転して使う方法は、主にUICollectionViewの登場以前に使われたテクニックです。なので、今は普通にUICollectionViewを使います。なお、質問者の意図は「横方向にセルがならぶUITableView」ではなく、「セルは縦にならぶけど、セル自体が横に長く縦横両方にスクロールできるView」のようです。 Commented 2017年12月4日 6:20
  • 指摘ありがとうございます。確かに縦方向のスクロールも必要と記載がありますね。ちょっと考え直してみます。回答上部に仕様が満たされていない旨記述しておきます。
    – user17014
    Commented 2017年12月4日 6:34
0

次のような感じでいかがでしょうか?
最初からテーブルで表示される要素のサイズがわかっている必要があります。
スクロールビュー上にテーブルビューを置くのは一緒ですが、
スクロール量をUIViewのPanイベントでとるのではなく、スクロールビューとテーブルビューのスクロール量を一致させるのがコツです。
セルが横方向にも並ぶのであれば、もう少し改造する必要があります。

#import "ViewController.h"

@interface ViewController ()<UITableViewDelegate, UITableViewDataSource, UIScrollViewDelegate>
{
    UIScrollView *scrView;
    UITableView *tblView;

    int rowNum;
    CGSize rowSize;
}

@end

@implementation ViewController

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

    rowNum = 100;
    rowSize = CGSizeMake(1000, 70);

    CGRect bounds = [[UIScreen mainScreen] bounds];

    scrView = [[UIScrollView alloc] initWithFrame:bounds];

    float contentViewHeight = rowSize.height * rowNum;

    //行数が少ない時は縦Bounceのために、スクロールビューを1px大きくする
    if(contentViewHeight <= bounds.size.height)
    {
        contentViewHeight = bounds.size.height+ 1;
    }


    tblView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, rowSize.width, bounds.size.height)];

    tblView.userInteractionEnabled = NO;
    tblView.delegate = self;
    tblView.dataSource= self;
    tblView.rowHeight = rowSize.height;
    [self.view addSubview:tblView];

    scrView.delegate = self;
    [scrView setContentSize:CGSizeMake(rowSize.width, contentViewHeight)];
    scrView.backgroundColor = [UIColor clearColor];
    [self.view addSubview:scrView];
}


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

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"];
    if(cell == nil)
    {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"];
        UILabel *lbl = [[UILabel alloc] initWithFrame:CGRectMake(10, 10, 1000, 44)];

        lbl.tag = 1;

        [cell.contentView addSubview:lbl];
    }

    UILabel *label = [cell viewWithTag:1];

    label.text = [NSString stringWithFormat:@"%dABCDEFGHIJKLMUOPQRSTUVWXYZABCDEFGHIJKLMUOPQRSTUVWXYZABCDEFGHIJKLMUOPQRSTUVWXYZABCDEFGHIJKLMUOPQRSTUVWXYZABCDEFGHIJKLMUOPQRSTUVWXYZABCDEFGHIJKLMUOPQRSTUVWXYZABCDEFGHIJKLMUOPQRSTUVWXYZ", (int)indexPath.row];

    NSLog(@"%d", (int)indexPath.row);

    return cell;
}

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    //下地のスクロールビューと上に乗っているテーブルビューのクスロール量を合わせる
    tblView.contentOffset = CGPointMake(scrView.contentOffset.x, scrView.contentOffset.y);
}

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


}


@end

編集1
対処療法的ですが、行数が少なくても縦Bouncesが効くようにしました。
小手先感が否めないので、CollectionViewで対応できるならそちらで対応する方が自然だと思います。
編集2
スクロールバーが出てなかったので、出るように調整してみました。

2
  • ありがとうございます。試して見ましたが、ScrollViewが縦Scrollしないと、TableViewも縦Scrollしてくれません。ScrollViewを縦Scrollするためには、ContentであるTableViewの高さをScrollViewよりも大きくする必要があり、Scrollできる範囲が限られてしまう為、うまくいきませんでした。 Commented 2017年12月5日 1:34
  • 行数が少なくとも縦Bouncesするように調整してみました。
    – user17014
    Commented 2017年12月5日 1:55

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。