/* syntax highlight */ /* end of syntax highlight */

2010年12月27日 星期一

iphone app 開發 (三十二) 時鐘 (Clock) 範例與自動旋轉

Bookmark and Share

螢幕快照 2010-12-27 下午7.08.42

做一個時鐘的 App 真的不難,等你看完這篇文章馬上就會了

我是參考 這篇 文章學的

 

請先從 View-based Application 開始

 螢幕快照 2010-12-27 下午6.38.45

 

整個 App 的元件只有一個 label 和一個 backgroup image

所以請先在 header 檔宣告

 

  1. @interface clockViewController : UIViewController {
  2.     IBOutlet UILabel* clockLabel;
  3.     NSTimer *myTicker;   }

 

我們有兩個方法需要設計

第一個是 runTimer,模擬時間流逝

第二個是 showActivity,模擬時間流逝會發生的事

 

  1. -(void)runTimer;
  2. -(void)showActivity;

 

接下來可以到 這裡 下載背景圖片

並把圖片拉到 resource 資料夾中

image

 

現在素材有了

就可以開始設計我們的 Layout

第一步驟請先拉出一個 UIImageView 到畫面中

 螢幕快照 2010-12-27 下午6.42.03

 

再來請把 background image 設定為剛剛抓的圖片

螢幕快照 2010-12-27 下午6.42.23

 

再來請拉一個 label 進畫面中,目標是等下要顯示時間,請自行設計它的外表

螢幕快照 2010-12-27 下午6.43.54

 

然後邏輯也要拉一下,因為是從系統運算完後在 View 做呈現,所以是由 Owner 拉線到 label 上面

螢幕快照 2010-12-27 下午6.44.49

 

邏輯都拉好了,現在就回到 implement 檔實做吧

 

  1. -(void)runTimer{
  2.     myTicker = [NSTimer scheduledTimerWithTimeInterval:0.5
  3.             target:self
  4.             selector: @selector(showActivity)
  5.             userInfo:nil
  6.             repeats:YES];
  7. }    
  8.  
  9. -(void)showActivity{
  10.     NSDateFormatter *formatter = [[[NSDateFormatter alloc] init] 
  11.          autorelease];
  12.     NSDate *date = [NSDate date];   [formatter
  13.          setTimeStyle:NSDateFormatterMediumStyle];
  14.     [clockLabel setText:[formatter stringFromDate:date]];
  15. } 

 

runTimer 宣告了一個 NSTimer 物件, 目的是讓它定期發生某件事情,NSTimer 物件的 API 如下

+ (NSTimer *)scheduledTimerWithTimeInterval:(NSTimeInterval)

                seconds //間隔時間

                target:(id)target // send message 的  object

                selector:(SEL)aSelectoruserInfo:(id) //message send 的目標

                userInfo repeats:(BOOL) // Timer 的 user info ,通常設為 nil

               repeats //如果設定 YES 則會不斷重覆, 設定 NO 則只會發生一次

 

showActivity 則是宣告了一個 NSDate 的物件,並且可以設定 NSDate 的格式, 這裡有NSDate 的 API

還要看 NSDateFormatter 的 API

下面就是把設定好的 NSDateFormatter 傳給 NSDate 再顯示在 label 上面

 

接下來還要設定App開始時就讓 Timer 動起來

 

  1. // Implement viewDidLoad to do additional setup after loading the view
  2. - (void)viewDidLoad {
  3.     [super viewDidLoad];
  4.     [self runTimer];   }

 

原本的教學還有告訴我們如何設計自動旋轉的功能

 

  1. // Override to allow orientations other than the default portrait orientation.
  2. - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)
  3.          interfaceOrientation {
  4.     return YES;
  5. }

 

如果都順利的話

可以試著執行看看摟,正確的話應該可以看到下面的畫面,恭喜!

 

螢幕快照 2010-12-27 下午7.01.06

 

 

參考資料

http://gigaom.com/apple/iphone-dev-sessions-how-to-make-an-orientation-aware-clock/

http://code.flickr.com/blog/tag/iphone/

scheduledTimerWithTimeInterval

0 意見:

張貼留言

Related Posts Plugin for WordPress, Blogger...