Using Storyboard as Launch Screen

In iOS8, you can use a storyboard or xib file as the launch screen. Therefore, you can design a adaptive launch screen to fit in all devices that with different screen size. This save development time and no need to manage many launch images any more. If you start a new project, a LaunchScreen.xib is created for you by default. But you can still continue to use static launch image for iPhone 6 and 6 Plus. The resolution are listed below.

For iPhone 6:
 - 750 x 1334 (@2x)

For iPhone 6 Plus:
 - 1242 x 2208 (@3x)

在iOS8, 你可以使用storyboard或xib檔作為launch screen. 你可以計設一個適應性launch screen去配合所有不同呎吋的裝置. 這節省了開發時間及不需再管理很多launch image. 如果你新增一個project, 預設有一個xib作為launch screen. 但你還是可以繼續使用靜態launch image給iPhone 6及6 Plus. 以下是他們的解像度.

For iPhone 6:
 - 750 x 1334 (@2x)

For iPhone 6 Plus:
 - 1242 x 2208 (@3x)

Using Image Set with Universal Storyboard

In universal storyboard, you can define a UIImageView for size classes of Any Any (Width Height). Therefore, code for this UIImageView will be effective in both iPad and iPhone. That's why universal storyboard is powerful and convenient. But sometimes, the image size for iPad is different from that for iPhone. In this case, image set can help you.

1. Go to "Images.xcassets" in your project. Click "+" then choose "New Image Set".

2. Rename the new image set to whatever you want.

3. In this example, I prepared 2 sets of image. The green set is for regular size (300x300) and the blue set is for compact size (150x150). By default, there is one set for any any. Now, we are going to add another set for "compact width any height". On the right hand side, change the width to "Any & Compact". Then drag the green set to any any, and drag the blue set to compact any.

4. Back to storyboard, add a UIImageView and set the source as the name of image set we just created.

5. One important thing is we have to give the position constraint to the UIImageView, otherwise it won't resize based on the image for compact size. Here, we add 2 constraints that align horizontal and vertical center to superview.

6. Let's preview before we actually run. Enable the assistant editor. Click the root of the path then choose Main.storyboard in the Preview submenu.

7. Add both iPad and iPhone to the preview by clicking the "+" on the bottom left of the assistant editor.

8. Cool!! Now we can see iOS select the correct image according to the size class.

9. Not only in preview, when you change the size class in storyboard. The image is also changed based on the size class.

This help developer to reduce number of lines, and make the universal app more consistent.



在universal storyboard, 你可以定義UIImageView的size class為Any Any (Width Height). 這樣關於UIImageView的程式碼會在iPad及iPhone都有效. 這就是為何universal storyboard如此強大. 但有時候圖片尺吋在iPad和iPhone上是不一樣的. 這個情況下image set可以幫到你.
1. 在project裡, 選"Images.xcassets". 點選"+"後選"New Image Set".

2. 為剛新增的image set改名

3. 在這範例, 我準備了2組圖片. 綠色是給regular size (300x300) 而藍色是給compact size (150x150). 預設, 只有一組any any. 現在我們要新增一組給"compact width any height". 在右手邊, 把width改成"Any & Compact". 然後把綠色一組拉到any any, 把藍色一組拉到compact any.

4. 回到storyboard, 新增一個UIImageView及把來源設定為剛剛創建的image set.

5. 一個很重要的是我們要給UIImageView位置constraint, 否則它不會按compact size的圖片改變尺吋. 這裡我們加2個contraint, 分別是對superview水平置中及垂直置中.

6. 運行前先來預覧, 開啟assistant editor. 點路徑的最頂層. 然後在Preview子選單選擇Main.storyboard.

7. 新增iPad及iPhone到preview, 在assistant editor點左下角的"+".

8. Cool!! 現在我們可以看到iOS跟據size class撰擇正確的圖片.

9. 不單的preview, 當你把storyboard的size class更改. 圖片亦會跟據size class改變.

這幫助開發者減少得多程式碼, 還令universal app便一致.

Size Classes for iPhone 6 Plus

I talked about Unified Storyboard before. On that time, many other developers was discussing about a unknown combination, regular width + compact height. And we know it today, this is iPhone 6 Plus.

Apple has updated the online document of "What's New in iOS". At this moment, iPhone 6 Plus is the only iOS device which has this size classes. And iPhone 6 Plus also is the only device support @3x image. When developing app for iPhone 6 Plus, you have to design app for 2208 x 1242 resolution. That's mean the @1x development environment is 736 x 414. And when iPhone 6 Plus runs the app, it will virtually downsize to 1920 x 1080.

iPad Portrait	iPad Landscape
iPhone Portrait	iPhone Landscape
	iPhone 6 Plus Landscape

我在較早之前討論過 Unified Storyboard . 那個時候, 很多開發者都已經在討論一個未知的組合, regular width + compact height. 今天我們知道了, 這就是iPhone 6 Plus.

Apple已經更新了網上的文件"What's New in iOS". 現在, iPhone 6 Plus是惟一的iOS裝置擁有這種size classes. 還有iPhone 6 Plus也是惟一支援@3x的圖象. 當開發iPhone 6 Plus的app時, 你必需用2208 x 1242解像度. 這表示@1x開發環境是736 x 414. 當app在iPhone 6 Plus上運行時, 會自動向下調整至1920 x 1080.

iPad Portrait	iPad Landscape
iPhone Portrait	iPhone Landscape
	iPhone 6 Plus Landscape

Restricting the Orientation on iPhone & iPad

Sometimes you may want to design the apps that only work in landscape mode, but you have to configure the supported orientation for iPhone and iPad separately.

1. Setting supported orientation for iPhone
- In Navigator, click the folder icon to show the Project navigator. Then click the root of the project.

- In the General tab, Development Info section, check the orientation that your app supports.

 2. Setting supported orientation for iPad

- In Navigator, click the folder icon to show the Project navigator. Then click the root of the project.

- In the Info tab, there is a plist property "Supported interface orientations (iPad)". By default, it has 4 items for all orientations. You can simply delete the unsupported orientation for your app.

Okay, now run and test your app :)

你可能想設計一個app只支援landscape mode, 但需要分開設定iPhone跟iPad支援的方向.
1. 設定iPhone支援方向
- 在Navigator, 點選資料夾圖示以顯示Project navigator. 然後點選project的最底層.

- 在General頁, Development Info區, 勾選你的app所支援的方向.

2. 設定iPad支援方向
- 在Navigator, 點選資料夾圖示以顯示Project navigator. 然後點選project的最底層.

- 在Info頁, 這裡有一個plist的屬性叫"Supported interface orientation (iPad)". 預計, 它有4個關於方向的項目. 你只需把你的app不支援的方向刪除.

Okay, 現在可以測試你的app了 :)

Adding UITapGestureRecognizer to UIImageView

By default, UIImageView doesn't respond to any touch, such as UITabGestureRecognizer. However, you can enable it by either attributes inspector or code.

- Attributes Inspector
check the box "User Interaction Enabled" in the Interaction section

- Code
self.imageView.userInteractionEnabled = true



Then, add a UITabGestureRecognizer to UIImageView.

var tapGesture = UITapGestureRecognizer(target: self, action: "tapped:")
self.imageView.addGestureRecognizer(tapGesture)

func tapped(recognizer: UITapGestureRecognizer) {
    println("tapped")
}

Okay, finished. Run and test it :)





UIImageView預設是不會對任何觸碰有反應, 例如UITabGestureRecognizer. 但可以透過attributes inspector或code去啟動.
- Attributes Inspector
在Interaction部份, 鈎選"User Interaction Enabled".

- Code
self.imageView.userInteractionEnabled = true



之後, 把UITabGestureRecognizer加到UIImageView中.

var tapGesture = UITapGestureRecognizer(target: self, action: "tapped:")
self.imageView.addGestureRecognizer(tapGesture)

func tapped(recognizer: UITapGestureRecognizer) {
    println("tapped")
}

完成了 :)

Problem with UIImage(named:) initializer

When I tried to use UIImage(named:) in an init of an object, I had got the following error.

I fixed it by adding an initializer before it. I found that in UIImage Class Reference, init(name:) is classified as "Cached Image Loading Routines", and others are classified as "Initializing Images". Does it mean init(named:) doesn't perform initialization?

當我使用 UIImage(named:) 時, 我得到以下錯誤.

我把一個 initializer 放在前面就解決這個問題. 在 UIImage Class Reference, init(named:) 是被分類為"Cached Image Loading Routines", 而其他被分類為"Initializing Images". 意思是不是 init(named:) 不會進行初始?

Initializing Properties of Object

In Swift, you must initialize all properties of an object either in declaration or in initialization. Otherwise, Xcode will warn you that there is property haven't initialized yet.

If you want to initialize these properties in init(), you should put the super.init() at the end of init(). You will get an error if you put super.init() before all properties have been initialized.

Unified Storyboard

iOS 8 supports unified storyboard, which means you don't have to maintain separate storyboard for iPhone and iPad. iOS can determine how should the UI components display on the screen by detecting the traits. Here are 4 combinations.

iPad has a regular size class in vertical and horizontal directions in both portrait and landscape orientations.

iPhone has a regular size class in vertical direction and a compact size class in horizontal direction in portrait orientation. And has a compact size class in vertical and horizontal directions in landscape orientation.


 You can select the horizontal trait and vertical trait when you are placing UI components.

If components are coded for regular class, they will disappear when in compact mode.