2012年7月19日 星期四

iPhone, iPad通吃的圖檔命名規則

名字取得巧,開發快又好 !  iPhone, iPad雖然有著四種截然不同的解析度,但是只要我們依照以下的命名規則,App在執行時將聰明地選出最適合自己的圖片。

假設圖檔名稱為tarBar.png,程式碼如下:

self.tabBar.backgroundImage = [UIImage imageNamed:@"tarBar.png"];

命名規則:

    (1) iPhone : tarBar.png (320*49)
          普通的iPhone



    (2) iPhone retina: tarBar@2x.png (640*98)
          retina的iPhone, 加 @2x



    (3) iPad: tarBar~ipad.png (768*49)
         普通的iPad, 加 ~ipad



    (4) iPad retina: tarBar@2x~ipad.png (1536*98)
          retina的iPad, 加 @2x~ipad



執行結果:

iPhone


Retina iPhone


iPad





Retina iPad




2012年7月18日 星期三

從iPhone版本變身為iPhone, iPad通吃的Universal

1. 在target的Summary頁面,將Devices設為Universal。


2. 設定iPad版的Icon
    72* 72,  144*144

3. 設定Launch Image
   768*1004 ,  1536*2008


4. 處理UI
    (1) storyboard case

         a. 建立storyboard for iPad

             從原來的 iPhone版本複製  (File -> Duplicate)

         b. 將iPad版的storyboard命名為MainStoryboard_iPad.storyboard

         c. 在target的info頁面新增Main storyboard file base name (iPad)



         d. 編輯MainStoryboard_iPad.storyboard,  Open As -> Source Code
 



            將targetRuntime設為iOS.CocoaTouch.iPad
            ->
           targetRuntime="iOS.CocoaTouch.iPad"

        e. 重新以storyboard格式open MainStoryboard_iPad.storyboard

           此時版面將更新為iPad版面


   (2) xib case

        a. 建立xib for iPad
            從原來的 iPhone版本複製  (File -> Duplicate)

        b. 命名iPad的xib
            ex: ipad版的test.xib 名稱將為 test~ipad.xib

       c.  編輯xib,  Open As -> Source Code
           com.apple.InterfaceBuilder3.CocoaTouch.XIB
           ->
           com.apple.InterfaceBuilder3.CocoaTouch.iPad.XIB


           IBCocoaTouchFramework
           ->
          IBIPadFramework


      d. 重新以Interface Builder格式open xib

          編輯view的attribute inspector,將size設為iPad Full Screen


    





2012年7月15日 星期日

讓帶來消暑涼意的雪后露臉吧 - 圖片的裁切和遮罩



Peggy的雪后音樂劇即將在炎熱的8月演出,
為我們帶來消暑的涼意。
為了感謝Peggy,
彼得潘決定在iPhone上宣傳雪后的演出。




執行結果:


想不到雪后的宣傳照太大張了,
足足有849*313 (pixel)
遠超過320*480的iPhone螢幕大小。
因此我們只看到左半邊的演出日期。

宣傳照片裡的最吸引人目光的莫過於可愛的雪后圖案了。
接下來彼得潘將利用圖片裁切的技巧,
特別剪裁出雪后的區塊。





說明:

CGRect rect = CGRectMake(310, 20, 320, 280);
CGImageRef imageRef = CGImageCreateWithImageInRect([imageToCrop CGImage], rect);

利用CGImageCreateWithImageInRect,裁切出原圖大小中,從x, y (310, 20)開始,寬高(320, 280)的長方形區塊。



執行結果:



太好了,雪后終於露臉了!  可惜的是雪后標題還是看不到,不知情的人可能還誤以為這是新版的白雪公主。因此彼得潘決定另外做一個圓形的雪后標題版以正視聽。為了將圖片做成可愛的圓形,在此彼得潘採用mask的技巧。mask的圓形圖片如下,到時候和雪后圖片起化學作用後,將只呈現圓形的部分。(一般做為mask的圖片,顏色將設為黑色。)





說明:


 CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                        CGImageGetHeight(maskRef),
                                        CGImageGetBitsPerComponent(maskRef),
                                        CGImageGetBitsPerPixel(maskRef),
                                        CGImageGetBytesPerRow(maskRef),
                                        CGImageGetDataProvider(maskRef),
                                        NULL, // decode should be NULL
                                        FALSE // shouldInterpolate
                                        );

 CGImageRef masked = CGImageCreateWithMask(imageRef, mask);


利用CGImageMaskCreate和CGImageCreateWithMask對原圖做mask。


執行結果:




2012年7月10日 星期二

HockeyApp上傳release版流程

1. 下載HockeyMac App來上傳App
https://github.com/codenauts/HockeyMac

2. 上傳App到App Store。

3. 從organizer選擇剛剛上傳的App


    按下滑鼠右鍵後,選擇Show in Finder



4. 從打開的Finder視窗將對應的.xcarchive檔拖拉進HockeyApp



5. 點選upload



2012年7月5日 星期四