2017年4月5日水曜日

vol.300 iOSアプリ:リスト表示(前編)

前回、背景画像を設定する予定が挫折してプロジェクトに画像を登録するでとどまってしまいました。
今日は、その続き…ではなく、別のことをやります。
背景画像はまたの機会に…。

今回は、TableViewを使って、リストを表示します。
一番イメージしやすいのは、「設定」アプリかと思います。

「設定」アプリには実際にリストの各項目にアイコンやら設定値やら色々載っていますが、もっとシンプルに文字列が1行並んでいるものを出すだけです。

手順
①画面左側の「Project navigator」より、「Main.storyboard」をクリック。

②画面イメージっぽいのが出てきたら、今度は画面左下の「Object library」より「Table Veiw」を探して選択します。

③選択したら、それをドラッグしてこのように真ん中の画面イメージ(以下、storyboard)全体を覆うようにサイズを調整してください。
かぶらないようにバッテリーマークより少し下ぐらいに持ってくるように微調整。。

④storyboardのTableViewを選択して、controlキーを押しながらドラッグして、ソースコードまで引っ張ります。

⑤ソースコードのところで、手を放すと、こんなのが出てくるので、nameの所に任意の変数名を入力して、「Connect」ボタンを押下します。

⑥ソースコードに、TableViewと変数名が記述されました。

⑦続いてstoryboardより左側にある、「View Controller Scene」と表示されてる箇所にある、TableViewの変数名の所を(ここではTestTable)Controlを押しながらクリック。

⑧すると、黒い吹き出しが出てくるので、「dataSource」・「delegate」の右側の◯にカーソルをあて(カーソルを当てると「+」と表示されます)、そこからドラッグして、storyboardにある、黄色丸の中に白四角があるアイコンまで引っ張ります。
↓ここに引っ張る

⑨すると、黒い吹き出しがこんな感じになるはず。

⑩ ⑨まで終わったら、後はコードを書くだけ。
…と言いたいところですが、例によって、長くなってしまうので、明日の記事で、ソースとちょっと解説をします。

0 件のコメント:

コメントを投稿