UICollectionViewの基本的な使用

現在のiOS開発のUICollectionViewは、広く使用されています。それはUIScrollViewの、必要に応じてカスタマイズすることができます複雑なレイアウトの様々なから継承します。

使用

  • 2つのプロトコルに従って
    データソースプロトコルUICollectionViewDataSource
    プロキシメソッドプロトコルをUICollectionViewDelegate

  • セルをサインアップ

1 [collectionView registerClass:[MyCollectionViewCell クラス ] forCellWithReuseIdentifier:@ " セルID " ]。

 

  • レイアウトパラメータオブジェクトUICollectionViewFlowLayout
    であるUICollectionViewことの本質は、我々が達成していること、それを介して行われUICollectionViewたレイアウトのさまざまな。

システムは、2つの提供UICollectionViewのレイアウトクラス:
1 UICollectionViewLayout
抽象クラスで、私たちは時にレイアウト情報カスタムレイアウトで継承され、これに基づいて設定することができます。
2. UICollectionViewFlowLayout
継承されたUICollectionViewLayoutシステムは、シンプルなレイアウトスタイルを提供してくれたレイアウトクラスを、書かれています、。我々は唯一の、特に簡単なグリッドレイアウトまたはフローレイアウトが必要な場合は、それを直接使用することができます。

作ります

あなたはそれにレイアウトを与えて、空のレイアウトレイアウトパラメータを提供するために必要で、初期化の方法を使用することはできません。

1、フローレイアウトレイアウトを作成

ここで、このような等サイズ、項目として設定関連属性、

1つの UICollectionViewFlowLayoutレイアウト* = [[UICollectionViewFlowLayoutアロケーション]のinit];
 2  
。3      // 行と列の間隔の設定項目
4。      layout.minimumInteritemSpacing = kLineSpacing;
 5      layout.minimumLineSpacing = kLineSpacing;
 6  
。7      // アイテムのサイズを設定する
。8      CGFloat itemW kScreenWidthは、/ = 2.5 ;
 9      layout.itemSize = CGSizeMake(itemW、itemW);
 10  
。11      // 左下及び右パディングの各パーティションに設けられた
12である      layout.sectionInset UIEdgeInsetsMake =(555。5 );
 13である     
14      // 頭部と尾部領域領域のサイズ設定
15      layout.headerReferenceSize = CGSizeMake(kScreenWidth、65 );
 16      layout.footerReferenceSize = CGSizeMake(kScreenWidth、65 );
 17  
18である     // ヘッドパーティションとビュー設定常に上下画面の端面図で固定されている
19。      layout.sectionFootersPinToVisibleBounds = YESを、
 20は 
21である     // スクロールバーを設定
22で      layout.scrollDirection = UICollectionViewScrollDirectionVertical。  

 

レイアウト作成collecViewを使用して2、
1   UICollectionView CollectionView * = [[UICollectionView ALLOC] initWithFrame:CGRectZero collectionViewLayout:レイアウト];
 2      collectionView.backgroundColor = [UIColor witheColor];
 3。      collectionView.showsVerticalScrollIndicator = NO;    // スクロールバーかどうか
4。      collectionView.scrollEnabled = YES;   // スクロールが有効
 5。 
6。     // 3、コントローラビューに追加されている
7。     [self.viewのaddSubview:CollectionView];
 8      _mainCollectionView = CollectionView;
 9  
10      // 4、レイアウト
11     [_mainCollectionView mas_makeConstraints:^(MASConstraintMakerの*のメイク){
 12          make.top.left.bottom.right.equalTo(self.view)。
13      }]。

 

5、登録されたセル

カスタマイズ可能な一般的なセル。あなたは、異なるセル、異なるセルのIDの決定を登録する必要があります。

1   [self.mainCollectionView registerClass:[PDcollectionVertivalCellのクラス] 
 2 forCellWithReuseIdentifier:"@ MAINCOLLECTIONVIEWID " ]。
図6に示すように、登録されたヘッドビュー
1 [self.mainCollectionView registerClass:[UICollectionReusableView クラスは】forSupplementaryViewOfKind:UICollectionElementKindSectionHeader 
 2 withReuseIdentifier:"@ MAINCOLLECTIONVIEWHEADERを" ]。
7は、プロキシを設定し、合意を遵守します
1 <UICollectionViewDelegate、UICollectionViewDataSource>
 2  
3      self.mainCollectionView。デリゲート = 自己;
4      =自己self.mainCollectionView.dataSource。

 

メソッドのデータソース

1  の#pragmaマーク-collectionview数据源方法
 2 - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView * )collectionView {
 3  
4      リターン 6// 返回セクション数
5  }
 6 - (NSInteger)collectionView:(UICollectionView * )collectionView numberOfItemsInSection:(NSInteger)セクション{
 7  
8      戻り self.normalGoodLists.count。  // 每个セクション的アイテム数
9  }
 10  
11 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath * )indexPath
 12 {
 13      /アイテムを作成し、バッファプールアイテムから取る
 14      PDcollectionVertivalCell細胞* = [CollectionView dequeueReusableCellWithReuseIdentifier:"@ MAINCOLLECTIONVIEWID " forIndexPath:indexPath];
 15      // このモデルデータは、アイテムに追加される外
16      IF(self.normalGoodLists.count> 0 ){
 17。          PDshopItem *項目= self.normalGoodLists [indexPath.item];
 18である          cell.cheapShopItem = 項目;
 19      }
 20は     リターンセルと、
 21である     
22れます }

 

ヘッドビューを作成します。

1  の#pragmaマーク-头部视图
 2 - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSStringの*)種類atIndexPath:(NSIndexPath * )indexPath {
 3      
4      UICollectionReusableView * headView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader 
 5 withReuseIdentifier。@ " MAINCOLLECTIONVIEWHEADER " forIndexPath:indexPath];
6      // ID必须与注册ID一样
7     
8      であれば(indexPath.section == 0 ){
 9          
10         [headView addSubview:self.cycleScrollView]。  // 任何自定义図
11          [self.cycleScrollViewのmas_makeConstraints:^(MASConstraintMaker * メイク){
 12              make.top.left.bottom.right.equalTo(headView)。
13          }]。
14          リターンheadView。
15      }
 16  }
 17  
18  の#pragmaマーク-头部视图的尺寸
 19 - (CGSize)collectionView:(UICollectionView *)collectionViewレイアウト:(UICollectionViewLayout * )collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)セクション{
 20      
21      であれば(セクション== 0 ) {
22          
23          リターン CGSizeMake(screenW、0.4 * screenW)。
24      }
 25      他の 場合(セクション== 1 ){
 26          
27          リターン CGSizeMake(screenW、0.25253 * screenW)。
28      }
 29 }

 

プロキシのアプローチ - イベントをクリックしてください

1つ の#pragmaマーク-アイテム時にコールをクリックして
 2( - 無効)CollectionView:(UICollectionView *)CollectionView didSelectItemAtIndexPath:(NSIndexPath * )indexPath {
 3      [CollectionView deselectItemAtIndexPath:indexPathアニメーション:YES]; // チェックを外して
 4      //を行います...何か
5 }    

 

UICollectionViewCell

アイテムUICollectionView、それが細胞です。

  • セルの内容-カスタマイズ
    デフォルトのセルがUICollectionViewCellであるオブジェクトを、それがどんな子コントロールを持っていないので、あなたは(UICollectionViewCellから継承)セルをカスタマイズする必要があり、必要な子コントロールを追加します。

  • セル属性 - あなたは、フローレイアウトパラメータを作成するときに設定し、FlowLayoutので決まります。

カスタムセル

UICollectionViewCell、.hファイルから継承され、データモデルの属性を追加し、その後のセルのコンテンツを提供

1つ の#import <UIKitの/ UIKit.h>
 2  の#import  " PDshopItem.h " 
3  
4  
5  @interface PDcollectionViewCell:UICollectionViewCell
 6  
7 @property(非アトミック、強い)PDshopItem * shopItem。    // 数据模型
8  
9  @end

 

.Mファイルで

1つの @interface PDcollectionViewCell()
 2  
。3 @Property(非アトミック、弱い)* UIImageView shopImgView;
 4 @Property(非アトミック、弱い)* UILabel shopNameLabel;
 5  
。6  @end 
。7  
。8  // 子を追加は、initメソッドを制御する
。9 - (ID )initWithFrame:(CGRect){フレーム
 10  
11。     IF ([スーパーinitWithFrame:フレーム]){
 12は     // 子コントロールを作成し、レイアウト
13である     ... 
 14      }
 15      リターン自己;
 16  }
 17  
18れる // プロパティをオーバーライド設定方法は、データは、サブ制御するために設けられています
19 - (ボイド)setShopItem:(PDshopItem * )shopItem {
 20      _shopItem = shopItem。
21      
22      self.shopNameLabel.text = shopItem.goodName。
23      ... ...
 24   }

 

 

抜粋します。https://www.jianshu.com/p/a5f71dc1ead3

おすすめ

転載: www.cnblogs.com/luoluosha/p/11696351.html