iOS 開發筆記 - Use UICollectionView without Storyboard and XIB

最近才發現這個 Class ，真是乃覺三十里 XD 有可能已經習慣自己刻 UITableViewCell 了 Orz 所以一直沒去學習新技能，這次看到一些特效後，原本以為單純手動安排 View 變化，仔細一看才發現 UICollectionView 啦，就順手筆記一下，此外，坊間多為使用 Storyboard、XIB 的做法。

1. Create an ViewControler extends UIViewController
2. Add UICollectionView *collectionView property
3. Init collectionView with UICollectionViewFlowLayout
4. Use UICollectionViewDelegate and UICollectionViewDataSource
5. Implement collectionView:numberOfItemsInSection: and collectionView:cellForItemAtIndexPath:

如此一來，就可以動了 XD

//
// TestCollectionViewController.h:
//
#import <UIKit/UIKit.h>

@interface TestCollectionViewController : UIViewController
@property (nonatomic, strong) UICollectionView *collectionView;
@end

//
// TestCollectionViewController.m:
//
#import "TestCollectionViewController.h"

@interface TestCollectionViewController () <UICollectionViewDelegate, UICollectionViewDataSource>

@end

@implementation TestCollectionViewController

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 10;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell * collectionViewCell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
    
        CGFloat comps[3];
        for (int i = 0; i < 3; i++)
            comps[i] = (CGFloat)arc4random_uniform(256)/255.f;
        collectionViewCell.backgroundColor = [UIColor colorWithRed:comps[0] green:comps[1] blue:comps[2] alpha:1.0];
    return collectionViewCell;
}

- (UICollectionView *)collectionView
{
    if (!_collectionView) {
        UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
        flowLayout.itemSize = CGSizeMake(100, 100);
        flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
     
        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, 300, 300) collectionViewLayout:flowLayout];
        _collectionView.delegate = self;
        _collectionView.dataSource = self;
        _collectionView.backgroundColor = [UIColor whiteColor];
        [_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"Cell"];
    }
    return _collectionView;
}

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
 
    [self.view addSubview:self.collectionView];
 
    // Do any additional setup after loading the view.
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

iOS 開發筆記 - 設定 UIButton 發動 Storyboard Segue 事件（performSegueWithIdentifier）

使用 Storyboard 處理多個 UIViewController 進行切換時，可以很簡單地透過按住 ctrl + 元件（如 UIButton），拖拉到指定的 UIViewController ，完成 UIViewController 切換工作。然而，有時希望按了元件後，做完一堆事才切換到指定的 UIViewController ，這時候就要稍微更改 Segue 發動的流程。

例如，目前共有 AUIViewController 跟 BUIViewController ，其中 AUIViewController 上頭有一個 AUIButton ，當點選完 AUIButton 時，做完一些要事，再切換到 BUIViewController。

開發上，在 Storyboard 上，先在 AUIViewController 點一下，並按住 AUIViewController + Ctrl 後（並非點 AUIButton），拉條線到 BUIViewController 上，以此建立一個 Storyboard Segue 叫做 "ChangeViewController"，接著把 AUIButton 拉條線到 AUIViewController.m ，做個  IBAction ，代表點選 AUIButton 將發動的動作，剩下的程式碼：

AUIViewController：

- (IBAction)AUIButtonEvent:(id)sender {
// Step 1 : doing …

// Step N : fire a segue event
[self performSegueWithIdentifier:@"ChangeViewController" sender:sender];
}

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if ([segue.identifier isEqualToString:@"ChangeViewController"]) {
        UIViewController *target = segue.destinationViewController;
        if ([target isKindOfClass:[UINavigationController class]]) {
            target = [[(UINavigationController *)target viewControllers] lastObject];
        }
        if([target isKindOfClass:[BUIViewController class]]) {
            BUIViewController *v = (BUIViewController *)target;
            // … other setting …
        }
    }
}

如此一來，當點選 UIButton 時，可以先做完事再切過去指定的 UIViewController 了，當然，也可以讓一個 UIButton 依照事件條件，切換到多個 UIViewController 。

iOS 開發筆記 - Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'unable to dequeue a cell with identifier myCell - must register a nib or a class for the identifier or connect a prototype cell in a storyboard'

 

最近摸 Storyboard 一陣子，偶爾還會犯一些傻 bug ，就是 Identifier 設錯地方 XD 例如跑去 Identity Inspector 的 Identity 之 Restoration ID ：



結果程式一跑時，就噴訊息了：

** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'unable to dequeue a cell with identifier myCell - must register a nib or a class for the identifier or connect a prototype cell in a storyboard'

解法就是開啟 storyboard 後，仔細查看左邊的 Document Outline 之 UITableViewController 裡的 Table View Cell 是不是有被標記起來，接著去看看右邊 Attributes Inspector 顯示的 Identifier 是不是跟程式碼一樣的，如此就能 debug 啦。

忘記是不是 iOS 5 SDK 開始，預設的 UITableViewController 的範例程式都是寫成綁定在 Interface builder (xib) / Storyboard 的寫法：

static NSString *CellIdentifier = @"myCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier forIndexPath:indexPath];

早期 iOS 4 SDK 預設 UITableViewController 之 (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 寫法：

static NSString *CellIdentifier = @"myCell";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
        cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}

早期 Interface builder (xib) 的用法，須寫程式註冊 Nib：

- (void)viewDidLoad
{
[super viewDidLoad];
[self.tableView registerNib:[UINib nibWithNibName:@“MyCell" bundle:nil]
forCellReuseIdentifier:@“myCell”]; // "MyCell" for MyCell.xib
}

iOS 開發筆記 - 解決 Storyboard UITableViewCell contentView 第一次設定 subViews frame 失效問題

為了讓自己趕快習慣 Storyboard 開發模式，瘋狂地用 Storyboard 做事 XD 除了降低原本的開發速度外，接著碰到一些好像是 bug 的奇妙問題？

這個問題是在 Storyboard 內已經拉好一個 UITableViewController ，接著在裡頭增加 UITableViewCell 後，再上頭加多個 ImageView 把玩，然而，希望 device rotation 後能後平均地顯示在 UITableViewCell 裡頭，例如有五個 ImageView 可以平均地分布。

此時在 (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath 已經完成重新計算各個 ImageView 的 frame 座標。

由於 Storyboard 是以 Portrait 模式設計，因此裝置一開始從 Portrait 轉換到 Landscape 時，一切都正常顯示。但如果裝置一開始就是在 Landscape 模式時，反而那些 ImageView 卻還是依照 Storyboard 裡的 Portrait 模式設計，無論我把他們的 frame 座標更新也無用。（但經過 device rotation 後，會顯示正常）

不曉得這是不是 bug ？總之，最後就想到一招就是第一次強制 ImageView 重新歸位 XD 希望這招之後可以拿掉。

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
        // ...

        if( cell.tag == 0 )
        {
                cell.tag = 1;
                for (UIView *v in [cell.contentView subviews])
                {
                        [v removeFromSuperview];
                        [cell.contentView addSubview:v];
                }
        }
        return cell;
}