iOS界面開發須要用Point乘以屏幕比例係數嗎

iOS界面開發須要用Point乘以屏幕比例係數嗎

現狀

因爲公司給 app 設計的效果圖是基於 iPhone 6 的，效果圖的寬度是 375 point。爲了適應大小屏幕，咱們專門封裝了一個函數來獲取一個適配的點。

inline CGFloat Point(void)
{
    static CGFloat point;
    static dispatch_once_t onceToken;
    dispatch_once(&onceToken, ^{
        point = ([UIScreen mainScreen].bounds.size.width / 375.0f);//以iPhone6爲標準的比例值
    });
    
    return point;
}

因此在使用的時候，就會是效果圖上裏面的點乘以適配點。好比一張 140 x 140 圖片距離屏幕左邊 20 點。

UIImageView *imageView = [UIImageView new];
imageView.frame = CGRectMake(20 * Point(), 0, 140 * Point(), 140 * Point());

這樣的話，在大屏幕裏面，間距和圖片大小都會比效果圖更大，

在小屏幕裏面，間距和圖片大小都會比效果圖更小，這樣就能夠適配小屏幕了。

雖然這樣很好的適配小屏幕，可是會讓大屏幕的間距看起來很大，整體看起來沒有很好的利用空間。好比距離左邊 20 點，在 7p 上就是 22.08，會多出 2.08 的點，這樣就會距離左邊更大了。

20 * Point() = 20 * 1.104 = 22.08

<!--more-->

兩種經常使用的計算方式

1. 點乘以係數，既 n * Point()，這就是上面所說的方式。
2. 就是直接使用點，這樣的話就能夠在不一樣的屏幕空間之間的間距就是同樣的了，不會形成像方式一在大屏幕上的空洞感。可是缺點就是，若是在一行上全部的控件都是固定寬度而且超過最小屏幕的話，就不適用了，若是真有這種狀況，那我以爲設計上就不對了，在設計上至少要讓一行上某一個控件自適應。

優酷用的是什麼方式呢？

優酷是怎麼處理這個問題的呢？
我用 Reveal 捕獲了優酷在 5s（越獄） 上的界面，而後在 7p（系統版本高了，越不了監獄） 作了截圖。

而後用 ps 工具對 7p 上的截圖作了尺寸獲取，並與 5s 上的 reveal 界面進行對比。發現這兩個機型下，九宮格圖片距離屏幕左邊都是 9 個點，九宮格圖片之間的距離都是 3 個點，包括頭像左右，上下，還有頭像大小都是同樣的。

iPhone 5s：

iPhone 7 Plus：

淘寶用的是什麼方式呢？

淘寶是怎麼處理這個問題的呢？
我用 Reveal 捕獲了淘寶在 5s（越獄） 上的界面，而後在 7p（系統版本高了，越不了監獄） 作了截圖。

淘寶對比的結果跟優酷同樣的，在間距上都是用的點。圖片的大小都是 140 點。圖片上下的間距都是 6 點。

iPhone 5s：

iPhone 7 Plus：

我來看看淘寶在 5s 上的字號與 7p 上字號是否一致。

iPhone 5s 上標題的字號是 14。

iPhone 7 Plus 上的字號也是 14，字號與 5s 上的是同樣的。

總結

通過上面的對比，咱們能夠發現直接用點去佈局，纔是合理的，能夠更好的利用屏幕空間，讓大小屏幕在觀感上有一致的體驗。並且也會少了不少像素不對齊的狀況。