SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

japan.internet.com翻訳記事

iPhoneプログラミングの基礎:View Controller

ビューの切り替え、切り替え時のアニメーション設定、ビュー間のデータ受け渡し方法

  • X ポスト
  • このエントリーをはてなブックマークに追加

切り替えのアニメーション

 ボタンを使ってビューからビューへ切り替える方法は分かりました。しかし、切り替えがあまりにすばやいので、視覚的に面白くありません。iPhoneユーザーの高い期待に応えるには、切り替えにアニメーションを追加する必要があります。SDKのAPIを使えばこれを簡単に実現できます。

 「VCExampleViewController.m」ファイルに、以下のコードの太字部分を追加します。

-(IBAction) displayView:(id) sender{
   secondViewController = [[SecondViewController alloc] 
                           initWithNibName:@"SecondView" 
                           bundle:nil];
    
    [UIView beginAnimations:@"flipping view" context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
[UIView setAnimationTransition:UIViewAnimationTransitionCurlDown 
          forView:self.view cache:YES];
    
    [self.view addSubview:secondViewController.view];
    [UIView commitAnimations];
}

 このコードは、以下のパラメータを設定して、切り替え処理にアニメーションを追加します。

  1. Animation duration(アニメーション時間)を1秒に設定
  2. Animation curve(アニメーションカーブ)をUIViewAnimationCurveEaseInOutに設定(これ以外に使える設定として、UIViewAnimationCurveEaseIn、UIViewAnimationCurveEaseOut、UIViewAnimationCurveLinearがあります)
  3. Animation transition type(アニメーション遷移タイプ)をUIViewAnimationTransitionCurlDownに設定(これ以外に使える設定として、UIViewAnimationTransitionFlipFromLeft、UIViewAnimationTransitionFlipFromRight、UIViewAnimationTransitionCurlUpがあります)

 [Command]-[r]キーを押してアプリケーションをもう一度テストします。[Display SecondView]ボタンを押したときの動作がどう変わったか確認します(図16を参照)。

図16 滑らかなアニメーション:ビューの切り替えを滑らかなページめくりアニメーションにする
図16 滑らかなアニメーション:ビューの切り替えを滑らかなページめくりアニメーションにする

 当然、逆方向に切り替えるときにもアニメーションが必要です。そこでXcodeに戻り、「SecondViewController.m」ファイルに次のコードを追加します。

-(IBAction) btnReturn:(id) sender {
    [UIView beginAnimations:@"flipping view" context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseIn];
    [UIView setAnimationTransition: UIViewAnimationTransitionCurlUp
       forView:self.view.superview cache:YES];
    
    [self.view removeFromSuperview];
    [UIView commitAnimations];
}

 [Command]-[r]キーを押してアプリケーションをテストします。2つ目のビューで[Return]ボタンを押すと、2つ目のビューでもページをめくるアニメーションが実行されます(図17を参照)。

図17 ページを戻る:2つ目のビューのアクションでページを戻るアニメーション
図17 ページを戻る:2つ目のビューのアクションでページを戻るアニメーション

ビュー間のデータの受け渡し

 ビューからビューへデータを渡すことが必要になる場合があります。最も簡単な方法は、渡す先のビューにプロパティを作成し、呼び出し側のビューからそのプロパティを設定(または取得)することです。

 その一例を示します。「VCExampleViewController.xib」ファイルをダブルクリックし、ViewウィンドウにDatePickerビューを追加します(図18を参照)。

図18 ビューへの機能の追加:1つ目のビューにDatePickerビューを追加する
図18 ビューへの機能の追加:1つ目のビューにDatePickerビューを追加する

 「VCExampleViewController.h」ファイルで、このDatePickerビューのアウトレットを作成し、それをプロパティとして公開します。

#import <UIKit/UIKit.h>
@interface VCExampleViewController : UIViewController {
    //---outlet for the DatePicker view---
    IBOutlet UIDatePicker *datePicker;
}
//---expose this outlet as a property---
@property (nonatomic, retain) UIDatePicker *datePicker;

-(IBAction) displayView:(id) sender;

@end

 VCExampleViewController.xibウィンドウで、[Control]キーを押しながら[File's Owner]項目をDatePickerビューへドラッグし、[datePicker]を選択します。

 「SecondViewController.h」ファイルで、オブジェクトタイプUIDatePickerを作成し、プロパティとして公開します。

#import <UIKit/UIKit.h>
@interface SecondViewController : UIViewController {
    //---object of type UIDatePicker---
    UIDatePicker *selectedDatePicker;
}
//---expose the object as a property---
@property (nonatomic, retain) UIDatePicker *selectedDatePicker;

-(IBAction) btnReturn:(id) sender;

@end

 「SecondViewController.m」ファイルで、viewDidLoadメソッドに以下のコード(太字部分)を追加します。

#import "SecondViewController.h"
@implementation SecondViewController
@synthesize selectedDatePicker;
- (void)viewDidLoad {
    //---display the date and time selected in the previous view---
    NSDateFormatter *formatter = [[[NSDateFormatter alloc] init] autorelease];
    [formatter setDateFormat:@"MMM dd, yyyy HH:mm"];
    
    UIAlertView *alert = [[UIAlertView alloc] 
                             initWithTitle:@"Date and time selected" 
                             message:[formatter stringFromDate:selectedDatePicker.date] 
                             delegate:self 
                             cancelButtonTitle:@"OK" 
                             otherButtonTitles:nil];
    [alert show];
    [alert release];    
    [super viewDidLoad];
}
- (void)dealloc {
    //---release the memory used by the property---
    [selectedDatePicker release];
    [super dealloc];
}

 最後に、「VCExampleViewController.m」ファイルで、以下のコードの太字部分を追加します。

#import "VCExampleViewController.h"
#import "SecondViewController.h"
 
@implementation VCExampleViewController
SecondViewController *secondViewController;
@synthesize datePicker;
-(IBAction) displayView:(id) sender{
secondViewController = [[SecondViewController alloc] 
                                initWithNibName:@"SecondView" 
                                bundle:nil];
    //---set the property of the second view with the DatePicker view in the current view---
    secondViewController.selectedDatePicker = datePicker;

    [UIView beginAnimations:@"flipping view" context:nil];
    [UIView setAnimationDuration:1];
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
    [UIView setAnimationTransition:
          UIViewAnimationTransitionCurlDown 
          forView:self.view cache:YES];
    
    [self.view addSubview:secondViewController.view];
    [UIView commitAnimations];    
}

 [Command]-[r]キーを押してアプリケーションをテストします。DatePickerビューで日付と時刻を選択し、[Display SecondView]ボタンを押します。1つ目のビューで選択した日付と時刻が2つ目のビューに表示されます(図19を参照)。

図19 ビュー間の値の受け渡し:1つ目のビューのDatePickerで選択された日付と時刻を2つ目のビューに表示する
図19 ビュー間の値の受け渡し:1つ目のビューのDatePickerで選択された日付と時刻を2つ目のビューに表示する

 この記事では、View Controllerの操作と、iPhoneアプリケーションに新しいView Controllerを追加する方法を説明しました。2つのビューを切り替える方法や、切り替えにアニメーションを表示する方法、2つのビューの間で値を受け渡す方法も説明しました。このような操作はiPhoneプログラミングの基本なので、これを理解すれば独自のiPhoneアプリケーションの作成を始めるのに役立つでしょう。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
japan.internet.com翻訳記事連載記事一覧

もっと読む

この記事の著者

japan.internet.com(ジャパンインターネットコム)

japan.internet.com は、1999年9月にオープンした、日本初のネットビジネス専門ニュースサイト。月間2億以上のページビューを誇る米国 Jupitermedia Corporation (Nasdaq: JUPM) のニュースサイト internet.comEarthWeb.com からの最新記事を日本語に翻訳して掲載するとともに、日本独自のネットビジネス関連記事やレポートを配信。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

Wei-Meng Lee(Wei-Meng Lee)

Microsoft MVP受賞者。Microsoft社の最新テクノロジー実地研修を専門とするDeveloper Learning Solutions社を創設。.NETとワイヤレステクノロジーの開発者、指導者として知られる。国際的なカンファレンスでたびたび講演し、.NET、XML、ワイヤレステクノロジーに関す...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/4485 2009/11/02 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング