こんにちは、クラウドナインアップスのショウです。初心者プログラマーの自分が初めて作ったアプリ「ファイナンス・経済ニュース」
初心者がつまづきやすいポイントともに、アプリ完成までを解説していきます！
アプリの紹介
まずは僕が作ったアプリ「ファイナンス・経済ニュース」をご紹介します。
アプリ概要
＊金融(ファイナンス)、経済に関するニュースが読める
＊リアルタイムの為替情報を見ることができる
＊お気に入り機能もあるので時間があるときにゆっくりと読むこともできる
＊気になったニュースはTwitter,Facebook,LINEで共有することも出来る
アプリ画面
使用ツール
今回は「Single View Application」を使っています。
アプリ作成
概要
①TableView
②XMLParser
③WebView
④戻る・進む・リロード（更新）
⑤お気に入り機能
手順 ①TableView
では作っていきましょう。
まず、＊Navigation Controller＊を追加し
「View Controller」に付いている矢印を「Navigation Controller」にドラッグで移動させてください。
そして、「Navigation Controller」に接続されている「Root View Controller」は消してしまいましょう。
すると「Navigation Controller」と「View Controller」が残ります。
そうしたら「Navigation Controller」を右クリックで「View Controller」にドラッグ＆ドロップします。
画面遷移の種類を聞かれますので一番下の「root view controller」を選びましょう。
「root view controller」を選ぶとこのマークで接続されます。
「Navigation Controller」と「View Controller」を繋げたら＊Table View＊と＊Table View Cell＊を
「View Controller」に追加してください。
追加したら、「Table View Cell」をクリックして
Style：「Subtitle」を選択し、
identifier：「Cell」と入力してください。
そうしたら storyboard の TableViewと.h (ヘッダーフィル)をひも付けしましょう。
Outlet であることを確認し、
名前を「 tableView1」にしたらひも付けしてください。
ここで、メソッドファイル(.m)に２つほど警告が出ますが、UITableViewの必須メソッドが記述されてないからです。
(あとで記述するので今は問題ないでしょう。)
テーブルビューは必須メソッドが2つある、ということを覚えて下さい。
＊テーブルにいくつのデータがあるか
＊テーブルの中のセルはどんなセルか
この2つのメソッドはUITableViewを使う上では必須となります。
では、コードを書いていきましょう。
１，ヘッダーファイル(.h)
ヘッダーファイル(.h)の＠interfaceの末尾に
<UITableViewDelegate,UITableViewDataSource>
と記述してください。
２，メソッドファイル(.m)の viewDidLoadに、「テーブルに表示するデータは誰に聞けばいいのか（dataSource）」
と「テーブルを選択されたとき誰にいえばいいのか(delegate）」を設定する。
|
1 2 |
self.tableView1.delegate = self; self.tableView1.dataSource = self; |
３，セクション数を設定する
テーブルを表示する時、テーブルビューはまず「いくつセクションがあるのか？」を聞いてきます。
そのために、「numberOfSectionsInTableVIew」というメソッドが呼ばれますので「return セクション数」で答えるように
します。
|
1 2 3 4 |
//セクションの数を設定 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } |
４，行数を設定する
テーブルビューは次に、セクション毎に「このセクションには何行あるか？」と聞いてくるので、行の数を答えます。
「numberOfRowsInSection: section」というメソッドが呼ばれます。
どのセクションかは、sectionの値を見るとわかるので、そのセクションは何行あるかを、「return 行の数」で答えてあげます。
|
1 2 3 4 |
//行数を設定(テーブルにいくつのデータがあるか) - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return 20; //<- 今は行数を20としておきます } |
５，行に表示するデータを設定
テーブルビューは次に、「このセクションのこの行には、何を表示するの？」と聞いてくるので内容を答えます。
「cellForRowAtIndexPath:indexPath」というメソッドが呼ばれるので
どのセクションかはindexPath.sectionを、どの行かはindexPath.Rowを見るとわかります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
//行に表示するデータを設定(テーブルの中のセルはどんなセルか) - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { //このデリゲートメソッドはセル毎に実行される。 / /再利用できるセルがあれば再利用する UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell”]; //再利用できなければ新規で作成 if (cell == nil) { cell = [[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"Cell"]; } // “newsArr”から”title”のキーをテキストラベルに表示する(〜#2〜) cell.textLabel.text = [[self.newsArr objectAtIndex:indexPath.row]objectForKey:@"title"]; // “newsArr”から”date”のキーをディティールテキストラベルに表示する(〜#2〜) cell.detailTextLabel.text = [[self.newsArr objectAtIndex:indexPath.row]objectForKey:@"date"]; // 最後にreturn cellをしてcellを返してあげる return cell; } |
第一回まとめ
一回目となる今回は「TableView」を作るところまでをまとめました。
記事を読んでもよくわからない方は、是非「クラウドナインアップス」へご相談ください。
〜＃２へ続く〜
コメントをどうぞ