web-dev-qa-db-ja.com

水平UITableView

私は、上下ではなく左右にスクロールするUitableビューを持つiPadアプリケーションにレイアウトを実装します。

というよりも

行1行2行3(垂直にスクロール)それは次のようになります:行1、行2、行3(水平にスクロール)

UItableViewは垂直スクロールのみを行うように設計されているため、変換を実行しても目的の効果が得られないことがわかりました。 uitableviewが提供するようなデータソースプロバイダーを利用してこれを行う標準的な方法はありますか?
基本的に、iPadの BBCニュースリーダーアプリ が選択するストーリーのリストで行うことと同様のことをしたいと思います。

ありがとう

39
imran

トランスフォームを使用して水平スクロールテーブルビューを実装する1つのアプローチを示すサンプルコードを公開しました。 EasyTableView と呼ばれ、テーブルビューを垂直方向と水平方向にスクロールするために同じインターフェイスを提供します。

29
aleksey

これは私が使用する方法です:

1)UITableViewのサブクラスを独自に実装し、以下に示すようにそのinitWithCoder:メソッドをオーバーライドします。

- (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)独自のUITableViewCellクラスを作成し、initWithCoder:を再度オーバーライドします。

- (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)IBでUITableView要素を作成し、IDインスペクターでそのクラスを「MyHorizo​​ntalTableView」に設定できるようになりました。

4)IBでUITableViewCell要素を作成し、IDインスペクターでそのクラスを「MyHorizo​​ntalTableViewCell」に設定します。

以上です。

これは、テーブルビューまたはセルのインスタンス化にIBを使用したくない場合に、他の初期化子をオーバーライドすることでも機能します。

サンプルプロジェクト この概念に基づいて構築したものは、GitHubにあります。

25
diegoreymendez

アプリをiOS 6以降のみに制限できる場合、これを行う最善の方法は ICollectionView を使用することです。

IOS 4/5をサポートする必要がある場合は、UICollectionViewのオープンソースの再実装のいずれかを試してください。 PSTCollectionView

7
JosephH

この質問は Appleによる回答 です。 Appleによるスクロールの例

2つの異なるスタイルのUIScrollViewを実装する方法を示します。最初のスクローラーには複数の画像が含まれており、複数のデータチャンク(この例では5つの個別のUIImageView)を使用して大きなコンテンツをレイアウトする方法を示しています。

これはiPadでも機能します。

5
Saqib Saud

今のところ、UIScrollViewを使用して、スクロールを水平方向のみに設定する必要があります。データに関しては、デキューと最適化を自分で処理する必要があります。十数個以上のオブジェクトを期待しない場合は、おそらくスキップできますが、データが集中する場合は、UITableViewが使用するのと同様のデータソーシングとロードを実装してください。 BBCニュースリーダーアプリは、各ページ(4個程度のニュースアイコン)ごとにスクロールできるページングも使用していることに注意してください。

3
hardway

UITableViewに垂直スクロールと水平スクロールの両方を完全に行わせるための簡単な素晴らしいトリックがあります。

自動レイアウトを使用しても使用しなくても実行できます。自動レイアウトを使用して説明します。

UITableViewには幅の制約があり、末尾の配置の制約はありません。この幅の制約をIBOutletにバインドし、コントローラーで以下をテーブルビューのプロパティに設定します。

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

テーブルビューは、すべてのコンテンツを水平方向にレンダリングするために全幅である必要があり、トリックを行う画面サイズと比較してコンテンツサイズで遊んでいます。

以下のそれらの場所は機能しますが、ライフサイクルのさまざまなステップで試すことができます:

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

UITableViewのようにセルの再利用性を実装するシンプルなUIScrollViewサブクラスを作成しました。projet MMHorizo​​ntalListView はgitHubにあり、テストプロジェクトもあります。 4.xなどの古いiOSバージョン(おそらくさらに古い...)

1
Manu