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

iPhone アプリ開発でUITableView は基本のUIです。
TableViewのテキストと画像のセルが選択された時の画面遷移を簡単に説明します。

  • Segue
  • Identifier のキーワード
  • didSelectRowAtIndexPath

Swiftは こちら です

sponsored link

UITableView 画面遷移

 
環境:
Mac: 10.9.1
Xcode: 5.0.2
iPhone: iOS 7.0.4
TableViewのセルにテキストと画像を入れる のTable View が作成できたところから始めます
 
最終的なイメージは下のように、いずれかのCell を選択するとそのCellの画像が画面に表示される
というものです。
 
iOS Simulator Screen Shot 2014.11.17 20.46.52
 
iOS Simulator Screen Shot 2014.11.17 20.47.04
 
作成の流れは

  1. 画面遷移先の View Controller を新しく作成
  2. ストーリーボードでの Segue の設定
  3. セルが選択されたときの挙動をコーディングする

 

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

 
Main.storyboard を選択して、右端下にあるライブラリーエリアの Object Library から
View Controller を選択
 
view_controller_1
 
スクリーンへドラッグ・アンド・ドロップします
 
view_controller_2
 
メニューの「New File…」 から
ViewController.h, ViewController.m を作成
Objective-C class で、
Subclassは ViewController とする
 
ストーリーボードで View Controller を選択して
ライブラリーエリアの Identity Inspector から、
Custom Class を View Controller に選択し設定する
 
view_controller_3
 

2. ストーリーボードでの Segue の設定

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

  1. Table View Controller の下の黒いバーにあるアイコンを右クリック
  2. manual の+をつかんで View Controller に持っていく
  3. View Controller 選択肢がでるので modal を選択する

 
segue_1
 
成功すれば2つのViewがつながり矢印が出ます
 
segue_2
 
この矢印の上にできたアイコンを選択し
ライブラリエリアにある Attributes Inspector を選択
 
segue_3
 
toViewController」と記述する、このキーワードは画面遷移で使われる
 

3. セルが選択されたときの設定をする

 
View Controller に Image View を設定する
 
vc_1
 
TableView.h に
#import “ViewController.h”を追加
TableView の DataSource と Delegate をセット
 

 
TableView.m にセルが選択され、それにより画面遷移する内容を記述
 

 
indexPath.row でCellの番号が分かります
 

 
ViewController.h に選択された画像名をプロパティで設定
@property NSString* imageName;
 

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

 
もちろん、画像を Property list ではなく NSArray に格納して、そこから引き出すことも可能です。
 
View Controller を右クリックして New reference Outlet とView Controller Scene の imageView を結ぶ
 
vc_2
 
ビルドして実行すると
 
iOS Simulator Screen Shot 2014.11.17 20.46.52
 
No.1のセルを選択すると
 
iOS Simulator Screen Shot 2014.11.17 20.47.04
 
アスペクト比を維持して画面いっぱいに画像が表示されます。
 
こちらの Apple Store で公開中のアプリは
TableView を使っています
ダウンロードしてみてください
Peace of mind, Japan
 

ページのトップへ戻る
 
sponsored link

シェアする

  • このエントリーをはてなブックマークに追加

フォローする