2025-05-24

1.簡單說說UICollectionViewController                 

 

我們在做九宮格佈局時,可以使用UIScrollView,也可以使用UICollectionViewController。

 

當我們用UICollectionViewController來進行九宮格佈局,可以更加方便,省去很多麻煩,例如橫豎屏的適配。

 

UICollectionViewController 用起來非常簡單,隻需要簡單的幾步,就能實現非常的漂亮的九宮格佈局。

 

下面就說說UICollectionViewController實現的幾步。

 

 

 

 

 

2.UICollectionViewController的實現                 

 

2.1.傳遞佈局                                           

 

首頁創建UICollectionViewController時,需要給它傳一個展示的佈局,一般九宮格用的都使流水佈局!

 

復制代碼

    // 1.創建流水佈局

 

      UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];

     

      // 2.設置每個格子的尺寸

     layout.itemSize = CGSizeMake(250, 250);

      

      // 3.設置整個collectionView的內邊距

 CGFloat paddingY = 20;

     CGFloat paddingX = 40;

     layout.sectionInset = UIEdgeInsetsMake(paddingY, paddingX, paddingY, paddingX);

    

     // 4.設置每一行之間的間距

    layout.minimumLineSpacing = paddingY;

復制代碼

 

 

 

 

2.2.初始化UICollectionViewController,設置展示佈局                     

 

 

 

//初始化 UICollectionViewController

UICollectionViewController *controller = [[UICollectionViewController alloc] initWithCollectionViewLayout:layout]

 

 

 

 

 

 

在對 UICollectionViewController 的 View 進行相關屬性設置和屬性修改時,記得要拿到UICollectionViewController.collectionView 再設置。

 

 

 

 

 

 //設置背景

self.collectionView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"bg_deal"]];

 

 

 

2.3.顯示數據                                           

 

記得分別實現

 

<UICollectionViewDelegate, UICollectionViewDataSource>

 

之後再調用代理數據源方法和代理方法

 

 

 

復制代碼

#pragma mark – 數據源方法

 2 /**

 3  *  第section組有多少個格子(cell)

 4  */

 5 – (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

 6 {

 7     return _deals.count;

 8 }

 9 

10 //每個格子的內容

11 – (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath

12 {

13 //    indexPath.item    某一組的哪一個

14 //    indexPath.section 哪一組

15     // 1.創建cell

16     QCDealCell *cell = [QCDealCell cellWithCollectionView:collectionView indexPath:indexPath];

17     

18     // 2.取出模型,傳遞模型

19     cell.deal = _deals[indexPath.item];

20     

21     return cell;

22 }

 

 

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *