FESSとJSONその3
20150315修正：インスタンス変数itemsの書き方を修正
[iOS] JSONをパースして配列を取得・テーブルビューに表示
StoryBoardでSegueを使った簡単な画面遷移 - chulip.org
この辺を参考に、JSONのデータをtableview cellに入れ込むだけの機能を作ってみた。tableviewが電波表示のところまで食い込んだり、セルが自動追加されるとナビゲーションバーがセルと一緒に下まで行くのでかなり悩んだ。NavigationControllerってこのためにあったのか？！
完成画像
csny/fess-json · GitHub
test100がアップロードしたプロジェクト。
作成手順
1.xcodeの初期設定
SingleViewで始める。名前や保存場所は適当に。
2.ストーリーボードにある既存のviewcontrollerとクラスファイルViewController.mと.hを削除
3.ストーリーボードのオブジェクト及びクラスファイルを新規作成
ストーリーボードの何もない空間にNavigationControllerを追加。
クラスファイルを新規作成し、CocoaTouchClass→UITableViewControllerサブクラスのTableViewControllerというクラス名のファイルを。
3.5.ストーリーボード操作のコツ
- ストーリーボードでのオブジェクト貼り付けは、必ず縮尺率100%でやる。それ以外の縮尺だと貼り付けできない。
- 何もない場所でControlキー+クリックまたは、Editor→Canvas→Zoomで縮尺変更。
- Commandキー+十字キーもストーリーボードの操作が楽になる。
- オブジェクトはかなり掴みづらくなっているので、オブジェクト一覧みたいなところも使う。
4.「NavigationController」を最初に起動するオブジェクトとして設定
ストーリーボードの「NavigationController」のAttributes inspectorの「is Inityal View Controller」にチェックを入れる。
5.ストーリーボードのオブジェクトとクラスファイルの紐付け
3.で作ったクラスファイル名「TableViewController」をコピーして、
ストーリーボードでRootViewControllerのClassに貼り付けて、リターン。Classの項目は、Identity inspectorにある。
6.RootViewControllerのTable Viewの設定確認と、コードとの紐付け
まずはTable Viewの確認。ストーリーボードのTable ViewのAttributes inspectorを開き、以下の状態になっていること。
Content: Dynamic Prototypes
Prototype Cells: 1
Selection: Single Selection
Assistance editorを選択し、右側の画面を「TableViewController.h」に変更する。
ストーリーボードのTable Viewのオブジェクト上でControlを押しながら、「TableViewController.h」の@interfaceの下の行あたりにドロップ。
StrageがStrongタイプであることを確認し、「tableView」という名前にする。
7.インスタンス変数を宣言しておく
「TableViewController.h」の@interfaceの下あたりに以下を追記。
// property*itemsは手入力、ストーリーボードとのひもづけなし
@property NSArray *items;
貼り付け後の「TableViewController.h」はこうなっているはず。
fess-json/TableViewController.h at master · csny/fess-json · GitHub
8.RootViewControllerのTable View Cellの設定
StyleをSubtitleに変更。identifierに「Cell」と入力。ストーリーボードの操作はここまで。
9.TableViewController.mのコード修正
コードの最終形がこれなので、「TableViewController.m」の中身を丸ごと消して、書き換えてもおk。
fess-json/TableViewController.m at master · csny/fess-json · GitHub
肝は、以下の３つ。
9.1.(void)viewDidLoadの修正。
9.2.(void)getJSONメソッドの追加。
9.3.tableview必須の以下の２つのメソッドを追加。
tableView numberOfRowsInSection:
tableView cellForRowAtIndexPath:
これで完成。
10.おまけ
新しくViewControllerを追加し、
RootViewControllerにボタンを追加し、
ボタンから新しいControllerViewにshow Segue（昔のpush segue、deprecated済み）を追加してやると、
新しいViewControllerに、漏れなくBack機能が付いてきて便利。
NavigationControllerか、やるじゃん！
