iOSアプリのUIを爆速で激ヤバにする2つのライブラリ生産性ガチアゲなオープンソースiOSライブラリ(2)(4/4 ページ)

» 2013年05月15日 18時00分 公開
[川崎順平, 平川裕多,ソニックス]
前のページへ 1|2|3|4       

【2】ソースコードの変更

 まずは、ヘッダファイルを編集します

  1. #import "AppDelegate.h"
  2. #import "UIFoldAndFlipViewController.h"
  3. @implementation AppDelegate
  4. - (BOOL)application:(UIApplication *)application
  5. didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
  6. {
  7. self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
  8. self.window.rootViewController = [[UIFoldAndFlipViewController alloc]
  9. initWithNibName:@"UIFoldAndFlipViewController" bundle: nil];
  10. [self.window makeKeyAndVisible];
  11. return YES;
  12. }
AppDelegate.h
  1. #import <UIKit/UIKit.h>
  2. #import "MPFoldEnumerations.h"
  3. #import "MPFlipEnumerations.h"
  4. @interface UIFoldAndFlipViewController : UIViewController
  5. {
  6. // 現在の画像番号
  7. int _current_image_number;
  8. }
  9. // アニメーションを行うView
  10. @property (weak, nonatomic) IBOutlet UIView *contentView;
  11. // Foldボタンタッチイベント
  12. - (IBAction)touchFold:(id)sender;
  13. // Flipボタンタッチイベント
  14. - (IBAction)touchFlip:(id)sender;
  15. @end
UIFoldAndFlipViewController.h

 次に、追加したViewとイベントの割り当てを行います。UIFoldAndFlipViewController.mを編集する前に、ヘッダで追加したViewとイベントを割り当てます、UIFoldAndFlipViewController.xibを開き、下記のように画像のように変更しました。

配置したViewにcontentViewを割り当てる
それぞれのボタンにTouch Up Insideイベントを割り当てる

 処理関連のコードを編集します。

  1. #import "UIFoldAndFlipViewController.h"
  2. #import "MPFoldTransition.h"
  3. #import "MPFlipTransition.h"
  4. @implementation UIFoldAndFlipViewController
  5. @synthesize contentView;
  6. - (id)initWithNibName:(NSString *)nibNameOrNil
  7. bundle:(NSBundle *)nibBundleOrNil
  8. {
  9. self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
  10. if (self) {
  11. _current_image_number = 1;
  12. }
  13. return self;
  14. }
  15. - (void)viewDidLoad
  16. {
  17. [super viewDidLoad];
  18. [self touchFold:nil];
  19. }
  20. // 次に表示するViewを返します。
  21. - (UIView *) getNextView
  22. {
  23. UIImage *image = [UIImage imageNamed:
  24. [NSString stringWithFormat:@"sample%d.png", _current_image_number]];
  25. _current_image_number = _current_image_number == 1 ? 2 : 1;
  26. UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
  27. return (UIView*)imageView;
  28. }
  29. // Foldボタンタッチイベント
  30. - (IBAction)touchFold:(id)sender
  31. {
  32. // アニメーション前のViewとアニメーション後のViewを指定し、アニメーションを行う
  33. UIView *previousView = [[[self contentView] subviews] objectAtIndex:0];
  34. UIView *nextView = [self getNextView];
  35. [MPFoldTransition transitionFromView : previousView
  36. toView : nextView
  37. duration : [MPFoldTransition defaultDuration]
  38. style : MPFoldStyleDefault
  39. transitionAction : MPTransitionActionAddRemove
  40. completion : ^(BOOL finished) {
  41. // アニメーションが終了した際の処理を記述
  42. }
  43. ];
  44. }
  45. // Flipボタンタッチイベント
  46. - (IBAction)touchFlip:(id)sender
  47. {
  48. // アニメーション前のViewとアニメーション後のViewを指定し、アニメーションを行う
  49. UIView *previousView = [[self.contentView subviews] objectAtIndex:0];
  50. UIView *nextView = [self getNextView];
  51. [MPFlipTransition transitionFromView : previousView
  52. toView : nextView
  53. duration : [MPFlipTransition defaultDuration]
  54. style : MPFlipStyleDefault
  55. transitionAction : MPTransitionActionAddRemove
  56. completion : ^(BOOL finished) {
  57. // アニメーションが終了した際の処理を記述
  58. }
  59. ];
  60. }
  61. @end
UIFoldAndFlipViewController.m

 35~40行目と51~56行目がライブラリを使ってアニメーション処理をしているコードです。

【3】サンプルプロジェクトの実行

 プロジェクトを実行すると、サンプル画像が表示されます。Foldボタンを押すと「clear」のような折り畳みのエフェクトが起こり、画像が変更されます。Flipを押すと「Flipboard」のようなページめくりのアニメーションが始まり、画像が変更されます。

数時間~数日を1時間足らずで

 以上でサンプルプログラムを使ったライブラリの説明は終わりですが、いかがでしたでしょうか。

 記事の通りに実装すると、動作を確認するのに1時間もかからないと思います。同様の動きをスクラッチで実現しようとすると、少なくとも数時間、下手したら数日かかってしまうかもしれません。この「生産性の差」がライブラリを利用することで得られる最も大きなメリットになります。

 今回は2つのライブラリに絞って紹介しましたが、連載第1回でも書いた通り、他にもさまざまなUIを実現するライブラリが存在します。利用するライブラリによって誤差はありますが、実装が用意にできるという意味では、どのライブラリも共通していますので、ぜひいろいろ試してみてください。

 本連載で作成したサンプルプログラムはGitHubで公開していますので、実装途中で何か困った場合や動きだけ確認されたい方は以下からダウンロードして実行してみてください。

 次回、第3回はどんなアプリでも必ず利用する「データ保持」をターゲットに、バックエンドのプログラムの観点で生産性をガチアゲできるライブラリを紹介したいと思います。

著者プロフィール


川崎 順平(かわさき じゅんぺい)


株式会社ソニックス スマートデバイスソリューション事業部 コンサルティンググループ

コンサルティング業務として、モバイルファースト開発ガイドラインテストガイドラインの作成を行いながら、日々各スマートデバイス向けアプリケーションの開発に従事。Windowsストアアプリ開発コミュニティ「Windows 8 Developers」もやってます。


平川 裕多(ひらかわ ゆうた)


株式会社ソニックス スマートデバイスソリューション事業部

板前から転身したエンジニア。iOS開発歴3年。今は自社クラウドサービス「Scirocco Cloud」の開発を日々行っています。趣味は醤油工場めぐり。

前のページへ 1|2|3|4       

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

Smart & Social 記事ランキング

本日月間

注目のテーマ

4AI by @IT - AIを作り、動かし、守り、生かす
Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。