幾張圖弄明白ios佈局中的尺寸問題

背景

先說說逆向那事。各類曲折..各類技術過期,老老實實在啃看雪的帖子..更新會有的。

回正題，這裏討論的是在Masnory框架下的佈局問題。像我這種游擊隊沒師傅帶，什麼都得本身琢磨，一直沒鬧明白下面幾個問題，今天終於下決心整理測試了一下，看完這篇文章基本上能鬧明白ios的圖標大小問題了。

會討論問題

若是尚未概念，請網上搜搜背景技術點，這裏只穿針引線插上幾句，基本概念還這裏不會再複製粘貼一遍。

集中想討論3個問題，其餘問題再這3個問題的答案基礎上很好延伸弄明白。

Q:@1x，@2x，@3x的圖片何時會用上？ 

Q:怎麼保證不一樣機型的圖標顯示尺寸一致？

Q:masnory下的mas_equalTo、mas_greaterThanOrEqualTo、mas_lessThanOrEqualTo到底有什麼區別？

爲驗證問題，準備了3個logo，@1x、@2x、@3x的分辨率分別設定爲3八、7五、180，都是用以前寫的icon工具一鍵導出的，爲了作區分，在logo中寫了一、二、3加以區分。測試在模擬器下進行。

 

Q:@1x，@2x，@3x的圖片何時會用上？

簡單理解，是根據機型來的。深刻點說，根據屏幕尺寸來的。這裏須要瞭解的知識點有倆

1.尺寸的單位，CGSizeMake(33,33)

函數中尺寸單位不是px也不是android中dp，具體請搜索。一句話理解就是：根據屏幕分辨率不一樣，單位實際表明的px大小公式不一樣，可簡單理解爲一個相對尺寸，@nx表示@1x的像素尺寸乘以多少倍。

圖中左邊是iphone6（@2x），右邊是iphone6 plus（@3x）。代碼固定了大小爲66*66。能夠大體看出來圖標大小實際上是不同的（爲何後面會提到）。

    [self.image mas_makeConstraints:^(MASConstraintMaker *make) {
        make.center.mas_equalTo(self.view);
        make.size.mas_equalTo(CGSizeMake(66,66));

    }];

須要注意的是，你的圖片實際像素尺寸不能比代碼給定的尺寸小，不然圖片會失真很難看。好比如今代碼是66*66，那麼@2x的像素大小不能低於132*132，@3x的不能低於198*198，明白了吧？

2.關鍵的44＊44

這是ios認爲人的手指點按鈕最小的尺寸大小。蘋果在ui規範中給定了不少元素的標準尺寸，照着要求出圖就行。但若是是自定義的尺寸，好比你想畫一個超大的圓在界面上，那就得把1x、2x、3x的圖標都作好，尺寸大小應參照（1）的公式。好比你想在ui中展現一個40*40的圖標，那麼，@1x的實際px像素爲40＊40，@2x的實際像素尺寸爲80*80，@3x的實際像素尺寸爲120*120。

Q:怎麼保證不一樣機型圖標尺寸一致？

若是想不一樣機型下顯示的尺寸如出一轍，能夠用百分比的方式define一個值，這樣不一樣的機型，圖標尺寸如出一轍確定沒得跑。

#define kCaptureBtnSize CGSizeMake(kWindowW/3.5f,kWindowW/3.5f)   //按鈕尺寸

若是不想用百分比，想直接設定，那怎麼控制不一樣屏幕下的尺寸大小？若是是mas_equalTo屬性，會自動根據屏幕分辨率設定，圖標顯示大小其實不同的（若是你設定過邊距就更能感覺的到），須要用到、mas_greaterThanOrEqualTo、mas_lessThanOrEqualTo這幾個屬性了。

Q:masnory下的mas_equalTo、mas_greaterThanOrEqualTo、mas_lessThanOrEqualTo到底有什麼區別？

mas_equalTo已經前面講了，而且也是最經常使用的關係。greater和less如字面意思同樣「比尺寸大」/「比尺寸小」，那麼這裏究竟比誰大呢？這裏指的實際上是圖標的實際像素尺寸，看圖：

這裏設定了一個比圖標實際尺寸大的值100*100（根據公式，在iphone6 plus下，圖標尺寸應該爲300*300），若是mas_lessThanOrEqualTo，那麼因爲像素尺寸不足，因此圖標是多大，就顯示多大。

這裏設定了一個比圖標實際尺寸小的值50*50（根據公式，在iphone6 plus下，圖標尺寸應該爲150*150），若是mas_greaterThanOrEqualTo，那麼因爲像素尺寸超過了設定尺寸，因此圖標是多大，就顯示多大。

總結

如今能明白布局中的尺寸問題了吧。只要圖標的實際像素尺寸按照公式計算得出，那麼就不會出現像素失真的問題，也能夠保證不一樣屏幕下的尺寸。

 

P.S

來App獨立開發羣533838427

github：https://github.com/huijimuhe