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了 :)