[iPhone] UITableView セルを選択して画面遷移 (Objective-C)

UITableView でリスト表示ができるようになりました。さらにそのリストのセルを選択して画面遷移をさせる方法を試して見たいと思います。尚、Swiftではこちらの方法です
　

Objective-C
Xcode 9.4

UITableView 画面遷移

基本的なTableViewができたところから始めます。

[iPhone] Table View を作る (Objective-C)

iPhoneなどスマホでは画面のサイズと縦長という特徴のためリスト表示UIが多用されています。iOSではUITableViewを使って以下の...

2018-06-21 14:19

遷移先のViewControllerを作って、Cell選択の機能を追加していきます。
　

目次
1.画面遷移先の View Controller を新しく作成
2.ストーリーボードで Segue を設定
3.セルが選択されて遷移する画面を作成

画面遷移先の View Controller を新しく作成

Main.storyboard を選択して、右端下にあるライブラリーエリアの Object Library から
View Controller を選択してスクリーンへ置きますます。
　

　
メニューの「File」「New」「File…」から
　

　
「iOS」「Cocoa Touch Class」から
　

　
Class名を決め（ここではSubViewController）
UIViewController を選択してプロジェクト内に保存
　

　
SubViewController.h
SubViewController.m
が追加されました。
　

　
storyboardで Sub View Controller を選択して
ライブラリーエリアの Identity Inspector から、
「Custom Class」を SubViewController として選択し設定
　

ストーリーボードで Segue を設定

View Controller と Sub View Controller を segue で結びます

View Controller の上のバーにあるアイコンを右クリック
manual の＋をつかんで遷移先のView Controller に持っていく
選択肢がでるので Present Modaly を選択する

成功すれば２つのViewがつながりSegue、矢印が出きます
　

　
この矢印の上にできたアイコンを選択するとSegueの設定ができるようになるので
ライブラリエリアにある Attributes Inspector を選択して、例えば
toSubViewControllerと記述、このキーワードはこの後で画面遷移で使われます。
　

　

セルが選択されて遷移する画面を作成

Sub View Controller に Image View を設定
　

　
UITableViewができている状態から始めますので、既に基本の設定がされています。そこに画面遷移のコードを追加します。
　
ViewController.h

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource>

@property IBOutlet UITableView *table;

@end

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController<UITableViewDelegate, UITableViewDataSource>

@property IBOutlet UITableView *table;

@end

　
ViewController.m にセルが選択され、それにより画面遷移する内容を記述
#import “SubViewController.h”
を追加
　
Cellが選択された時の挙動は以下のように設定します
indexPath.row でCellの番号が分かります

// Cell が選択された時
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath: (NSIndexPath*) indexPath{
    selectedImage = [imgArray objectAtIndex:indexPath.row];
    // toViewController
    [self performSegueWithIdentifier:@"toSubViewController" sender:self];
}

// Cell が選択された時

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath: (NSIndexPath*) indexPath{

selectedImage = [imgArray objectAtIndex:indexPath.row];

// toViewController

[self performSegueWithIdentifier:@"toSubViewController" sender:self];

}

　
ViewController.m

#import "ViewController.h"
#import "SubViewController.h"

@interface ViewController (){
    NSArray *imgArray;
    NSArray *label2Array;
    NSString *selectedImage;
    
}
@end

@implementation ViewController{
    UIImageView *imageView;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    NSLog(@"viewDidLoad");
    
    imgArray = @[@"img0.JPG",@"img1.JPG",@"img2.JPG",@"img3.JPG",
                 @"img4.JPG",@"img5.JPG",@"img6.JPG",@"img7.JPG"];
    label2Array = @[@"2013/8/23/16:04",@"2013/8/23/16:15",@"2013/8/23/16:47",@"2013/8/23/17:10",
                    @"2013/8/23/1715:",@"2013/8/23/17:21",@"2013/8/23/17:33",@"2013/8/23/17:41"];
    
    _table.estimatedRowHeight = 50;
    _table.rowHeight = UITableViewAutomaticDimension;
    
}

//Table Viewのセクション数を指定
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    // 今回はセクション１個
    return 1;
}

//Table Viewのセルの数を指定
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    // 今回は要素８個
    return 8;
}

//各セルの要素を設定する
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"tableCell";
    
    // tableCell の ID で UITableViewCell のインスタンスを生成
    UITableViewCell *cell =
    [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    
    if(cell==nil){
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];
    }
    
    UIImage *img = [UIImage imageNamed:imgArray[indexPath.row]];
    // Tag番号 1 で UIImageView インスタンスの生成
    imageView = (UIImageView *)[cell viewWithTag:1];
    imageView.image = img;
    
    // Tag番号 ２ で UILabel インスタンスの生成
    UILabel *label1 = (UILabel *)[cell viewWithTag:2];
    label1.text = [NSString stringWithFormat:@"No.%d",(int)(indexPath.row+1)];
    
    // Tag番号 ３ で UILabel インスタンスの生成
    UILabel *label2 = (UILabel *)[cell viewWithTag:3];
    label2.text = label2Array[indexPath.row];
    
    return cell;
}

// セルの高さを設定する
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    float height = 120.0f;
    
    return height;
}

// Cell が選択された時
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath: (NSIndexPath*) indexPath{
    selectedImage = [imgArray objectAtIndex:indexPath.row];
    // toViewController
    [self performSegueWithIdentifier:@"toSubViewController" sender:self];
}

// Segue で次の SubViewController へ移行するときに選択されたCellの画像情報を渡す
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{
    // identifier が toViewController であることの確認
    if ([[segue identifier] isEqualToString:@"toSubViewController"]) {
        SubViewController *svc = segue.destinationViewController;
        // 移行先の ViewController に画像名を渡す
        svc.imageName = selectedImage;
    }
}

@end

#import "ViewController.h"

#import "SubViewController.h"

@interface ViewController (){

NSArray *imgArray;

NSArray *label2Array;

NSString *selectedImage;

}

@end

@implementation ViewController{

UIImageView *imageView;

}

- (void)viewDidLoad

{

[super viewDidLoad];

NSLog(@"viewDidLoad");

imgArray = @[@"img0.JPG",@"img1.JPG",@"img2.JPG",@"img3.JPG",

@"img4.JPG",@"img5.JPG",@"img6.JPG",@"img7.JPG"];

label2Array = @[@"2013/8/23/16:04",@"2013/8/23/16:15",@"2013/8/23/16:47",@"2013/8/23/17:10",

@"2013/8/23/1715:",@"2013/8/23/17:21",@"2013/8/23/17:33",@"2013/8/23/17:41"];

_table.estimatedRowHeight = 50;

_table.rowHeight = UITableViewAutomaticDimension;

}

//Table Viewのセクション数を指定

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {

// 今回はセクション１個

return 1;

}

//Table Viewのセルの数を指定

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {

// 今回は要素８個

return 8;

}

//各セルの要素を設定する

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

static NSString *CellIdentifier = @"tableCell";

// tableCell の ID で UITableViewCell のインスタンスを生成

UITableViewCell *cell =

[tableView dequeueReusableCellWithIdentifier:CellIdentifier];

if(cell==nil){

cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:CellIdentifier];

}

UIImage *img = [UIImage imageNamed:imgArray[indexPath.row]];

// Tag番号 1 で UIImageView インスタンスの生成

imageView = (UIImageView *)[cell viewWithTag:1];

imageView.image = img;

// Tag番号２で UILabel インスタンスの生成

UILabel *label1 = (UILabel *)[cell viewWithTag:2];

label1.text = [NSString stringWithFormat:@"No.%d",(int)(indexPath.row+1)];

// Tag番号３で UILabel インスタンスの生成

UILabel *label2 = (UILabel *)[cell viewWithTag:3];

label2.text = label2Array[indexPath.row];

return cell;

}

// セルの高さを設定する

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {

float height = 120.0f;

return height;

}

// Cell が選択された時

- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath: (NSIndexPath*) indexPath{

selectedImage = [imgArray objectAtIndex:indexPath.row];

// toViewController

[self performSegueWithIdentifier:@"toSubViewController" sender:self];

}

// Segue で次の SubViewController へ移行するときに選択されたCellの画像情報を渡す

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender{

// identifier が toViewController であることの確認

if ([[segue identifier] isEqualToString:@"toSubViewController"]) {

SubViewController *svc = segue.destinationViewController;

// 移行先の ViewController に画像名を渡す

svc.imageName = selectedImage;

}

@end

　
SubViewController.h に選択された画像名をプロパティで設定します。
　
SubViewController.h

#import <UIKit/UIKit.h>

@interface SubViewController : UIViewController

@property NSString* imageName;
@property IBOutlet UIImageView *imageView;

@end

#import <UIKit/UIKit.h>

@interface SubViewController : UIViewController

@property NSString* imageName;

@property IBOutlet UIImageView *imageView;

@end

　
SubViewController.m で受け取った画像名を表示するコードを記述
　
SubViewController.m

#import "SubViewController.h"

@interface SubViewController ()

@end

@implementation SubViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    self.imageView.image = [UIImage imageNamed:self.imageName];
    
    // 画像のアスペクト比を維持しUIImageViewサイズに収まるように表示
    [self.imageView setContentMode:UIViewContentModeScaleAspectFit];
}


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

@end

#import "SubViewController.h"

@interface SubViewController ()

@end

@implementation SubViewController

- (void)viewDidLoad {

[super viewDidLoad];

self.imageView.image = [UIImage imageNamed:self.imageName];

// 画像のアスペクト比を維持しUIImageViewサイズに収まるように表示

[self.imageView setContentMode:UIViewContentModeScaleAspectFit];

}

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

// Dispose of any resources that can be recreated.

}

@end

　
Sub View Controller を右クリックして New reference Outlet とSub View Controller Scene の imageView を結ぶ
　

　
ビルドして実行します。
　

References:
UITableView – UIKit | Apple Developer Documentation
UITableViewCell – UIKit | Apple Developer Documentation