3

UICollectionViewLayout を使用して、Pinterest の列レイアウトに似たインターフェイスを作成する方法について、誰かが正しい方向に向けることができますか?

ネットで調べてみたのですが、まだあまり例がないようです。

4

4 に答える 4

14

1000memories の "Quilt" ビューは pinterest のようなオープン ソースです: http://blog.1000memories.com/168-opensourcing-quilt。

より概念的な概要を探している場合は、何をしたいのかについての基本的な考え方を次に示します。Pinterest スタイルのレイアウトだけが必要な場合、最も簡単なのは をサブクラス化することUICollectionViewFlowLayoutです。このクラスから多くのレイアウトのヘルプが得られ、Pinterest スタイルはその機能の範囲内です。1 つのメソッドをオーバーライドするだけで済みます。

UICollectionViewFlow レイアウトを使用して、通常の UICollectionView をセットアップします。これを行う簡単な方法は次のとおりです。

  • UIViewController をストーリーボードにドラッグし、その上に UICollectionView をドロップします。カスタム クラスなどに合わせてクラスを設定します。ここでデリゲートを使用してデリゲート クラスを作成できますが、厳密に言えば、Pinterest フロー レイアウトだけを実現するために必要ではありません (ほぼ間違いなく、選択責任をただし、実際にはデリゲート クラス)。
  • データ ソースをスタブ化します。UICollectionView のデータ ソース プロトコル ( http://developer.apple.com/library/ios/#documentation/uikit/reference/UICollectionViewDataSource_protocol/Reference/Reference.html ) の実装は非常に簡単です。UICollectionViewCell に再利用識別子を設定してください。必要なもの:
    1. (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
      • とりあえず 1 を返します。
    2. (NSInteteger)collectionView:numberOfItemsInSection:
      • とりあえず数値をハードコーディングして、20 にします。
    3. –(UICollectionViewCell *)collectionView:cellForItemAtIndexPath:
      • これは、フロー レイアウトのサブクラス化が有利になる場所の 1 つです。ここで実際に行う必要があるdequeueReusableCellWithReuseIdentifier:forIndexPath:のは、インデックス パスを指定して呼び出すことだけです。UIImageView またはいくつかのラベルをセルに追加した場合、これは実際に画像やテキストなどを割り当てるのに最適な場所です。

  • viewController でviewDidLoada をインスタンス化しUICollectionViewFlowLayout、UICollectionView のデータソースを自分のものに、レイアウトを flowlayout に設定します。このクラスは のサブクラスですUICollectionViewViewController。

    self.collectionView.dataSource = [[YourDataSource alloc] init];
self.collectionView.collectionViewLayout = [[UICollectionViewFlowLayout alloc] init];

Ok。この時点で、アプリを実行して画面に何かを表示できるはずです。これは旋風の概要です。ViewController の設定方法などの詳細が必要な場合は、それに関する情報がたくさんあります。

ここからがフロー レイアウトの Pinterest 化という重要な部分です。

まず、UIViewControllerFlowLayout のサブクラスである新しいクラスを追加します。ViewControllerviewDidLoadを変更してこのクラスをインスタンス化し、 として割り当てUICollectionViewますcollectionViewLayout。

実装する必要があるメソッドは- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect.

つまり、スーパークラスがほとんどすべての作業を行います。コードは次のようになります。

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
    NSArray *attributes = [super layoutAttributesForElementsInRect:rect]; 
    [attributes enumerateObjectsUsingBlock:^(id attr, NSUInteger idx, BOOL *stop) {
    float newYCoord = [calculationMethodYouHaveToWriteFor:attr.frame];
    attr.frame = CGRectMake(attr.frame.origin.x, newYCoord, attr.size.width, attr.size.height];
}];

}

Pinterest は固定幅の列を使用します。計算方法で行う必要があるのは、現在の列 (`attr.origin.x / _columnWidth) を把握し、ivar からその列の合計の高さを調べることだけです。それを新しいオブジェクトの高さに追加し、次のパスのために保存し直すことを忘れないでください。

フロー レイアウト スーパークラスは、セルの作成、表示されるセルの決定、コンテンツ サイズの把握、x 方向の行の配置の把握、セルへのインデックス パスの割り当てを処理します。がらくたがたくさん。そして、その 1 つのメソッドをオーバーライドすることで、y-pos を好きなようにいじることができます。

于 2013-06-21T02:20:25.523 に答える
7

githubから2つあります

https://github.com/jayslu/JSPintDemo

https://github.com/chiahsien/UICollectionViewWaterfallLayout

現在、プロジェクトでWaterfallの修正バージョンを使用しており、JSPintを調査しています。

于 2012-11-27T14:30:31.830 に答える
2

個人的なプロジェクトで使用するカスタム uicollectionviewlayout を作成しました。ここにリンクがあります。それが役に立てば幸い。

https://github.com/johnny0614/YJZAlbumCollectionViewLayout

于 2014-08-27T07:24:02.267 に答える