今回はGitHubを使うことで画面を左にスワイプするとメニューが現れるようにすることと、お気に入り機能を付け加えてみたいと思います。
アプリ作成
手順⑤ スワイプとお気に入り機能
＊FavoriteControllerファイル
まずはお気に入り機能を実装するための ViewController を追加します。
作業自体は ”「ファイナンス・経済ニュース」 アプリができるまで #3 ”の SegueController の時と同じです。
右クリックで「New File」を選び、
iOS -> Cocoa Touch Class を選んで、
名前を「FavoriteController」にしたら完了です。
＊GitHub – JASidePanel
JASidePanelsを使うとスワイプで画面の切替えができるようになります。
GitHubからJASidePanels をダウンロードしてください。
ダウンロードはこちら ⇒ GitHub – JASidePanels
zipを解凍して「Source」というフォルダから
・JASidePanelController.h
・JASidePanelController.m
・UIViewController+JASidePanel.h
・UIViewController+JASidePanel.m
をプロジェクトに追加してください。
さらに、ビューコントローラー（名前 -> LeftPanelController）を追加してください。
そして、Main.storyboardでJASidePanel用のビューコントローラーを２つと
お気に入り用のビューコントローラーを
追加します。
＊JASideViewController – storyboard
１つは、Custom Class を JASidePanelController に設定し、
矢印をこのビューコントローラーに移動しときます。
２つ目を LeftPanelController に設定して、TableViewとTableViewViewCell を配置し
TableViewCellのidentifierを「Cell」に設定します。
＊FavoriteController
NavigationController を追加してください。
NavigationController には NavigationController と rootViewController がセットになってますが、
rootViewController のほうは消して新たにViewControllerを追加してNavigationControllerとつなげて、
(Relationship -> root view controller でつなげます）
NavigationController の identifier は「NavFavo」と設定します。
rootViewController は
Custom Class -> Class 「FavoriteController」を指定し、
TableView & TableViewCell を配置してTableViewCell は
Style : Basic , identifier : Cell を設定してください。
セルをタップすることでSegueControllerへ画面遷移し、ニュースを見れるようにしたいので
SegueController の WebView へドラッグ＆ドロップして「Selection Segue : push」でつなげます。
また、Storyboard Segue の identifierを「toWebview」に設定し、個別化します。
＊LeftPanelController.h
TableViewとLeftPanelController.hをひも付けします。
を書くのを忘れないようにしてください。
また、「AppDelegate.h」・「AppDelegate.m」・「UIView+JASidePanelCotroller」
にも色々書いていきます。
AppDelegate.h
|
1 2 3 4 5 6 7 8 9 10 11 |
#import <UIKit/UIKit.h> #import “JASidePanelController.h” <- 追加 @class JASidePanelController; <- 追加 @interface AppDelegate : UIResponder <UIApplicationDelegate> @property (strong, nonatomic) UIWindow *window; @property (strong, nonatomic) JASidePanelController *slideViewController; <- 追加 @end |
AppDelegate.m
|
1 2 3 4 5 6 7 8 9 10 |
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { self.slideViewController = (JASidePanelController *)self.window.rootViewController; <- 追加 self.slideViewController.shouldDelegateAutorotateToVisiblePanel = NO; <- 追加 //ストーリボードを取得 UIStoryboard *storyboard = [UIStoryboard storyboardWithName:@"Main" bundle:nil]; <- 追加 self.slideViewController.centerPanel = [storyboard instantiateViewControllerWithIdentifier:@"Nav1”]; <- 追加 self.slideViewController.leftPanel = [storyboard instantiateViewControllerWithIdentifier:@"LeftPanel”]; <- 追加 return YES; } |
UIView+JASidePanelCotroller.h
|
1 2 3 4 |
#import <UIKit/UIKit.h> <- 追加 #import <Foundation/Foundation.h> @class JASidePanelController; |
＊LeftPanelController.m
実装ファイルにも書いていきます。
LeftPanelController.m に「JASidePanelController.h」,「UIViewController+JASidePanel.h」,「AppDelegate.h」
をインポートし、
以下のコードを書きます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@interface LeftPanelController () @end @implementation LeftPanelController { NSArray *siteArr; } - (void)viewDidLoad { [super viewDidLoad]; self.leftTable.delegate = self; self.leftTable.dataSource = self; siteArr = @[@"ニュース",@"お気に入り"]; } |
続いて、TableViewの設定です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
#pragma mark - Table View 設定 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [siteArr count]; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath]; cell.textLabel.text = siteArr[indexPath.row]; return cell; } - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath { NSString *str; switch (indexPath.row) { //TableViewの１行目 = case 0 //TableViewの２行目 = case 1 case 0: str = @"Nav1"; //ニュース break; case 1: str = @"NavFavo"; //お気に入り break; default: break; } self.sidePanelController.centerPanel = [self.storyboard instantiateViewControllerWithIdentifier:str]; } // ヘッダーの高さ -(CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { return 60.0f; } // 行の高さ -(CGFloat)tableView:(UITableView*)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{ return 45.0f; } //セクションを設定(title,color) - (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section { UIView *sectionView = [[UIView alloc] init]; // Sectionの大きさ sectionView.frame = CGRectMake(0.0f, 0.0f, 320.0f, 480.0f);//(x,y,width,height) // 背景色を黒にする。 sectionView.backgroundColor = [UIColor blackColor]; // UIView にラベルを追加する。 UILabel *sectionLabel = [[UILabel alloc] initWithFrame:CGRectMake(20.0f, 15.0f, 300.0f, 40.0f)];//(x,y,width,height) // テキストのタイトル・色を変更 sectionLabel.text = @"ファイナンス・経済ニュース"; sectionLabel.textColor = [UIColor whiteColor]; // ビューにセットして [sectionView addSubview:sectionLabel]; // ビューを戻り値で返すとセクションに反映されます。 return sectionView; } |
シミュレーターで確認してみると、こんな感じになりました。
まだお気に入り画面には何も表示されていません。
なのでこれからお気に入りボタンを作り、ボタンを押したらお気に入り画面にニュースタイトルが表示されるようにします。
＊お気に入りボタンの配置
まずはお気に入り機能を実装するために
SegueControllerのツールバーにお気に入りボタンを追加します。
「Bar Button Item」＆「Flexible Space Bar Button Item」を
SegueCotrollerのツールバーに追加します。
Bar Button Item のidentifier は「Bookmarks」を指定します。
そしたらこの「お気に入りボタン」とSegueControllerをひも付けします。
※「Connection」は「Action」です。間違えないようにしてください。
＊SegueController.m
お気に入りボタンを押すとニュースの「タイトル」・「URL」・「日付」が辞書(NSMutableDictionary）に格納され、そのデータがNSUserDefaultsによって保存されます。
さらに、UIAlertViewでお気に入りに追加されたことを表示します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
#pragma mark - お気に入りボタン - (IBAction)favoButton:(id)sender { // NSUserDefaultを呼び出す NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults]; //辞書(favoDic)を作成し、タイトル・URL・日付を格納 NSMutableDictionary *favoDic = [NSMutableDictionary dictionary]; [favoDic setObject:self.titleStr forKey:@"title"]; [favoDic setObject:self.linkStr forKey:@"url"]; [favoDic setObject:self.dateStr forKey:@"date"]; NSLog(@"favoDic %@",favoDic); // 「お気に入り」を格納する配列を作る NSMutableArray *storeFavoArr = [NSMutableArray array]; // FAVORITEキーがない場合 if (![defaults arrayForKey:@"FAVORITE"]) { [storeFavoArr addObject:favoDic];//"favoDic"を"storeFavoArr"に格納 [defaults setObject:storeFavoArr forKey:@"FAVORITE"];//"storeFavoArr"を"FAVORITE"という名前で"Defaults"に保存 // FAVORITEキーがある場合 } else { NSArray *Arr = [defaults arrayForKey:@"FAVORITE"]; storeFavoArr = [Arr mutableCopy]; // MutableArray(追加・削除などが行える)に変換 [storeFavoArr addObject:favoDic]; [defaults setObject:storeFavoArr forKey:@"FAVORITE"]; } [defaults synchronize]; NSLog(@"FAVORITE ARR %@", storeFavoArr); // UIAlertViewで「お気に入りに追加されました。」（タイトル:お気に入り、ボタン:OK）が表示されるようにする。 // １行で書くタイプ（１ボタンタイプ） UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"お気に入り" message:@"追加しました" delegate:self cancelButtonTitle:nil otherButtonTitles:@"OK", nil]; [alert show]; } |
＊FavoriteController.h
ストーリーボードのFavoriteControllerに配置されているTableViewとFavoriteController.hを
ひも付けし、NSUserDefaultsを再び呼びます。
|
1 2 3 4 5 6 7 8 |
@interface FavoViewController : UIViewController <UITableViewDelegate,UITableViewDataSource> { NSUserDefaults *defaults; } @property NSMutableArray *favoArr; @property (weak, nonatomic) IBOutlet UITableView *favoTableView; @end |
＊FavoriteController.m
お気に入り画面には編集(Edit)ボタンを用意します。
なのでTableViewとEditボタンの設定をする。
SegueController.mで保存されてたfavoDic(お気に入り画面に表示するためのニュースのデータを格納している辞書)を
NSUserDefaultsを介してfavoArrに表示します。
また、セルをタップするとSegueControllerに画面遷移してニュースが表示される様に設定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
#import "FavoriteController.h" #import "SegueController.h" #import "AppDelegate.h" #import "JASidePanelController.h" - (void)viewDidLoad { [super viewDidLoad]; // EditButtonItem(編集のためのボタン、削除機能のみ)を使う。 self.navigationItem.rightBarButtonItem = self.editButtonItem; // NSUserDefaultsのFavoriteキーお気に入りがあるならば、配列を取得する(なければ取得しない。) defaults = [NSUserDefaults standardUserDefaults]; if ([defaults arrayForKey:@"FAVORITE"]) { self.favoArr = [[defaults arrayForKey:@"FAVORITE"] mutableCopy]; } self.favoTableView.delegate = self; self.favoTableView.dataSource = self; } #pragma mark - Table View 設定 //セクションの数 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { return 1; } //行の数 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return [self.favoArr count]; } //セルの中身を記述 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell" forIndexPath:indexPath]; if (cell == nil) { cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:@"Cell"]; } cell.textLabel.text = [[self.favoArr objectAtIndex:indexPath.row] objectForKey:@"title"]; cell.detailTextLabel.text = [[self.favoArr objectAtIndex:indexPath.row] objectForKey:@"date"]; return cell; } // お気に入りSceneのEdit(編集)を許可するかどうか - (BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSIndexPath *)indexPath { return YES; //編集を許可している } // Editモードへの切り替え - (void)setEditing:(BOOL)editing animated:(BOOL)animated { [super setEditing:editing animated:animated]; [self.favoTableView setEditing:editing animated:YES]; } // Edit(編集)ボタンが押された場合どうするかを書く - (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath { if (editingStyle == UITableViewCellEditingStyleDelete) { // 1) NSUserDefaultsを呼び出し defaults = [NSUserDefaults standardUserDefaults]; // 2）NSUserDefaultsのFAVORITEキーから配列を呼び出し NSArray *Arr = [defaults arrayForKey:@"FAVORITE"]; // 3）取得した配列(NSArray)からMutableArray形式に変換（mutableCopy) self.favoArr = [Arr mutableCopy]; // 4）配列から削除 [self.favoArr removeObjectAtIndex:indexPath.row]; // 5) NSUserDefaultsのFAVORITEキーに再度格納する。 [defaults setObject:self.favoArr forKey:@"FAVORITE"]; // 6）削除した配列をNSUserDefaultsに戻す（[defaults syncronize]しておく） [defaults synchronize]; [self.favoTableView reloadData]; } } #pragma mark - Tap Cell to Detail Scene //セルがタップされるとWebView画面に遷移 - (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender { if ([[segue identifier] isEqualToString:@"toWebView"]) { NSIndexPath *indexPath = [self.favoTableView indexPathForSelectedRow]; //URL NSString *linkstr = [[self.favoArr objectAtIndex:indexPath.row] objectForKey:@"url"]; [[segue destinationViewController] setLinkStr:linkstr]; //タイトル NSString *titleStr = [[self.favoArr objectAtIndex:indexPath.row]objectForKey:@"title"]; [[segue destinationViewController]setTitleStr:titleStr]; //日付 NSString *dateStr = [[self.favoArr objectAtIndex:indexPath.row]objectForKey:@"date"]; [[segue destinationViewController]setDateStr:dateStr]; } } @end |
終わったらシミュレーターで確認してみましょう。
お気に入りボタンを押すと、アラートビューで「お気に入りに追加しました」と表示されました。
お気に入り画面には今お気に入りしたニュースのタイトルと日付が表示されてます。
右上のEditボタンを押すと、セルの左に赤丸が現れ削除することができます。
また、Editボタンを押さなくてもセルを左にスワイプするだけで削除することもできます。
セルをタップすると画面が遷移し、ニュースの内容が表示されました。
以上で完成です！
まとめ
５回に渡ってお伝えしてきました「ファイナンス・経済ニュース」 アプリができるまで。いかがでしたでしょうか。
一つのアプリを完成させることができれば、その応用で何本もアプリを作成できるようになります。
このブログをきっかけにアプリ開発に興味を持ってくれる方が増えれば幸いです。
アプリは完成したもののそのあとの手続きでつまずいている方も、アプリ開発スクール「クラウドナインアップス」へ！
クラウドナインアップスでは、開発だけでなくその後のアプリのリリースまで責任を持ってサポートいたします。
コメントをどうぞ