UIcollectionViewのLayoutについて

5033 ワード

1,Layoutの役割

CollectionViewは、データとレイアウトを厳格に分離しています.多くの場合、あなたのappはデータを提供するだけでいいので、システムが提供するレイアウトはあなたのために多くのことをします.システムが提供するレイアウトは非常に強力で、複数の列のグリッドビューだけでなく、フラットビューと円形ビューも提供できます.システムが提供するレイアウトがあなたのニーズを満たすことができない場合は、レイアウトをカスタマイズすることもできます.

2,Configuring FlowLayout

FlowLayoutを使用する手順は、次のとおりです.
  • は、FlowLayoutオブジェクトを作成し、CollectionViewに値を割り当てます.
  • cellの幅と高さ
  • を設定する.
  • 必要ならLineSpacingItemSpacingを設置します.
  • HeaderViewFooterViewを作成した場合は、sizeを指定します.
  • Layoutのスライド方向
  • が設ける.itemごとにsizeを指定します.
  • すべてのitemsizeが固定されている場合、itemSize属性で直接設定されます.
  • cellsizeを指定する必要がある場合は、CollectionViewdelegateメソッドでcollectionView:layout:sizeForItemAtIndexPath:メソッドを実装する必要があります.レイアウト中、Layoutオブジェクトは、図のように垂直方向の中央にitemを配置します.
  • LineSpacingItemSpacingを指定します.
  • は、minimumLineSpacingおよびminimumInteritemSpacingの属性を設定することによって行われる.
  • は、collectionView:layout:minimumLineSpacingForSectionAtIndex:およびcollectionView:layout:minimumInteritemSpacingForSectionAtIndex:の2つのdelegate方法
  • を実装することによって、実施する.
    指定inset:
  • sectionInset属性
  • を通過する.
  • - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)sectionプロキシ方法
  • により

    3,Subclassing FlowLayout


    FlowLayoutは強力ですが、FlowLayoutをカスタマイズする必要があるかもしれません. , FlowLayout 。

    3.1 Layoutに追加または装飾ビュー(supplementary or decoration View)を追加したいかもしれません。


    標準的なFlowLayoutではHeaderViewとFooterViewのみがサポートされていますが、DecorationViewはサポートされていません.装飾ビューを実現するには、次の方法を上書きする必要があります.
  • layoutAttributesForElementsInRect: (required)
  • layoutAttributesForItemAtIndexPath: (required)
  • layoutAttributesForSupplementaryViewOfKind:atIndexPath: (to support new supplementary views)
  • layoutAttributesForDecorationViewOfKind:atIndexPath: (to support new decoration views)

  • 3.2 FlowLayoutのレイアウトプロパティを調整したいかもしれません

    layoutAttributesForElementsInRect:というメソッドを上書きし、このメソッドの実装では、superメソッドを呼び出し、プロパティを変更し、最後にプロパティを返します.例:
    //       UICollectionViewLayoutAttributes    ,                
    - (nullable NSArray<__kindof uicollectionviewlayoutattributes=""> *)layoutAttributesForElementsInRect:(CGRect)rect {
        NSArray *array = [super layoutAttributesForElementsInRect:rect];
        for (UICollectionViewLayoutAttributes *attributes in array) {
            CGRect frame = attributes.frame;
            float distance = fabs(self.collectionView.contentOffset.x  + self.collectionView.contentInset.left - frame.origin.x);
            float scale = 1 * MIN(MAX(1 - distance / self.collectionView.bounds.size.width, 0.8), 1);
            attributes.transform = CGAffineTransformMakeScale(scale, scale);
        }
        return array;
    } 
    

    3.3新しいレイアウト属性を追加したいかもしれません

  • は、UICollectionViewLayoutAttributesを継承し、独自のLayoutAttributesを実装し、必要なレイアウト情報を属性として追加することができます.
  • カスタムFlowLayoutでは、layoutAttributesClassメソッド
  • を上書きする.

    3.4 insertまたはdeleteのアニメーションをカスタマイズしたいかもしれません

    insertまたはdeleteのいずれかのcellの場合、システムはデフォルトのアニメーションを提供します.自分のアニメーションを実現したい場合は、上書きする方法で実現できます.
  • initialLayoutAttributesForAppearingItemAtIndexPath:
  • initialLayoutAttributesForAppearingSupplementaryElementOfKind:atIndexPath:
  • initialLayoutAttributesForAppearingDecorationElementOfKind:atIndexPath:
  • finalLayoutAttributesForDisappearingItemAtIndexPath:
  • finalLayoutAttributesForDisappearingSupplementaryElementOfKind:atIndexPath:
  • finalLayoutAttributesForDisappearingDecorationElementOfKind:atIndexPath:

  • 4,カスタムLayout[]


    4.1


    カスタムlayoutを作成する前に、UICollectionViewFlowLayoutが提供する多くの特性が、多くの一般的なlayoutを満たすために最適化されていることを知る必要があります.以下の場合を除き、カスタマイズは推奨されません.
  • メッシュまたはline-based breakingレイアウトではありません(itemsは行がいっぱいになるまで1行に並べ、すべてのitemsが並べられるまで次の行に並べ続けます)、または
  • を複数の方向にスクロールする必要があります.
  • は、すべてのCellの位置を頻繁に変更する必要があるため、既存のlayoutを変更するよりもカスタムflow layoutを作成する方が
  • の作業量を節約することができる.

    4.2 UIcollectionViewLayoutの継承

    UICollectionViewLayoutを継承した後、レイアウトコア特性を提供するいくつかの方法を再ロードするだけで、他の方法は状況に応じて再ロードするだけで、コア特性は以下の通りです.
  • スクロール可能なコンテンツ領域を指定するsize
  • .
  • は、レイアウト内の各Cellおよびviewに属性オブジェクト
  • を提供する.