2016年1月13日 星期三

[iOS] AutoLayout 筆記 - 基本知識

假設我們在畫面上放入一個寬高均為100的View,並且靠左與靠上都是10




















此時,我們執行在不同的手機下,這個正方形的寬高會是多少呢?

A. 都是100

B. 隨著手機解析度而改變

答案應該是B,但是規則可能會讓你搞不太清楚,

我們執行在4s , 5 , 5s的模擬器上,並且截圖(利用模擬器截圖)





















實際去確認藍色區塊的大小,你會發現這個正方形是 200像素 x 200像素

可是不是會根據手機不同而改變嗎?為什麼在4s 5 5s都是一樣的結果呢?

此時你如果執行在6s+ 或6+上面,你會發現這個正方形是 300像素 x 300像素

這樣有些人可能知道為什麼了,我們在Assets設定圖片的時候,上面有1x 2x 3x這玩意,

就如同這個概念一樣,Assets的圖片會隨著解析度的不同給不同的圖,詳細的可以參考這篇

http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

簡單的說

iPhone6+ 6s+ 是3x

iPhone4以下是1x

而其他的都是2x

只要你在6+或6s+執行你的app時,圖片就會去跟3x要圖。

而如果是在4s執行的話,因為是2x,因此會去跟2x要圖。













如果你能了解圖片的運作,那麼storyboard的屬性變化應該也能理解了。

我們設定這個寬高為100,如果在4s 5 5s執行,就會變成2x,也就是200。

而如果在6+ 6s+執行,則會變成3x,也就是300。

這樣的規則除了間距與大小外,字體大小也是會跟著變化的。

因此如果你想要在iPhone 5s上面畫一個30x30的正方形,

你應該知道值要輸入多少了 :D

沒有留言:

張貼留言