UICollectionViewLayoutのカスタマイズ。 芸術の名において

みなさん、こんにちは！

イントロ

私は、（ロシアに）最も近い外国の地方の国の地方都市でios開発者として働いています。 約1年半前、国は私に彼女に何かを負わせることを決めました。特に、私は自分の人生に1年、技術の低い仕事に1年、帰国の夢、家族と仕事に1年のおかげでした...-要するに、私は軍隊に徴兵されました。 そして、このケースの背後で、私はどういうわけか、長い間待ち望まれていたUICollectionViewを含むすべての機能を備えたiOS 6のリリースを逃しました。

衣装、トレーニング場、チャーターなどの魅力的なものを扱った後、私は家に戻り、再び働き始めました。もちろん、顧客がデザイナーが「pinterest board」、つまりUICollectionView自体と呼んでいる形式でデータを表示する必要があるプロジェクトあなたを待たせませんでした。

プロジェクト

このプロジェクトは、骨one品鑑定会社のiPadオークションカタログのようなものです。 ハブでの彼らの言及に対して、彼らがどのように反応するかわからないので、リンク、デザインレイアウト、または実際のスクリーンショットは提供しません。

アプリケーションは、原則として複雑ではありません。デザインの喜びから、私を少しだけ守ったのは、メイン画面の外観です。 これは、水平スクロールを伴う3つの水平列に配置されたロットの画像のコレクションであると想定されていました。 要素の高さと幅が固定された中央の行（画像の比率に応じて）。 1行目と3行目の要素の高さは、小さい方向にわずかに異なり、破れたエッジのようになります。 私のドライな説明を文字で十分に理解していない場合は、記事の最後にあるスクリーンショット（最終結果のサンプル）を見てください。 またはここ。

UICollectionViewFlowLayout

これは最小限の労力を費やした最初の試みでした。 これらの要素に遭遇したことは一度もないので、Appleのクラスに対する私の希望は非常に強かった。 まず、私は通常、水平方向の「インタレストボード」の出力に単純に焦点を当てて、破れたエッジでスコアリングしました。 残念ながら、ボールを滑らせることはできませんでした。





スクリーンショットで2つのことがわかります。

• 最初：UICollectionViewFlowLayoutは、最上行の要素の中心が下の要素の中心より上になるように要素を配置します。 一言で言えば、すぐには転がりません。
• 2番目：例として、私は、シュプレマティズムの創始者の傑作を背景に、前衛芸術家によるまだ書かれていない絵画を投稿することにしました

RFQuiltLayout

私のグーグルスキルが非常に弱いか、 RFQuiltLayoutが私の場合は唯一のターンキーソリューションです。

このクラスは、デフォルトのセルサイズCGSizeを格納する変数blockPixelsを使用します。 デリゲートメソッド

- (CGSize) blockSizeForItemAtIndexPath:(NSIndexPath *)indexPath;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

各セルのblockPixelsの乗数を返します。 つまり、blockPixels = {100、100}、blockSizeForItemAtIndexPath = {2.2、0.8}の場合、セルのサイズは{220、80}になります。

私の意見では、それは少し奇妙なシステムです。blockPixelsを{1、1}に設定し、デリゲートメソッドで要素に必要なサイズを返しますが、この場合の配置アルゴリズムは15要素でも非常に時間がかかり、配置するのに100要素が必要です計算能力はiPadよりも急激です。 忍耐のアルゴリズムを分解するのに十分な時間がなかったので、選択方法によってblockPixelsの値{20、20}を選択しました。これにより、15個のセルで通常のパフォーマンスと良好な配置精度が得られました。

引き裂かれたエッジを作成するには、少しトリックを使用する必要がありました-実際、セルのサイズ自体には触れませんでした。配置の段階でセルがどの行にあるかを見つけることができませんでしたが、写真をインストールするときに行をチェックし、最初と最後の行の行の高さを減らしました写真。 画像は上下からわずかにトリミングされました。 写真がトリミングの下にあるロットがポートレートであった場合、人々は胸の冠と底を失い、ロットが中国の置物であった場合、ドラゴンは紋章なしで表示され、ペルシャ絨毯で私の汚いハックは山を切りました。 しかし、クライアントは満足しました。つまり、技術仕様がわずかに修正されるまで、私も喜んでいました。 メイン画面の哀れな要素の代わりに、すべてのロットが表示されているはずです。 すべて1500。

より多くの芸術！

絵画、花瓶、ヒスイの置物、その他すべての1500の画像が、劣らず美しいです。 厳しい真実は、サードパーティのソリューションが私を救ったということではありませんでした。 それでは、プレースメントマネージャーを作成しましょう。

予想されるように、ロシア語で情報を見つけることはできませんでした（あまり期待していませんでした）が、不必要で少なくとも少し役に立つ英語の教師は、何とかして得点しませんでした検索結果の最初の10ページ。 結果として、私のマニュアルは、実際には、 Appleのドキュメントと上記のRFQuiltLayoutコードでした（ところで、著者のBryce Reddに感謝の意を表したい）。

SKRaggyCollectionViewLayout

すぐにクラスの愚かな名前をおaびします。

最初に、デリゲートのプロトコルを定義しました。

 @protocol SKRaggyCollectionViewLayoutDelegate <UICollectionViewDelegate> - (float)collectionLayout:(SKRaggyCollectionViewLayout*)layout preferredWidthForItemAtIndexPath:(NSIndexPath *)indexPath; @optional - (UIEdgeInsets)collectionLayout:(SKRaggyCollectionViewLayout*)layout edgeInsetsForItemAtIndexPath:(NSIndexPath *)indexPath; @end
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デリゲートはセルの高さに影響を与えることができないため、特定のセルで見たい幅だけをマネージャーに渡します。 さて、UIEdgeInsets（セルの内部パディング）を返すメソッドは、それなしで。

そしてもちろん、行数を格納するプロパティは、3行だけでなく、散歩のように歩くことであり、クラスをユニバーサルにすることです！

 @property (nonatomic, assign) NSUInteger numberOfRows;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

今実装。

Appleは、補足ビューや装飾ビューなど、UICollectionViewの追加要素に煩わされたくない場合は、少なくとも次のメソッドをオーバーライドする必要があると言っています。

 - (CGSize)collectionViewContentSize; - (NSArray*)layoutAttributesForElementsInRect:(CGRect)bounds; - (UICollectionViewLayoutAttributes*)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath; - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

後者では、すべてが明確です-newBoundsがコレクションの現在の境界に一致しない場合はYESを返します。

最初のメソッドは後で実装しやすいように残し、layoutAttributesForItemAtIndexPathメソッドに進みましょう。 その名前から明らかなように、各要素のUICollectionViewLayoutAttributesを計算する必要があります。 UICollectionViewLayoutAttributesクラスのオブジェクトには、セルのあらゆる種類のかわいらしさを作成できるtransform3Dを含む、オブジェクトの場所に関する多くの情報が含まれていますが、この場合はたった1つのフレームを実行できます。

 - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath { UIEdgeInsets insets = UIEdgeInsetsZero; if ([self.delegate respondsToSelector:@selector(collectionLayout:edgeInsetsForItemAtIndexPath:)]) { insets = [self.delegate collectionLayout:self edgeInsetsForItemAtIndexPath:indexPath]; } // Get saved frame and edge insets for given path and create attributes object with them CGRect frame = [self frameForIndexPath:indexPath]; UICollectionViewLayoutAttributes* attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; attributes.frame = UIEdgeInsetsInsetRect(frame, insets); return attributes; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、興味深いことはありません-デリゲートからUIEdgeInsetsを取得します。デリゲートが提供した場合、frameForIndexPathメソッドを使用してフレームを取得し、受信したUIEdgeInsetsおよびCGRectで属性を作成して返します。 しかし、frameForIndexPathメソッドでは、シャーマニズムの主要部分は私から隠されています。

 - (CGRect)frameForIndexPath:(NSIndexPath*)path { // if there is saved frame for given path, return it NSValue *v = [self.framesByIndexPath objectForKey:path]; if (v) return [v CGRectValue]; // Find X-coordinate and a row which are the closest to the collection left corner. A cell for this path should be placed here. int currentRow = 0; float currentX = MAXFLOAT; for (int i = 0; i < self.edgeXPositions.count; i++) { float x = [[self.edgeXPositions objectAtIndex:i] floatValue]; if (x < currentX) { currentRow = i; currentX = x; } } // Calculate cell frame values based on collection height, current row, currentX, the number of rows and delegate's preferredWidthForItemAtIndexPath: value // If variableFrontierHeight is YES this value will be adjusted for the first and last rows float maxH = self.collectionView.frame.size.height; float rowMaxH = maxH / self.numberOfRows; float x = currentX; float y = rowMaxH * currentRow; float w = [self.delegate collectionLayout:self preferredWidthForItemAtIndexPath:path]; float h = self.collectionView.frame.size.height / self.numberOfRows; float newH = h; // Adjust height of the frame if we need raggy style if (self.variableFrontierHeight) { if (currentRow == 0) { float space = arc4random() % self.randomFirstRowVar; if (self.prevWasTallFirst) { space += self.fixedFirstRowVar; } self.prevWasTallFirst = !self.prevWasTallFirst; y += space; newH -= space; } else if (currentRow == self.numberOfRows - 1) { float space = arc4random() % self.randomLastRowVar; if (self.prevWasTallLast) { space += self.fixedLastRowVar; } self.prevWasTallLast = !self.prevWasTallLast; newH -= space; } } // Assure that we have preferred height more than 1 h = h <= 1 ? 1.f : h; // Adjust frame width with new value of height to save cell's right proportions w = w * newH / h; // Save new calculated data ad return [self.edgeXPositions replaceObjectAtIndex:currentRow withObject:[NSNumber numberWithFloat:x + w]]; CGRect currentRect = CGRectMake(x, y, w, newH); NSValue *value = [NSValue valueWithCGRect:currentRect]; [self.indexPathsByFrame setObject:path forKey:value]; [self.framesByIndexPath setObject:value forKey:path]; return currentRect; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

私のパスタコードと半英語のコメントがあまり明確でない場合は、疑似コードをより明確に混乱させようとします。



ところで、invalidateLayoutメソッドでこれらのindexPathsByFrame、framesByIndexPath、what-else-is-cachedをすべてクリアすることを忘れてはなりません。 当然、[super invalidateLayout]が欠落していません。



contentSizeに戻ります。 明らかに、水平スクロールの場合、次のようになります。

 - (CGSize)collectionViewContentSize { return CGSizeMake(self.edgeX, self.collectionView.frame.size.height); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここで、edgeXは最も遠くにあるセルのX座標です。 結局のところ、すべてのセルがどのように配置されているかはすでにわかっています。 またはわからない。 または、まだわかっています...確かに、その中で[super prepareLayout]を呼び出すことを忘れずにprepareLayoutメソッドを再定義し、各セルのフレームを計算する必要があります

 - (void)prepareLayout { [super prepareLayout]; // calculate and save frames for all indexPaths. Unfortunately, we must do it for all cells to know content size of the collection for (int i = 0; i < [self.collectionView.dataSource collectionView:self.collectionView numberOfItemsInSection:0]; i++) { NSIndexPath *path = [NSIndexPath indexPathForItem:i inSection:0]; [self frameForIndexPath:path]; } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

はい、数十万個のセルがある場合、コレクションを急いでロードすることはありませんが、他に些細な方法はありません。

最後に、最後のメソッドであるlayoutAttributesForElementsInRectをオーバーライドします。 その中で、この領域に該当するすべての要素の属性を返す必要があります。 コレクションがそのフレームのサイズにスクロールされるたびに呼び出されます。 その後、これはすべてキャッシュされているように見えるため、メソッドはcontentSize.width / frame.size.width回だけ呼び出されます。

「額」と呼ばれるものの私の実装：各要素のフレームを調べ、それらがこの領域と交差する場合、返された配列に追加します。

 - (NSArray*)layoutAttributesForElementsInRect:(CGRect)bounds { if (CGRectEqualToRect(bounds, self.previousLayoutRect)) { return self.previousLayoutAttributes; } [self.previousLayoutAttributes removeAllObjects]; self.previousLayoutRect = bounds; NSArray *allFrames = self.framesByIndexPath.allValues; for (NSValue *frameValue in allFrames) { CGRect rect = [frameValue CGRectValue]; if (CGRectIntersectsRect(rect, bounds)) { [self.previousLayoutAttributes addObject:[self layoutAttributesForItemAtIndexPath:[self.indexPathsByFrame objectForKey:[NSValue valueWithCGRect:rect]]]]; } } return self.previousLayoutAttributes; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてが正常に機能するという事実に対する幸福感が過ぎ去った直後に、私の内部の仕事中毒者は評決を出しました：最適化するために！ しかし、ワーカホリックよりも強いことが判明したその内なる自己は、記憶の腸から「時期尚早な最適化」というフレーズを得て、1万個の要素があってもiPad 2でのテストでは速度低下が見られなかったという事実の背後に隠れて、しばらくの間最適化を延期することにしました。

あとがき

誰かが興味を持ち、誰かが有用であり、残りはこの投稿を読むだけの忍耐を持っていたと思います。 ご清聴ありがとうございました。

最後に、いくつかのリンク：

• アップルのガイド
• いくつかの男からのハイド -私の意見では、あまりにもオフトピック
  
  
• 私のgithubコード
  
  

PS彼らはすでに最後のネタバレには絵がないと私に書いた。 同じ操作を3回行いました。ミッシングリンクを挿入して編集し、保存し、変更が発生したことを確認し、ページを閉じ、再度開いて呪いをかけました-画像が再び消えました。 さらに、同じ状況につながるはずのリンクOr right hereは 、その機能的義務を果たすのをやめました。 トラブル。

念のため、この不正なリンクを単にテキストでここに残します

habr.habrastorage.org/post_images/0e1/0c7/be4/0e10c7be44690901268d5dfa9e532d0e.png