2013年2月17日 星期日

LOCOMO 2.6帥氣運動照片分享

LOCOMO 2.6版新增了帥氣運動照片分享功能,現在運動結束時可以合成一張帥氣的照片,po到Facebook和朋友分享唷。俗話說一張圖勝過千言萬語,小小的一張圖,同時擁有帥氣的大頭照,漂亮的風景圖,以及費盡吃奶力氣完成的軌跡地圖和運動數據呢! 

1. 若是運動時太專心跑步或是顧著看路邊的正妹,忘了拍照,運動結束時將詢問是否拍照留念。若是運動過程中有拍照,將預先選定某張照片,直接進入帥氣的照片合成頁面。



2. 拍攝帥氣合成照



3. 合成照片編輯頁面

在這裡我們可以縮放移動照片和地圖,也可以對照片進行翻轉的動作。


如果對照片不滿意,也可以點選左上角的相機按鈕,再次進行拍照或是從手機相簿選擇相片,比方來個善意的謊言,選擇朋友登上玉山頂的照片。


若是勾選Facebook,最後點選右上角的完成按鈕後,將進入Facebook分享頁面。如果Facebook上沒朋友,也是可以點選分享按鈕(向右的箭頭圖示),從iOS 6內建的多種分享管道挑選。





4. Facebook分享頁面

點選右上角的Post,就可以讓朋友們看到自己的英勇運動記錄了! 如果突然害羞,不想分享了,這時候點選左上角的取消還來得及,合成的帥氣照還是會好好地保存在LOCOMO的App和雲端的。






5. 大功告成的帥氣合成照




2013年2月14日 星期四

謀殺專門店



其實彼得潘除了流著蘋果和追星的血液,還流著謀殺的血液。有機會了話希望今年能為推理小說做點事,製作相關的App,讀點相關的原文書。 

2013年2月13日 星期三

假如時光倒流,UI元件如何縮放?

autolayout的世界裡,UI元件的位置和大小由constraint決定。然而某些特別的UI元件,像是UILabel, UIButton等,它們的大小卻深受它們所呈現的內容影響。接下來,彼得潘將以信樂團的名曲”假如”,說明UILabel的寬度如何地被歌詞的長短而左右。

1. 加入顯示假如歌詞的UILabel,”加長”按鈕和”縮短”按鈕。


調整UILabel的寬度和位置,使其剛好有三個constraint,距離上邊界,左邊界,右邊界都是標準間距的constraint。



2. 設定label,button和View Controller的連結。(ViewController.h)

@property (weak, nonatomic) IBOutlet UILabel *label;
- (IBAction)lengthenButPressed:(id)sender;
- (IBAction)shortenButPressed:(id)sender;

加長button的touch up inside event連結到lengthenButPressed:,縮短button的touch up inside event連結到shortenButPressed:。

3. 定義加長歌詞的lengthenButPressed:和縮短歌詞的shortenButPressed:。(ViewController.m)

- (IBAction)lengthenButPressed:(id)sender {
    self.label.text = @"假如時光倒流 我能做什麼 找妳沒說的 卻想要的";
}

- (IBAction)shortenButPressed:(id)sender {
    
    self.label.text = @"假如時光倒流";
}

執行結果:



由於被leading和trailing 2個constraint控制著,為了維持和左邊界,右邊界20 points的間距,label的寬度比歌詞佔據的空間寬上許多。當我們點選”加長”,歌詞內容增加了,但是label的寬度卻不為所動,造成我們只看到”找你沒說的 卻”,到底是卻什麼呢?是卻想念的?還是卻深愛的?別再猜了,其實有個神奇的方法,可以讓label擺脫constraint的束縛,增加寬度。



切換到label的Size Inspector頁面,將焦點放在它的Content Compression Resistance Priority區塊。此屬性控制著label是否可以隨著內容變多而增加它的尺寸。預設的水平(Horizontal) priority是750,然而控制著label和右邊界 20 points間距的constraint預設的priority卻是大於750的1000,所以label輸了,無法拉長它的寬度。


讓我們偷偷地將此constraint的priority從1000降為500。現在label的Horizontal Content Compression Resistance Priority 750遠大於500,因此現在它做主,它是老大,可以自由的拉長,不受constraint的限制。




執行結果:

label順利地拉長,終於可以看到完整的歌詞了,原來答案是”卻想要的”呀! 


讓我們回過頭來看看縮短歌詞的例子。點選縮短按鈕後,歌詞變短了。原來就算時光倒留,還是改變不了label臃腫的事實呀。


有沒有什麼靈丹妙藥可以讓label減肥,剛剛好寬度就等於呈現的文字內容呢?其實是有的,答案就藏在label的Content Hugging Priority裡。此屬性控制著label是否可以隨著內容變少而縮小它的尺寸。預設的水平(Horizontal) priority是250,然而控制著label和右邊界 20 points間距的constraint目前卻是大於250的500,所以label輸了,無法縮短它的寬度。



讓我們再一次地將constraint的priority調降,讓它變為100。現在label的Horizontal Content Hugging Priority 250遠大於100,因此現在它做主,它是老大,可以自由的縮短,不再受constraint的限制。



執行結果:

當歌詞縮短,時光倒留,label真的變苗條了(變短)
  



最後,如果嫌看歌詞不過癮,不如好好來聽聽信樂團演唱的假如吧。


MOBILE APP 創業解碼






彼得潘下個月的課程,"MOBILE APP 創業解碼",主要針對想要App創業的有心人,不管是老闆,PM,美術設計,工程師或是懷抱夢想的有心人,都歡迎來參加,透過這門課,你將學會:
1. 一個 Apple App 完整的誕生流程
2. 掌握 App 生命週期裡每個階段
3. 在 Apple App Store 的競爭和獲利戰略

http://alphacamp.tw/2013/02/07/starting-your-mobile-app-startup/

時間: 2013.03.20 週三 8:00PM-10:00PM
地點: TMI台灣創意工場 – 台北市基隆路一段159號11樓



2013年2月4日 星期一

可愛的讓我面紅的可愛兔子 - 手勢偵測的陷阱

透過iOS SDK內建的手勢物件,我們可以輕易判斷一些常見的手勢,諸如tab,swipe之類,然而,在iOS 5之前的舊系統(包含iOS 5),學會了判斷手勢的神功,卻會帶給我們意想不到的副作用。接下來彼得潘將以好朋友彼得兔做例子,讓我們瞧瞧手勢物件在iOS 5裡做的好事! 

1. 在畫面上加上tap手勢的偵測以及彼得兔button

- (void)viewDidLoad

{

    [superviewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
    

    UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:selfaction:@selector(tap:)];

    [self.viewaddGestureRecognizer:tapGesture];

    
    UIButton *but = [[UIButtonalloc] initWithFrame:CGRectMake(0, 0, 320, 320)];
    [self.viewaddSubview:but];
    but.contentMode = UIViewContentModeScaleAspectFit;
    [but setImage:[UIImageimageNamed:@"rabbit.jpg"] forState:UIControlStateNormal];
    [but addTarget:selfaction:@selector(showCuteRabbit:) forControlEvents:UIControlEventTouchUpInside];

}
說明:
(1)  UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:selfaction:@selector(tap:)];

建立偵測tap手勢的UITapGestureRecognizer物件。當偵測到tap動作時,tap: method將被呼叫。


(2)     [but addTarget:selfaction:@selector(showCuteRabbit:) forControlEvents:UIControlEventTouchUpInside];

當點選彼得兔button時,showCuteRabbit: method將被呼叫

2. 定義點選彼得兔button時,執行的showCuteRabbit: method

-(void)showCuteRabbit:(id)sender

{

    UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"可愛的讓我面紅的可愛兔子" message:nil delegate:nil cancelButtonTitle:@"Ok"otherButtonTitles:nil];

    [alertView show];

}
說明:
彼得兔是如此可愛,讓我們稍微改一下周杰倫可愛女人的歌詞,顯示"可愛的讓我面紅的可愛兔子"吧

3. 定義偵測到tap動作時,執行的tap: method

-(void)tap:(id)sender

{

    UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"漂亮的讓我面紅的可愛女人" message:nil delegate:nil cancelButtonTitle:@"Ok" otherButtonTitles:nil];

    [alertView show];

}
說明:
為了讓原版歌詞露臉,當tap: method執行時,我們顯示原來的歌詞"漂亮的讓我面紅的可愛女人"。

執行App:


在iOS 6時一切正常,點選彼得兔時顯示”可愛兔子”,點選其它地方時顯示”可愛女人"


切到iOS 5時,一切卻都變了樣。當我們點選彼得兔時,依然顯示”可愛女人”,這叫彼得兔情何以堪呢?尤其彼得兔還是個百分百的男兒身。



問題出在iOS 5時偵測tap的UITapGestureRecognizer物件會連點選button的動作也一併攔截,造成最後tap: method被執行,而沒有呼叫showCuteRabbit:。不過也不是無藥可救啦,只要將tap: method稍加修改,在iOS  5一樣可以判斷使用者真正點選的是button。




-(void)tap:(id)sender
{
    CGPoint point = [sender locationInView:but];  
    BOOL isPointInside = [but pointInside:point withEvent:nil];
    if(isPointInside)
    {
        [selfshowCuteRabbit:nil];
    }
    else
    {
        UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"漂亮的讓我面紅的可愛女人" message:nil delegate:nil
                                                  cancelButtonTitle:@"Ok" otherButtonTitles:nil];
        [alertView show];

    }
   
}
說明:
(1)     CGPoint point = [sender locationInView:but];    

取得使用者點選的座標位置。注意,我們傳入locationInView: method的參數是代表彼得兔的UIButton物件but (注意but也要宣告為view controller的member,而不能是local變數),所以此時取得的座標位置將是相對於彼得兔按鈕的座標位置,也就是當我們點選按鈕左邊,不屬於按鈕的區塊時,取得的x座標將是負的。

(2)     BOOL isPointInside = [but pointInside:point withEvent:nil];

判斷點選的座標位置是否位在彼得兔按鈕but裡。

(3)   if(isPointInside)
    {
        [self showCuteRabbit:nil];
    }

如果點選的座標位置在彼得兔按鈕裡,即表示使用者點選的是彼得兔,應該呼叫showCuteRabbit: method,否則了話則維持原狀,顯示"可愛女人"







2013年2月2日 星期六

線上學習資源

這期的”數位時代”不錯,整理了目前網路上知名的線上學習資源。遙想彼得潘大學時常常覺得台灣學校做的投影片太沉悶,因此常常找尋世界各國大學的投影片,想看看法國,北歐等國家的投影片長什麼模樣。也因為同一門課吸收了多所大學的精華,所以最後能取得不錯的成績。如果說知識是無價的,生在這個年代的我們,無論在何時何地,無論有錢沒錢,都可以學習國外知名大學的課程,其實擁有的早已不是22k,而是每個人都是億萬富翁吧。 

1. coursera
https://www.coursera.org


2. edx


3. udacity
https://www.udacity.com



4. khanacademy
http://www.khanacademy.org


5. NBC Learn
http://www.nbclearn.com/portal/site/learn



6. show me
http://www.showme.com



7. udemy
http://www.udemy.com



8. iTunes U


9. ted
http://www.ted.com



10. youtube education
http://www.youtube.com/education






2013年2月1日 星期五

超人寶寶定時的打氣推播Local Notification (MacToday 2013.2)




做為世界上最強大的行動裝置,iPhone和iPad可謂當之無愧。然而,為了省電和效能的考量,在iOS上運行的App一旦進入背景模式,許多功能皆無法正常執行。比方針對熱戀中男女設計的情話綿綿App,當羅密歐和茱麗葉同時打開App使用時,情話可以通行無阻,順利傳達至對方的iPhone上。但是,當羅密歐偷偷打開Angry Birds遊玩時,此時情話綿綿App進入背景模式,無法繼續和茱麗葉談情,要是給茱麗葉知道了,後果可不堪設想。不過別擔心,彼得潘這期將介紹像鬧鐘一樣在指定時間推播的local notification,有了它茱麗葉將在指定的時間收到羅密歐的關心推播,不會再生氣了。(其實還有功能更強大的遠端推播push notification,不過它就留待未來介紹了。)