2019年2月25日スポンサーリンクこんばんは。今回はアプリ作成に欠かせないのに加えて、特有な設定が多くて初心者が挫折しやすいTableViewを作成する手順をまとめていきます。画面キャプチャを多く使用して、できる限りわかりやすいように説明していきます。この記事はこちらのswift入門のアプリ実践開発編のPart1です〜初心者でもわかるswift入門〜基本文法からiOSアプリを開発するまでこのシリーズではプログラミング初心者の人や、swiftを初めて触れる人、やってみたもののよくわからないという人向けに、swiftの基本文法から実際に動くiOSアプリをXcodeで開発するところまでを解説します。...スポンサーリンクContents今回扱うファイルStoryboardの設定StoryBoardにTableViewを設置するTableViewを画面いっぱいに設定するViewControllerの設定TableViewとViewControllerのヒモづけDelegateとDatasourceの設定TableViewCellの作成xibファイルを作成するIdentifierの設定Labelを設置するViewControllerの書き換えTableViewが表示されるようにViewControllerを書き換えるdelegateとはIndexPathとは少し書き換えてみる今回扱うファイルこちらの記事でプロジェクトファイルを作成しまだいじっていない状態でGitHubのリポジトリを作成しました。今回はこちらのプロジェクトファイルをいじっていきます。【Git】GitHubにiOSアプリの新規リポジトリを作成するこんにちは。今回はswift学習用にプロジェクトを作成して、githubにリポジトリを作成して管理できるようにするまでを説明します。...まず前回プロジェクトファイルを作成した際に、SingleViewApplicationで作成しましたので中身のファイルは、AppDelegate.swiftViewController.swiftMain.storyboardAssets.xcassetsLaunchScreen.storyboardInfo.plistとなっていると思いますが、今回はこれらから、ViewController.swiftMain.storyboardこちらの2つをいじってTableViewを表示できるようにしようと思います。storyboardとviewControllerは1:1で対応するように作成するのが一般的ですが、デフォルトで作成されているこの2つは既に対応するように設定されています。View」というのがでてくるのでそれをこのようにドラッグ&ドロップします。TableViewを画面いっぱいに設定する次にこのままだとTableViewをただのっけただけになるので、tableViewが画面いっぱいになるように設定します。上の画像の赤く囲ったところを押してこのように設定することができます。オートレイアウトの設定をするときに使うものです。すると下の画像のようになります。オレンジになっているのは設定は特に問題なく設定できていますが、まだ画面上で反映されてないので赤く囲った部分を押すことで更新することができます。下の画像のようになりました。デフォルトでは左右にマージンが設定されているのでこれを画面横端いっぱいになるように設定します。margin」という項目にチェックが入っているので外します。右側も同様に行いましょう。Item」のところで違う場所になっているので注意です。設定が完了するとこのようになり、TableViewが画面いっぱいに設定することができました。ViewControllerの設定TableViewとViewControllerのヒモづけこの状態では、ただStoryBoardに貼り付けただけの状態なので、次は中身を描画するための設定をしていきます。それにあたって、ViewControllerでTableViewの中身をどうするかの設定をできるように設定する必要があります。このTableViewとViewControllerのヒモ付を行います。IBOutletを設定します。これはTableViewの上にカーソルを合わせて、commandキーを押しながらドラッグします。次にDelegateとDatasourceを設定します。下のように設定します。DelegateとDatasourceに関しては後ほど説明します。設定が完了すると下の画像のように、3つのコネクションがある状態になっていれば大丈夫です。うまくいかなくて何回も作り直したりしていると、部品は消してもコネクションだけ残り続けて、ない部品を参照してアプリがクラッシュするっていうことに陥ることが多いのでここを確認するようにしましょう。以上をすることで設定したViewControllerでTableViewをいじれるようになりました。TableViewCellの作成xibファイルを作成するつぎにセルのファイルを作成していきます。コードで書いていく方法もありますが僕らのチームではxibファイルを作成して管理しているのでその方法を説明していきます。コマンドNで新規ファイルを作成します。Class」を選択します。file」にチェックをするとXibファイルも作成してくれてヒモ付もされた状態になっています。StoryBoardと同様にUITableViewCellもレイアウトのファイルとコードを書くファイルが分かれていてヒモ付をしてセットで扱います。Identifierの設定ヒモ付は完了していますが、Identifierを設定しないといけません。基本的にファイル名と同じ名前で大丈夫です。あとでTableViewにセルの登録をする際に必要になってくるものです。ここの設定が間違っていて闇に陥るケースが多いのでつづりとかはなるべくコピペしたりして間違えないようにしましょう。Labelを設置するとりあえずLabelをセルの真ん中に設定しました。縦軸横軸に対して中心に設定をこの様にすることができます。こんなかんじになりました。ViewControllerの書き換えTableViewが表示されるようにViewControllerを書き換えるそれではViewControllerを書き換えて実際にTableViewを表示させてみましょう。}}まずこのように書きました。するととりあえずこのように表示されました。動いてそうなので一安心です。delegateとはコードを1つ1つ説明していこうと思いますがその前にdelegateの説明をしていきます。delegateを和訳すると「移譲」という意味で、swift的には実装を託すという意味合いになります。TableViewでいうと、今回の実装方法ではTableViewの移譲先をViewControllerに設定しました。TableViewでは、あとは表示させるセルの個数とか中身とかタップしたらどうするかだけ教えてくれれば、その通りに実現するように実装したからあとはその実装だけよろしく、というようなかんじでViewControllerに託しています。すき家でサイズとトッピングだけ指定してくれれば牛丼がつくられるみたいなかんじですね。先程DelegateとDataSourceの2つを設定しました。それぞれで使い道が異なっています。DataSourceではセルの個数や中身、Delegateではイベント発生時の処理を移譲するようになっています。それぞれ例えばDataSourceでは表示させるセルの個数を設定するメソッドが用意されていたり、Delegateではタップされたときの処理を書くメソッドが用意されています。先程の例ではよく使うメソッドをそれが何をするものなのかを書いていきました。この他にも細かいものはたくさんあるので興味があったら調べてみてほしいです。他の言語をやってる人で、メソッド名が同じものが多かったり、これらのメソッドの呼び出し元が一切かかれてないじゃないことに違和感がある人もあるとは思いますが、引数の中身がそれぞれ違っていて、引数や返り値で何をやっているのかおおよそ検討がつくのではないのかなと思います。あと先程移譲の話をしたと思いますが、ViewControllerで定義したメソッドたちはTableViewに呼ぶ処理が書かれていて、それぞれ適切なタイミングでViewControllerに設定されたメソッドを呼ぶ実装がTableViewになされています。IndexPathとはあとIndexPathについて説明します。cellForRowAtメソッドやdidSelectRowAtメソッドではindexPathがメソッド内で使えます。indexPathというのは対象のセルのセクションとインデックスを持っています。didSelectRowAtメソッドではセルがタップされたときに呼ばれるメソッドで、タップされたセルのセクションとインデックスがindexPathに入っています。cellForRowAtは1つ1つのセルを描画する際に呼ばれて、表示しようとしてるセルの個数分だけ個別に呼ばれます。作られようとしてるセルに対してそのセルのセクションとインデックスがindexPathに入っています。書き換えてみる先程の例では表示はできましたが、すごくしょぼい結果なのでindexPathを踏まえて少し書き換えてみます。Cellをこのように書き換えました。}これをすることで、Labelの文字をbindDataに渡した文字に書き換えることができます。ViewControllerはこのように書き換えました。}}このように書き換えるとどうなるかをイメージしてみてほしいです。下のようになりました。上のセルをタップしたらちゃんとプリントされています。今回はTableViewが簡単に扱えるようになりました。次回はapiから表示するためのデータを取得しそれをTableViewに表示させるのをやりたいと思います。今回のコードはこちらでも確認できるのでよかったらご確認ください。当サイトはエックスサーバーで運営しています。方はこちらの記事を参考にしてください。仮想通貨1【windows】FFmpegをインストールする手順2FFmpegで動画変換!各OSごとのインストール方法と使い方まとめ3【簡単】MacにHomebrewをインストールする方法と基本的な使い方4macOSにXcodeをインストールしよう5HomebrewでMacにFFmpegをインストールする方法と使い方6BootCampでMacにWindows10をインストールする7〜初心者でもわかるswift入門〜基本文法からiOSアプリを開発するまで8【swift入門】apiを叩いてTableViewに表示させる9【Xcode】ファイル追加削除するときの注意10【入門】Reactチュートリアルをやりながら実践入門お問い合わせこちらからお願いいたします。