見出し画像

【Objective-C】UIViewControllerで描画したUITableViewでカスタムセル(UITableViewCell) を採用する方法【Xcode10.1】

こういう人に向けて発信しています。
・自前で用意したUITabelViewCellで描画を行いたい人
・UITableViewCellをカスタマイズしたい人
・Objective-C初心者

前回の記事

こちらの記事では、
初心者が余計なノイズに気を取られて学習の妨げにならないように、
シンプルで最小限の記載のみしております。

今回は応用編ということで
自分で作成したUITabelViewCellを採用してみましょう。

UITabelViewCellとは

UITableViewCellクラスは、テーブル(UITableView)表示する時、1つ1つのセルを管理するクラスです。

ざっくりの説明にはなりますが、
テーブルビュー のセル専用のクラスと思ってもらってOKです。

ざっくり手順説明

(1)UITableViewCellクラスを新規作成する。
(2)UITableViewCellにObject(部品)を置いていく。
(3)2番の部品をアウトレット接続する。
(4)ViewController.mでコードを記載してカスタムセル を採用する。

UITableViewCellクラスを新規作成する。

「Cmd」+「n」で「Cocoa Touch Class」を選択し、

上記画像と同じクラスを作成してください。
SubClass of(継承するクラス選択)で
「UITableViewCell」を選ぶのが重要です。

UITableViewCellにObject(部品)を置いていく。

作成したクラス名.xibを開いてください。
私はCustomCellTableViewCell.xibという名前になってます。

右上のオブジェクトを出すボタンから
・UILabel
・UIButton を配置してください。

左のcustomCellを押下した時に出てくる「identifier(識別子)」は、
カスタムセルの名前になります。お好きな名前をつけてください。
(この手順は必ず実装必要です。)

2番の部品をアウトレット接続する。

CustomCellTableViewCell.hを開き、下記のように記述します。

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface CustomCellTableViewCell : UITableViewCell
@property (weak, nonatomic) IBOutlet UILabel *cellLabel;
@property (weak, nonatomic) IBOutlet UIButton *cellButton;

@end

そうするとpropertyの左側に
○(アウトレット接続未接続)が出てきますので、
右側ペインでCustomCellTableViewCell.xibを開き、
アウトレット接続してください。

上部画像のボタンを押下すると、2画面開く事ができます。

ViewController.mでコードを記載してカスタムセル を採用する。

あとは下記のように記述すればOKです。
前回記事と比較して変わった点など解説していきますので、
前回記事を開いてコード対比してみてください。

#import "ViewController.h"
#import "CustomCellTableViewCell.h"  //UITableViewCellのクラスのヘッダファイルをインポートしましょう。

@interface ViewController ()<UITableViewDelegate,UITableViewDataSource>

@end

@implementation ViewController{
    //インスタンス変数の宣言 //これにより、このインスタンスのインスタンスメソッドからアクセスが可能になる。
    //各インスタンスメソッドでアクセスする時は tableViewでアクセス可能。
    UITableView *tableView;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    //tableViewの初期化
    //initWithFrame(初期化しつつFrame指定している)
    tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height) style:UITableViewStylePlain];
    
    /*
     tableViewにはUITableViewDelegate,UITableViewDataSource 2つのデリゲートが存在しており、
     「delegateを処理するのはこのインスタンス(self)ですよ」と宣言する必要がある。
     */
    tableView.delegate = self;
    tableView.dataSource = self;
    
    // カスタムセルを使用  //標準セルを使う時には書きませんでしたが、カスタムセルを使用する際は必要になります。
    UINib *nib = [UINib nibWithNibName:@"CustomCellTableViewCell" bundle:nil];
    [tableView registerNib:nib forCellReuseIdentifier:@"customCell"];
    
    //このインスタンスのViewにtabelViewを描画する。
    [self.view addSubview:tableView];
}

#pragma #UITableView Datasource(実装必須)

//row = 行数を指定するデリゲートメソッド
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
    //必ずNSInteger型を返してあげている。
    return 30;
}

- (UITableViewCell *)tableView:(UITableView *)tableView
         cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //標準で用意されているTableViewを利用する場合。
//    NSString *cellIdentifier = @"Cell";
//    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier];

    //カスタムセルを使用する場合
    CustomCellTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"customCell" forIndexPath:indexPath];

    //もしcellが初期化されないでnilの場合は標準で用意されているセルを使いましょう。
    if (!cell) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"];
    }
        return cell;
}

@end

ViewController.mで追加したコード解説

#import "CustomCellTableViewCell.h"  //UITableViewCellのクラスのヘッダファイルをインポートしましょう。

カスタムセルを作成したクラスをインポートしましょう。


UIViewControllerでは- (void)viewDidLoad の処理内に、
カスタムセルを使用する宣言をします。

    // カスタムセルを使用  //標準セルを使う時には書きませんでしたが、カスタムセルを使用する際は必要になります。
    UINib *nib = [UINib nibWithNibName:@"CustomCellTableViewCell" bundle:nil];
    [tableView registerNib:nib forCellReuseIdentifier:@"customCell"];

上記の補足になりますが、
1行目は@"CustomCellTableViewCell"、つまりクラス名になります。
2行目に関しては手順2で定義した識別子を入れてください。(重要)


- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section内には、

    //カスタムセルを使用する場合
    CustomCellTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"customCell" forIndexPath:indexPath];

    //もしcellが初期化されないでnilの場合は標準で用意されているセルを使いましょう。
    if (!cell) {
        cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"];
    }

こちらを記載しましょう。
@"customCell"はカスタムセル の識別子になります。
クラス名を入れてしまうと落ちてしまうので気をつけてください。

シミュレーターの結果

問題なく描画できました。


この記事が気に入ったらサポートをしてみませんか?