Swift

Swift:超初心者向け!UITableViewControllerの使い方(1)


今回はUITableViewControllerの使い方についてメモして行きます。

 

UITableViewControllerとは

twitterのツイートが並んでいる画面や

LINEの友達一覧、

Facebookの近況など

どんなアプリにもリストってありますよね。

こんな感じに線で区切られたものです。
f:id:jumprails3303:20161126184114p:plain

これをカスタマイズすると
有名アプリのようなおしゃれな感じなります。

作成タイム

まずは、新しいプロジェクト立ち上げ
storyboardを開いてください。

①おそらく、デフォルトのUIViewControllerが置いてあると思います、それを消しましょう!deleteです!

②そしてその真っさらなstoryboardにUITableViewControllerを配置してください

③attributes inspectorボタンをクリックしてください。

④UIViewControllerを消してしまったので、RUN直後に表示されるViewControllerがない状態なので、『is initial view controller』にチェックを入れましょう。

f:id:jumprails3303:20161126184822p:plain

次に 配置したUITableViewControllerに対応したファイルを作成します。
『New File…』をクリックしてください。
f:id:jumprails3303:20161126185201p:plain

そして、左上の『Cocoa Touch Class』を選択してNextをクリック!
f:id:jumprails3303:20161126185437p:plain

 

ここでsubClassにUITableViewControllerを選択して、

classは『TableViewController』にしましょう!!

 

するとこのようなファイルが作成されたかと思います。

コメントアウトが長いですねー。。。

でもここが大事なのですよ。

 

そしてこのように編集してください。
いらない部分は削って
必要な部分はコメントアウトを解除します。
少し数も変えて、

このようにしましょう。

コードの解説!

コードを解説していきます!

numberOfSections

ここはセクションの数を決めています。今回は1つに設定しました。
実はこのTableView、
セクションとセルという二つの枠で成り立っています。

セクションというのが、大きな枠で、
セクションの中にセルがあります。

f:id:jumprails3303:20161126191038p:plain

numberOfRowsInSection

ここで設定しているのが、
セルの数です。
今回は5つに設定しています。

cellForRowAt (超重要)

ここでは実際に表示されるセルの内容を決める超重要で、一番難しいところです。
デフォルトではコメントアウトされている部分ですが、解除しました。
ここに

『reuseIdentifier』という名前のセルの内容を決めるよ!
ということが書いてあります。

でもreuseIdentifierなんて名前をセルにつけたおぼえはありませんよね。

今からつけます!!

CellのIdentifier!!!

storyboardをひらいて

①『Table View Cell』をクリック

②毎度のことながらattributes inspectorのボタンをクリック

③Table View CellのIdentifierを『reuseIdentifier』に設定!
f:id:jumprails3303:20161126193516p:plain

これでセルの設定は完了!

次はコードファイルとstoryboardを紐付け!

まずは

①Storyboard上のTableViewControllerの黄色いマークをクリック!

②謎の新聞紙のようなマークをクリック!

③Classを『TableViewController』に設定!
f:id:jumprails3303:20161126193526p:plain

これであらかた終わりです!!

 

RUNしてみましょう!

おそらく
真っさらさらです!

なぜなら
まだ、セルの内容を書いていないからです。

TableViewController.swiftを
このように編集してください、

 

新しく二行足しました。

これはただの配列です。説明は省きます。

 

cellのtextLabelのtextを上の配列からとってくる
という処理をしています。
配列は
array[番号]でとってくることができるので、

indexPath.rowという、セル番号をとってくるものをつかって、
セルによって違うものをとってくるように設定しています。

RUNしてみましょう!

f:id:jumprails3303:20161126195442p:plain
このような画面が出てるれば成功です!


コメント

  1. 匿名 より:

    こちらのブログのお陰で色々助かりました。
    ありがとうございます

コメントを残す

*