引言
UICollectionView 是 iOS 平臺上一種強大的視圖布局工具，能夠很好地實作網格布局，串列布局等多種布局方式，
首先講下今天的目標，我們將要使用 UICollectionView 來創建仿微博的九宮格內容，首先，目標行數為3，每行顯示3張圖片，總共顯示9張圖片，
實作方式
我們往界面上添加一個 UICollectionView，并創建一個 UICollectionViewFlowLayout 布局類，這里的實作為懶加載的方式：
- (UICollectionView *)collectionView {
if (!_collectionView) {
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
_collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
_collectionView.scrollEnabled = NO; // 設定不讓滑動
[self.view addSubview:_collectionView];
}
return _collectionView;
}
為自定義 cell 注冊到 UICollectionView 中：
[_collectionView registerClass:[GCImageGridCell class] forCellWithReuseIdentifier:kGCImageGridCell];
然后，我們設定 UICollectionView 的資料源協議：
_collectionView.dataSource = self;
接著實作 UICollectionView 的協議內容：
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return self.datas.count;
}
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
GCImageGridCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kGCImageGridCell forIndexPath:indexPath];
NSString *imgName = self.datas[indexPath.row];
cell.imgView.image = [UIImage imageNamed:imgName];
return cell;
}
接著，設定前面的 UICollectionViewFlowLayout 的屬性，將滑動的方向設定為縱向滑動：
layout.scrollDirection = UICollectionViewScrollDirectionVertical; //設定布局方式為縱向布局
接下來，計算每個 item 的大小、item 之間的間距和行距、每個分組之間的間距：
CGFloat screenWidth = [[UIScreen mainScreen] bounds].size.width;
CGFloat horizontal = 16; // 左右邊距
CGFloat itemSpace = 6; // item 的間距
CGFloat itemSize = (screenWidth - horizontal * 2 - itemSpace * 2) / 3; // 計算每個 item 的大小
layout.minimumLineSpacing = itemSpace;
layout.minimumInteritemSpacing = itemSpace;
layout.sectionInset = UIEdgeInsetsMake(0, horizontal, 0, horizontal);
layout.itemSize = CGSizeMake(floor(itemSize), floor(itemSize));
注意：計算item大小時使用到了floor函式向下取整，這是防止每行的 item 有超出螢屏而導致換行的問題
效果呈現
總結
在這篇文章中，我們學習了如何用 UICollectionView 來制作九宮格布局，希望這篇文章能為大家帶來幫助，快來關注我，讓我們一起努力！
關于作者
博文作者：GarveyCalvin
公眾號：凡人程式猿
微博：https://weibo.com/feiyueharia
博客園：https://www.cnblogs.com/GarveyCalvin
本文著作權歸作者所有，歡迎轉載，但必須保留此段宣告，并給出原文鏈接，謝謝合作！
活著，就是為了改變世界！轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/543989.html
標籤：其他
上一篇：什么是push通知欄訊息？