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


背景

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

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

會討論問題

如果還沒有概念,請網上搜搜背景技術點,這里只穿針引線插上幾句,基本概念還這里不會再復制粘貼一遍。

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

Q:@1x,@2x,@3x的圖片什么時候會用上? 

Q:怎么保證不同機型的圖標顯示尺寸一致?

Q:masnory下的mas_equalTo、mas_greaterThanOrEqualTo、mas_lessThanOrEqualTo到底有什么區別?

為驗證問題,准備了3個logo,@1x、@2x、@3x的分辨率分別設定為38、75、180,都是用之前寫的icon工具一鍵導出的,為了做區分,在logo中寫了1、2、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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM