本記事では、UITableViewを使って以下のTwitterのような画面を作るチュートリアルをやっていきます。
最後にソースコードも載せていますので時間のない方はそちらを参考にしてください。
■本チュートリアルの環境
- Xcode10.2
- Swift5.0
併せて読みたい記事↓↓
»【保存版・随時更新】Swiftエンジニアが参考にしたい求人サイト20選まとめた【新卒・インターン・第二新卒・中途・フリーランス】
» 【保存版】UdemyでSwiftを学べるおすすめのコース５選！
本チュートリアルで作るアプリ
画面のデザイン
- ユーザーの画像(UIImage)
- ユーザー名(UILabel)
- ユーザーのツイート(UILabel)
今回必要なものは上の3点です。
上の3点をUITableViewの上にのせていきます。
1.プロジェクトの作成
Xcodeを開いて、Create a new Xcode projectを押します。
Single View AppでNextを押します。
- Product Name…TableViewApp(アプリの名前。好きな名前でOKです)
- Team…NoneでOkです
- Organization Name…tableviewApp(何でもOKです)
- Organization Identifier…tableViewApp(何でもOKです)
- Language…Swift
Nextを押します。
プロジェクトの保存先を決めます。デスクトップなど分かりやすい場所に保存しましょう！
Createを押すとプロジェクトが作成されます。
これでプロジェクトの作成は完成です。
画面の作成
UITableView
まず画面を扱う、main.Storyboardに移動します。
次にUITableViewを画面に置きます。
矢印の先のボタンをクリックして、tableviewと入力します。
TableViewをドラッグアンドドロップで画面に落とします。TableViewは画面のどこに置いてもOKです。
UITableViewのレイアウトを調整します。
AutoLayoutと言って、iphoneの異なる画面でもレイアウト崩れが無いように調整するものを使います。
①tableViewをクリックして選択した状態にしてください。
②の矢印のボタンを押してください。
③上下左右4つの入力欄に全て0を入れて、最後にAdd 4 Constraintsを押してください。
これで、UITableViewが画面どのiPhoneのサイズでも画面一杯に表示されるようになります。
UITableViewCell
UITableViewを動かすためには、UITableViewCellをセットで使います。UITableViewの中の一つ一つの箱(セル)のことです。
UITableViewCellに画像やユーザー名、ユーザーツイートを載せていきます。
tableviewと打つと、Table View Cellが出てくるので
tableViewの上にドラッグ&ドロップで置きます。上の画像のようになると思います。
このUITableViewCellの上にユーザー画像などつけていきます。
ユーザー画像を置く(Image View)
まずユーザー画像から置きます。
uiimageと打つとImage Viewが出てきます。
ドラッグ&ドロップでUITableViewCellの上に載せましょう。場所はだいたいでOKです。
※赤線のような並びになっているか確認してください。なっていなければ、一度imageViewをdeleteキーで消して、もう一度UITableViewCellの中に置きなおしてみてください。
ユーザー名(Label)を準備する
次にユーザー名のLabelを画面に準備します。
labelと打つと出てくるので、ドラッグ&ドロップでUITableViewCellの上に置きます。Image Viewを置いたのと同じです。
Labelの場所と大きさはだいたいでOKです。後で調整していきます。
ユーザーのツイート(Label)を準備する
上のユーザー名の配置と全く同じことを繰り返します。
labelをドラッグ&ドロップでユーザー名の下に置きます。大きさは大体でOKです。
レイアウトの調整
UITableViewCellのレイアウトの調整を行います。繰り返しですが、異なるiPhoneのサイズ(iPhone6SとXRなど)でもレイアウト崩れが起きないようにするためです。
まずユーザー画像(Image View)から調整していきます。
①Image Viewを選択します。
②矢印の先のボタンを押します。
③上下左右の左側に20、Width(幅)に100、Height(高さ)に100を入力して、Add 3 Constraintsをクリックします。
ImageViewの左側のUITableViewCellまでの距離を20、ImageViewの幅と高さを100に設定してます。
次に、矢印の先のボタンをクリックして、Vertically in Containerにチェックを入れて、Add 1 Constraintを押します。これはImage ViewがUITableViewCellの上下の真ん中に来るように調整しています。
同じ要領でユーザー名とユーザーツイートのラベルも調整していきます。
ユーザー名の方(上)のlabelを選択して下さい。矢印の先のボタンを押します。
- 上を0と左を8と入力します。
- Width(幅)を150、Height(高さ)を20と入力します。
- Add 4 Constraintsをクリックします。
次にユーザーのツイートのlabelを選択して下さい。
- 上と左を8、右と下を0にします。
- Height(高さ)を70にします。
- 最後にAdd 5 Constraintsをクリックします。
お疲れ様です！ ここまでで、画面の作成のパートが終わりました。休憩しながら続きもやっていきましょう〜。
UITableViewの処理
前のパートでは、UITableViewの画面を作りました。
このパートではUITableViewの処理を書いていきます。簡単に言うと、何個ツイートを表示するのかやユーザー名を表示したらする処理などです。
でははじめていきましょう。
まず1の黄色のボタンを押します。そして2の矢印の先のボタンをクリックします。
すると下のような画面になるはずです。
もし上手く表示されないようであれば、画面右上の✖︎ボタンで一旦消してやり直してみて下さい。
UITableViewをViewControllerファイルとつなぐ
UITableViewはViewControllerファイルとつなぐことで使えるようになります。
※ViewControllerファイルとはViewController.swiftなどのことで、通常1画面に1ViewControllerファイルが用意されます。このアプリでは、Main.Storyboardという画面に、ViewController.swiftを使っています
TableViewをクリックして、右クリックで、ViewControllerファイルまで引っ張ってきて、指を離します。
すると、下画像のようなポップアップが出てきます。
- Connection…画面にTableViewを繋ぐだけなので、OutletでOKです。何かアクションを起こしたい場合は、Actionを使います。
- Name…TweetTableとつけましょう。他の名前でもOKです。
- Type…UITableViewでOKです。
- WeakのままでOKです。
最後にConnectを押します。
これでViewControllerにUITableViewが、TweetTableという名前で繋がったはずです。
UITableView使用に必要な2つの初期設定
UITableViewを使うには必須の2つの設定があります。
UITableViewDelegateとUITableViewDataSourceです。ざっくり言うとこんなイメージでOKかと思います。分かりずらいので、これから作っていく中で理解して頂ければかなと思います。
①UITableViewDelegate…TableViewのアクションを使えるようにする
②UITableViewDataSource…TableViewのデータを扱えるようにする
ではUITableViewDelegateとUITableViewDataSourceを使えるようにします。
|
1 2 3 4 5 6 7 8 9 10 |
import UIKit class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource { @IBOutlet weak var tweetTable: UITableView! override func viewDidLoad() { super.viewDidLoad() } } |
エラー文が出てきますが、気にしなくてOKです。後で消えます。
ここからは、上で準備したUITableViewDelegateとUITalbleViewDataSourceを使って、UITableViewの処理を書いていきます。
numberofsectionsと打ってみて下さい。画像のような青枠でメソッドが出てくるので、エンターを押して下さい。
|
1 2 3 4 |
//テーブルのセクションの数を決める func numberOfSections(in tableView: UITableView) -> Int { return 1 } |
return 1
と書いて下さい。このnumberOfSectionsメソッドは、テーブルのセクションの数を決めています。今回のアプリはシンプルにツイートを並べるだけなので、セクションは1つです。
なので、return 1 でOKです。
次は、numberofrowsと打ってみて下さい。すると青枠のようなメソッドが出てくるので、エンターを押します。
下の画像のように書いて下さい。
このnumberOfRowsメソッドは、テーブルの行数(今回はツイートアプリなので、ツイートの行数)を決めています。
return 10
今回のアプリでは、10行のツイートを表示します。
次はcellforrowatと打ちます。すると青枠のメソッドが出てくるので、エンターを押します。
cellForRowAtメソッドは、UITableViewの行の設定をするメソッドです。例えば、セルにどのテキストや画像を表示されるのかなどです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
import UIKit class ViewController: UIViewController,UITableViewDelegate,UITableViewDataSource { @IBOutlet weak var tweetTable: UITableView! override func viewDidLoad() { super.viewDidLoad() } //テーブルのセクションの数を決める func numberOfSections(in tableView: UITableView) -> Int { return 1 } //テーブルの行数(Tweetの数)のを決める func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 10 } //テーブルの1行(セル)の設定をする func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { } } |
お疲れ様です！！ ここまでで、UITableViewの処理のパートは終了です。
UITableViewCellの設定
このパートでは、UITableViewCellの設定をやっていきます。大きく分けてやることは、〇〇と〇〇です。
UITableViewCellファイルの作成
UITableViewの設定をするために、UITableViewCellのファイルを作成します。
一旦、赤矢印の先の✖️ボタンを押して、ViewControllerファイルを閉じます。
次に、ViewController.swiftを右クリックします。
上の画像のような選択肢が出てくるので、New File…を選択します。
Cocoa Touch Classを選んで、Nextを押します。
- class…TweetTableViewCellとつけて下さい。
- SubClass of: このファイルはUITableViewCellなので、UITableVIewCellにします。
- Language…Swiftを選びます。
Nextを押します。
問題がなければ、Createを押します。
これでUITableViewCellの作成はおわりです。
作ったUITableViewCellファイルを画面のTableViewのCellと結びつける
以下の順番で進めていって下さい。
①Main.storyboardを選択
②Table View Cellを選択する
③赤線のボタンを押してパネルを開く(既に開いている場合は押さなくて良いです。)
④下線のボタンを押します。
⑤ここに、TweetTableViewCellと打って、画面とTableViewCellファイルを結びつけます。
下の画像のような画面になると思います。
次にCellのIDを設定します。後々ViewControllerファイルで使うので、登録しておく必要があります。
①…下線のボタンを押します
②Identifier…ここにIDを、TweetCellと登録します。
UITableVIewCellファイルにImage ViewやLabelなどをつなぐ
ここでは、画面に配置してある、
- ユーザー画像(Image View)
- ユーザー名(Label)
- ユーザーツイート(Label)
の3点を、TweetTableViewCellファイルに繋いでいきます。
①黄色のボタンを押します。
②矢印の先のボタンを押して、画面を2つに分けます。
すると、ViewController.swiftが開かれるはずです。
これからTweetTableViewCellファイルを開きます。
Automaticの部分をクリックします。
AutomaticからManualに切り替え、
TableViewApp→TableViewApp→TweetTableViewCell.swiftを選んでいきます。
ファイルが開けました。
- awakeFromNib()
- setSelected()
この二つは今回は使わないので、消してもOKです。
では、早速繋いでいきましょう。
Image Viewを右クリックで、TweetTableViewCellに引っ張ってきて、指を離します。
- Connection…つなぐだけなので、OutletでOkです。
- Name…profileImageと名前をつけます
- Type…UIImageView
- Weak
これで、Connectを押します。
同じようにユーザー名Labelと、ツイートLabelも繋いでいきます。
- ユーザー名…profileName
- ツイート…tweet
と名前をつけてつなぎましょう！
テーブルの行(セル)の設定
セルの設定をしていきます。
まずセルを作ります。
|
1 2 3 4 5 |
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = self.tweetTable.dequeueReusableCell(withIdentifier: "TweetCell", for: indexPath) as? TweetTableViewCell return cell! } |
cellという定数に、TweetTableViewCellファイルを登録しています。
withIdentifierの”TweetCell“は上で登録したものです。
ここまでできたので、一旦Main.storyboardに戻ります。
Assets.xcassetsをクリックします。
ここは、アプリで使う画像を置く場所です。
ユーザーのプロフィール写真を10枚用意して、ドラッグ&ドロップでAssets.xcassetsに持ってきます。写真には、1,2,3,4,5,6,7,8,9,10と名前をつけておいて下さい。
上手くいけば、下の画像のようになっているはずです。
お疲れ様です！！ 完成まであと少しです。もう少しなので頑張りましょう〜
最終仕上げ
ユーザー名・ユーザーツイート・ユーザー画像名のダミーデータを準備する
画面にダミーで表示するユーザー名やツイートなどのデータをViewController.swiftに準備します。
|
1 2 3 4 5 6 7 8 |
//ユーザー名 var userNames = ["Alessa","Andreia","Khalil","Carrie","Janie","Fernando","Teresa","Charlize","Philip","Alexander"] //ユーザーツイート var tweets = ["hello","good morning","We’re committing Twitter to help increase the collective health","Back in San Francisco and meeting our first candidate","officially the best office.","Japanese Mascots getting stuck in doors","Good to be in business with Tony and Lauren","“It started with a tweet.” Doesn’t it always?","Our short film, Sister Hearts, is a #Webbys finalist for Best Branded Long Form Video","Its so hot today"] //ユーザー画像 var userPhotos = ["1","2","3","4","5","6","7","8","9","10"] |
ダミーデータが用意できたので、これを使って、テーブルでデータを表示していきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell { let cell = self.tweetTable.dequeueReusableCell(withIdentifier: "TweetCell", for: indexPath) as? TweetTableViewCell cell?.profileName.text = self.userNames[indexPath.row] //① cell?.tweet.text = self.tweets[indexPath.row] //② cell?.profileImage.image = UIImage(named: self.userPhotos[indexPath.row]) //③ cell?.profileImage.layer.cornerRadius = 50 //④ return cell! } |
①userName配列に入っている名前をテーブルに順に並べる
②tweets配列に入っているツイートをテーブルに順に並べる
③userPhotos配列に入っている名前のついた画像をテーブルに順に表示する
これでテーブルにデータを表示する準備が完成しました。
アプリを起動して確認して見ましょう〜。矢印の先の起動ボタンを押します。
しばらく時間を待つと、、
このように表示されます！
最後に画像を丸くしましょう。
④のコードを追加して下さい。
これで画像が丸くなるはずです。もう一度確認をしてみましょう。
完成です！！
お疲れ様でした！ 以上でチュートリアルを終わります〜！
併せて読みたい記事↓↓
»【保存版・随時更新】Swiftエンジニアが参考にしたい求人サイト20選まとめた【新卒・インターン・第二新卒・中途・フリーランス】
» 【保存版】UdemyでSwiftを学べるおすすめのコース５選！
