SwiftでUITableViewを学ぶその1

Sponsored Link

 

 

こんにちは!ヤマサキです。
今日から数回に分けてSwiftでのUITableViewの徹底解析を行います!
Xcode6からアプリを作るって方や最近触ってなくて書き方忘れた人の為にも朗報!
UITableViewやその周りを細かく勉強していきます!

今日は第一回目ですのでUITableViewって何?から進めていきましょう!

そもそもなぜUITableViewなのか?
簡単なアプリから複雑なアプリまで使わない事はないと言われるぐらい使用頻度が高いです。
そしてXcode6からSwiftが新しく使用できるという事で今一度丁寧に理解する事にしましょう。

環境はXcode6でSwiftからEmptyがなくなったのでStoryBoardをがっつり使います。
てかAppleがStoryboard推奨してるみたいですしね。

まずUITableViewとはiPhoneやiPad,iPodなど様々なデバイスで使われているリストの表示を受け持つ部分です。
セクションに区切られたセルという表示単位を持っていて上下にスクロールできます。

文字だけじゃわからないと言う人の為にこれ!

 

スクリーンショット 2014-10-16 16.21.33



こんなやつです。

3urprise リリースアプリ iDrawer – ID Manager

3urprise リリースアプリ Now To-Do

少しはイメージ湧きましたか?
今日は簡単にUITableViewを作っていきます。

それでは始めます!
まずはXcode6をクリックして下さい。

そしてFileから新規プロジェクトを作成します。

 

スクリーンショット 2014-10-16 16.30.50
項目に適切な文字を入れます。

 

スクリーンショット 2014-10-18 10.32.01

 

Product Name : はアプリ名
Organization Name : は署名
Organization Identifier : は組織の識別子
Language : Swift
Devices : Universal

だいたいこんな感じです。
Nextを押すとどこにプロジェクトを作成するか聞かれるので任意の場所でCreate

 

スクリーンショット 2014-10-18 10.32.42
これでプロジェクトの作成は完成です!
ここから作成したプロジェクトを編集してアプリを作成していくことになります。

まずは左ペインのMain.storyboardを選択しましょう。

 

スクリーンショット 2014-10-16 17.14.59
するとこんな画面になると思います。
これがViewを作っていくstoryBoradってやつです。
ちなみにしたの画像ではViewControllerなるものの全体を見せる為に縮小しています。
スクリーンショット 2014-10-18 11.00.40

 

それではこの真っ白なStoryBoardにUITableViewを乗せてみます。

 

スクリーンショット 2014-10-16 17.34.45

ドラッグするとViewControllerに重なる形でTableViewができます。

 

スクリーンショット 2014-10-18 11.11.03

写真のようになっていればOKです。

では設定したStoryboardと実装部分のコードを紐つけましょう。
まずは右ペイン上のShow the Assistant editorをクリックしてstoryboardとコードを表示させます。

 

 

スクリーンショット 2014-10-16 18.03.58
左がStoryboardで右にViewController.swiftが表示されれば問題ありません。
もし右側にViewController.swift以外が表示されている場合は

 

スクリーンショット 2014-10-16 18.08.44

 

このコードの行き先を変えてみましょう。

AutmaticをManual > SwiftUITableView > SwiftUITableView > ViewControllerと選択してやるとOKです。

では紐つけます。

 

スクリーンショット 2014-10-18 11.28.07
ドラッグするとポップが現れます。
UITableViewを紐付ける際に設定します。

 

スクリーンショット 2014-10-18 11.37.42
Connection : Outlet
Object : View Controller
Name : tableView
Type : UITableView
Storage : Strong

項目を入力して上記と差異がないか確認してからConnect
これでStoryboardとViewController.swiftを紐つけました。

ここまでの流れ
・xcode6を起動してFileから新規プロジェクトを立ち上げ
・最初から用意されているViewControllerにUITableViewを重ねて配置
・ViewControllerに配置したUITableViewとViewController.swiftを紐付ける
ここまででわからないことがあれば最初からやり直しです。
StoryBoardの特性上Viewを主に扱うので”View”や”Controller”など大量にでてきます。
UITableViewやUITableViewControllerやViewControllerなど同じような文字列が多いので気をつけて下さい。

最初の方は意味もわからずUITableViewとUITableViewControllerを取り間違えて一生懸命ViewControllerに重ねようとしてたのを思い出します。

それでは実装部分のコードを書きます。

左ペインのMain.storyboardからViewController.swiftへ選択を変更します。

 

スクリーンショット 2014-10-18 11.16.20
Storyboardがあった場所にコードが表示されればOKです。
その際に表示領域が小さい場合は右ペインのShow the Standard editorをクリックしましょう。

 

スクリーンショット 2014-10-18 11.58.14
現状はこうですね

 

 

これをこうします
ハイライトされている所が変更箇所です

 

 

これで一度プロジェクトのアプリを起動してみましょう。

 

スクリーンショット 2014-10-18 12.43.11

 

 

左上の再生ボタンの形がRunボタンでプログラムの起動するボタンです。
右側のiPhone6とかいてある所を選択して好きなデバイスのシュミレーターで起動してみましょう。

 

スクリーンショット 2014-10-18 12.45.47
こんな感じで起動しましたか?
起動できない方は最初から手順を見直しましょう。

これでViewController + UITableViewはできましたね。
次回はViewController + UITableView + UITableViewCellをやっていきます。

by !

 

 

Sponsored Link
ツイートツイート

SwiftでUITableViewを学ぶその1

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です