Swift

Swift:初心者向け!UITableViewの使い方:delegate・datasourceについて


UITableView

 

今回は
UITableViewについてです。

 

UITableViewを使うには、
アプリ開発の最初の関門であるdelegate』『datasource』を使用します。

 

この辺は本当にわけがわからないので、整理しておこうと思いました。

 

ではでは、始めていきます。

プロジェクトを立ち上げてください

Storyboardを開いてください。

デフォルトで置いてあるViewControllerに

UITableViewをこんな感じに配置してください。
f:id:jumprails3303:20161129125752p:plain

しかしこれでは機能しません。
UITableViewCellを置いてあげましょう。

UITableViewCell

f:id:jumprails3303:20161126191038p:plain

CellはTableViewの中のSectionの中にあります。

cell in section in tableview ですね

つまりです。

ざっくりいうと、tableViewに表示されるデータはCell(row)で表示されるということです。

 

それでは、UITableViewCellを置いてあげましょう。
このようになれば大丈夫です。
f:id:jumprails3303:20161129141703p:plain

 

するとこんな感じの注意が出てくるかと思います。
f:id:jumprails3303:20161129141901p:plain

[Prototype table cells must have reuse identifiers]
これは『CellにはIdentifierが必要だよ!』という意味です。

 

Identifierとは

Identifierとは『識別子』の意味です。
swift限定のものではなく、プログラミングをしているとよく見る単語です。

 

識別子とは

識別子とは、オブジェクトに固有の番号や文字列をつけて、
他のものと区別するためのものです。

要は名前です。

 

 

では、CellにIdentifierを入れていきます。

TableViewCellを選択すると、

attributes inspectorで

Identifierの入力ができます。

『beginnerCell』にします。

すると今まで出ていた注意が消えるはずです。
f:id:jumprails3303:20161129144346p:plain

 

次にTableViewをコードと紐付けましょう。

場所はviewDidLoadの上あたり、

名前は『tableView』。ひねりがないですね。。。

f:id:jumprails3303:20161129144948p:plain

 

そろそろdatasource delegateのところです。

TableViewのDelegate・Datasourceについて

このようにViewControlllerを編集してください。

ようやくここまできました。

なぜこれらが必要なのか、

それは、デフォルトのViewControllerには、tableViewCellの高さや、内容を決めることができないからです。

そこで

を追加することで
ViewControllerをカスタムし、
TableViewCellの高さや内容を決めることができるようにしたのです。

こういった記述はTableViewControllerには必要ありません。

 

今回、ViewControllerを使用したためにdelegateやdatasourceを追加する必要があったのです。

それでは、その高さや内容を決めていきましょう。

ViewControllerをこのように編集してください。

 

numberOfRowsInSection

このメソッドでセクションの中にあるセル(行)の数を指定します。
とりあえず、10としていますが、後でまた変えます。

 

numberOfSections

このメソッドでセクションの数を決めます。
これは後で変えたりしません。

 

heightForRowAt

このメソッドでセルの高さを指定してます。
見ての通りですね。
50にした理由はなんとなくです。

 

cellForRowAt

このメソッドでセルの内容を決めます。
ちょっと難しいです。
特にこの

が難しいです。
ここでは先ほど指定した『beginnerCell』を引っ張ってきています。

そして、
そのbeginnerCellに”swift”という文字を表示させるようにしています。

runしてみましょう。
このようになれば成功です!
f:id:jumprails3303:20161129153717p:plain

 

もう少し、
深く掘り下げます。
このままでは、どのセルにも同じ文字しか表示できません。
ViewControllerをこのように編集しましょう。

これで完成です!

加えたコードの解説をします!

これはただの配列です。

セルの数を配列の数と同じにしました。

 

配列arrayの内容をセルに表示させます。

indexPath.rowによってセル番号を取得し、

セル番号とarrayの番号と同じものを表示できるようにしました。

これにて終了!!!


コメント

コメントを残す

*