(cache) ソースコード付き！プログラミングなしでネイティブ感満載なアプリをXcode5から作る手順を超詳しく紹介

こんにちは、デジタルガジェット大好きなkubotaです。

昨年の9月に「iOS7対応！プログラミングなしでXcode5からアプリを作る手順を超詳しく紹介」を書いて、おわりにの部分でリスト表示やタブを使った画面を書きたいとしておりました。
遅くなってしまいましたが第二弾ということで今回はプログラミングなしで簡単なリスト表示(テーブルビュー)とタブビューを使うといった記事を書きます。

リスト表示(テーブルビュー)

基本編

まずは、前回を参考にプロジェクトを作成してUINavigationControllerをルートとしてStoryboardを編集してください。
UINavigationControllerをStoryBoardに追加すると一緒にUITableViewControllerが追加されると思いますので、今回は追加されたUITableViewControllerを使います。

UITableViewControllerではプログラミングを行わなくとも固定されたセクションや行数であればStoryboard上で設定することができます。
設定するためにまずは、下画像のメニュー(1)よりTableViewを選択して、右側のタブで左から4つ目を選択(2)してContent項目を『Static Cells』に変更(3)します。
すると１つだったリストが3つになることを確認して下さい。

先ほど『Static Cells』を設定したすぐ下にSectionsという項目があるのですが、ここを変更することで任意のセクション数に変更することができます。
とりあえず、セクション数が1では寂しいので3くらいに変更してみます。

それぞれのセクションは左側のTable View Section(1)から変更できます。
ここで変更できるのはセル数(リストの要素数)とセクションのヘッダーとフッターになります(2)。
ヘッダーとフッターは文字列を入力していない状態では表示されなくなります。ヘッダーやフッターが不要な場合は文字列を削除しましょう。
下画像ではセクション1には要素数2でヘッダーを指定、セクション2には要素数を3でヘッダーとフッターを指定、セクション3では要素数1にフッターを指定した状態になります。

次にそれぞれのセルを編集するのですが、セルはそれぞれ独立していますので、それぞれ自由にUITextFieldなどのパーツを追加したり背景色の変更を行えます。
また、セルにはそれぞれはじめから用意されているセルがあり、それを選ぶことで簡単にタイトルや詳細を入力することができます。
背景色を変更したりパーツを　置きたい場合はセルのスタイルでCustomを選んでおきます。(はじめはCustomのはずです)
ここでCustom以外を選択するとはじめから用意されているセルの形式になります。
その状態でボタンやテキストフィールドなどの必要なパーツをドラッグ＆ドロップで置いていくことができます。

背景色を変更したい場合はセルのContentViewを選択してBackground項目を変更すれば背景色を変更できます。
また、はじめから用意されているセルに関しても背景色や文字色の変更は可能です。ただし、ここでのテキストラベルの背景色はStoryboard上では透明になっているのですが高速化のためとは思いますが白色が設定されてしまうので明示的に同じ色を指定しましょう。
適当にパーツを追加したらかなり適当なテーブルが完成しました。

もうちょっとカスタマイズ

ヘッダーやフッター、セルの高さを変えたいといった要望もあると思いますが、高さの変更も可能です。
左メニューからTable Viewを選択して右メニューの右から2番目のタブを選択するとTable View Sizeという項目がありますのでそれぞれを任意の高さに変更します。
ここではセルの高さを元の倍、ヘッダーの高さも元の高さの倍に変更してみました。結構印象が変わるかと思います。

また、セルに関しては一箇所のセルのみ高さを変えたい、もしくはすべてバラバラの高さにしたいということも可能です。ヘッダーやフッターはStoryboard上では共通の高さのみ変更できるようです。
各セルの高さの変更は左メニューより変更したいセルを選択して、右メニューのTable View Cell内のRow Height項目に数字を入力することで変更できます。ここでDefaultとなっている場合は先ほど設定した高さのままになります。
とりあえず、1番目と2番目のセルのみ高さを元々の高さである44に変更しています。

セル選択で画面遷移してみよう

ここでは特定のセルの選択で画面を移動してみます。
まずは、移動先のUIViewContorollerを追加します。とりあえず適当なものでOKです。
Storyboardの左メニューから画面遷移を行いたいTable View Cellを選択して、右クリックで別メニューを開きます。
メニュー内にSelectionという項目がありますのでそこから遷移したいUIViewControllerに対してドラッグ＆ドロップを行います。するとまた別のメニューが表示されますので、Pushを選択してナビゲーションでの移動にすることが可能になります。たま、Modalを選択してモーダル表示も可能です。前回記事参照になりますがモーダル表示を閉じるにはコピペ程度ですが簡単なプログラミングが必要となります。

セルに画面遷移を追加することで下画像のようにアクセサリービューが表示されてしまいます。

背景色を変えているなどしているとカッコ悪いですね。
背景色を合わせたい場合は、Storyboardの左メニューから該当するセルを選択して、右メニューにBackgroundからセル自身の背景色の変更することで合わせることができます。
また、アクセサリービュー自体を表示したくないといった場合は、左メニューより該当のセルを選択して右メニューのAccessory項目をNoneに変更すればアクセサリービューが表示されなくなります。

また、当然ですがセルに追加したボタンからも画面遷移を行えます。こちらは前回記事を参考に移動してみてください。
この方法だとセルを選択しても画面遷移しないのですがボタンをクリックすると画面遷移できるようになります。この場合セルを選択すると灰色なりに背景色が変わってしますのですが、それを避けたいといった場合は次のようにします。
左メニューから該当するセルを選択して右メニューのSelectionをNoneに変更することでセル選択時に背景色を変更しないようにできます。
画面遷移しない表示だけのセルなどはこの方法をとるのがよいかと思います。

見た目を設定画面のように

iPhoneの設定画面はテーブルビューなのですが、今回のスタイルはちょっと違いました。
設定画面のようなスタイルにしたい場合はテーブルビューのStyleという項目がありますので、スタイルを『Plain』から『Grouped』に変更することで可能になっています。
とりあえず、セル１−２ボタンからの飛び先に新しいUITableViewControllerに変更してスタイルを変更して簡単にセクションやセルの設定を行ってみました。
簡単にするだけでも結構設定メニューっぽくなります。

その他テーブルビューにはセパレータを消すなど色々設定できる項目もあるので試してみてください。

タブ画面について

基本編

タブ画面についてはStoryboard上からできることは限られているのであまりありませんが、次はタブ画面について書きます。
まず、Tab Bar CollectionをStoryboard上に追加します。追加するとすでに2つのUIViewControllerを持っているタブ画面になります。

追加したらまずは、タブのタイトルを変更してみます。タブのタイトルを変更するには左メニューからタブ画面にくっついているUIViewControllerのTab Bar Itemを選択します。選択すると右メニュー内のTitle項目を編集すること変更できます。また、Imageに対して画像を設定することでタブに対してアイコンを設定できます。
標準のタブ項目を使いたい場合はIdentifierでCustom以外を指定しましょう。標準のタブを使用する場合はタイトルの変更はできません。左のタブは標準のタブで右のタブはタイトルのみ設定したタブになります。

画面の追加

タブに画面を追加したい場合はまず、Storyboard上にUIViewControllerやUITableViewControllerを追加します。
そして、左メニューからTab Bar Controllerを選択して右クリックで別メニューを開きます。開いたメニューのView Controllersから追加したいUIViewControllerにドラッグ＆ドロップを行います。これだけで簡単にタブ画面内の画面として登録されます。これを繰り返すことでタブ画面をつくっていくことができます。
もちろんタブ画面内の画面としてテーブル画面を使用することも可能です。

今回作った画面を繋変えるなどしたStoryboardが下画像になります。見た目がひどすぎるのですが、テーブル画面とタブ画面だけでもかなりしっかりしたアプリに見えるような気がします。

おわりに

前回記事の続きとして今回もプログラミングなしで実機で動かすことのできるネーティブiPhoneアプリのモックを作るのに必要そうな画面実装の解説をしてみました。
前回と今回の記事を組み合わせることでプログラミングなしである程度のモックが作成できると思います。しかし、もっと細かいところや実際のデータを取得したいなどといったことがしたい場合はどうしてもプログラミングが必要となってしまいます。機会があれば、プログラミングも混ぜた初心者用の記事も書いてみたいと思います。
今回の記事で作成したプロジェクトは下記のGithubに公開しておきますので、綺麗ではありませんが参考になればとも思います。

・プロジェクト
https://github.com/nanapi/nanapiTechBlog20140312

nanapiではエンジニアを募集中です！

最後に、nanapiでは一緒に働いてくれるエンジニアを募集しています。
Webもアプリも好きって方、一緒に働いてみませんか？

株式会社nanapi(ナナピ) | 募集要項 WEBアプリケーションエンジニア