iOS開發 純代碼創建UICollectionView 聽語音

iOS開發 純代碼創建UICollectionView

聽語音

• 
  

• 1

• 2

• 3

• 4

• 5

• 6

• 7

分步閱讀

一鍵約師傅

百度師傅高質屏和好師傅，解救你的碎屏機

      習慣了使用xib和StoryBoard創建UICollectionView項目工程的伙伴，需要轉換使用純代碼來實現，想避免碰更多的壁，就需要認真 了解創建UICollectionView過程了。創建UICollectionView比創建UITableView更加復雜，初始化方式也是相對奇 特。以下是使用純代碼創建UICollectionView的方法。

工具/原料

• MAC OS X操作系統：：OS X 10.11.5

• 編譯環境：Xcode 7.3.1

方法/步驟

1. 1

   創建工程項目和視圖控制器

         創建工程項目UICollectionView，新建一個UIViewController。選中工程，右鍵-New File…選擇“Cocoa Touch Class”-Next，給個合理的名稱ViewController，再Next完成。

         在AppDelegate.m文件包含#import "ViewController.h"。添加代碼：

   UINavigationController *navC = [[UINavigationController alloc]initWithRootViewController:[[ViewController alloc]init]];

       self.window.rootViewController = navC;//將navC設置為根視圖控制器。

   修改一下ViewController的顯示樣式，執行編譯，run一下，效果如圖。

   

2. 2

   創建自定義UICollectionViewCell

        選中工程，右鍵-New File…選擇“Cocoa Touch Class”-Next，選擇繼承于UICollectionViewCell類，給個合理的名稱CollectionViewCell，再Next完成。

         1、自定義所需要的控件，比如UIImageView：

   @property(nonatomic ,strong)UIImageView *imgView;

         2、初始化控件，在方法- (id)initWithFrame:(CGRect)frame中實現：

   self.imgView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 30, 150, 140)];

   self.imgView.backgroundColor = [UIColor groupTableViewBackgroundColor];

   [self addSubview:self.imgView];

   

   

3. 3

   實現初始化UICollectionView方法

         1、在ViewController.h添加事件代理和數據源代理<UICollectionViewDataSource,UICollectionViewDelegate>。

         2、在ViewController.m創建UICollectionView。需要使用UICollectionViewFlowLayout來創建， 使用方法- (instancetype)initWithFrame:(CGRect)frame collectionViewLayout:(UICollectionViewLayout *)layout;如果只用普通的init方法，是實現不了的。

         3、設置flowLayout的屬性。

         4、初始化CollectionViewCell和頭部。

   

   

4. 4

   實現UICollectionView的Delegate、DataSource方法

         1、返回Items個數：collectionView: numberOfItemsInSection: 

         2、返回Sections個數：numberOfSectionsInCollectionView:

         3、返回Cell顯示內容：collectionView: cellForItemAtIndexPath:

         4、返回頭部尾部顯示內容：collectionView: viewForSupplementaryElementOfKind: atIndexPath:

         5、選中時調用的方法：collectionView: didSelectItemAtIndexPath:

   

5. 5

   顯示CollectionView及設置數據源

         在viewDidLoad方法內：[self.view addSubview:self.collectionView];

   代 碼self.collectionView會自動調用setter、getter方法。即調用- (UICollectionView *)collectionView方法初始化并返回collectionView。然后addSubview:到self.view上。配合廣告欄和定時 器，完成顯示。

   

   END

代碼下載地址

• https://github.com/cjq002/UICollectionView-Pure-code.git

• 代碼運行效果如圖。

  

  END