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

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.

[Question] UIScrollView doesn't work in Storyboard

I cannot make UIScrollView work when I add some components into it using Storyboard with auto layout turned on. So, I now add all components by code.

Does anyone know how to fix it? Thanks~