iOS布局和螢幕適配的一點總結

2021-12-29 22:40:20 字數 1848 閱讀 1027

曾經,ios開發是不需要考慮螢幕適配問題的,因為只有一種螢幕尺寸。而現在已經有了4種螢幕,4,5,6,6p,因此螢幕適配也成了ios開發中必須考慮的問題。並且,這4種螢幕的寬高比全部都不一樣,所以簡單的按比例縮放並不能解決問題。我們最近做的乙個app也處理了螢幕適配,本文簡單總結一下

我不知道有沒有更好的辦法,我們的做法是根據裝置型別,寫一些if...else,或者switch語句

判斷機型可以使用screen的height(不能使用width,因為4和5的width是一樣的,都是320),也可以使用api裡的巨集,都差不多。我個人感覺,if...else似乎是不可避免的,雖然有auto layout,但是有一些大的布局改動,或者字型大小,不用判斷似乎是無法解決的

比如說,為了達到最佳顯示效果,我們在大的螢幕上使用collectionview,而在4s上使用tableview,用自動布局應該是沒有辦法做到的。或者根據螢幕的大小,切換字型大小,好像也只能通過if...else來實現

根據螢幕型別適配,**類似:

if(screentype == losscreentype6p)else if(screentype == losscreentype5)else

我們也用了比較多的「硬計算」,比如對於uicollectionview裡的每個cell的width,我們是這麼處理的:

cgrect rect = [[uiscreen mainscreen] bounds];

screenwidth = rect.size.width;

cellwidth = (screenwidth - 30) / 3;

cellheight = cellwidth * 0.8 + 50;

- (cgsize)collectionview:(uicollectionview *)collectionview layout:(uicollectionviewlayout *)collectionviewlayout sizeforitematindexpath:(nsindexpath *)indexpath

我們規定collectionview裡每行有3個單元格,整個section的左右間距是10,列間距是5,因此計算出 (width - 30) / 3就是每個單元格的寬度,單元格的高度也是經過計算寫死的

我不太確定這種方式好不好,不過對於這個頁面是好使的。類似這種基於螢幕尺寸做計算的方法,app裡在幾個頁面都有用到

masonry是我們實現螢幕適配的重要手段之一,本質上是介面約束的語法糖。基本上,我們的做法是:大的頁面關係,用計算完成;每個小塊裡面的相對位置關係,用masonry來做。在有些場景下,masonry有非常大的優勢。比如說:

1、設定某個view的寬高比

[thumbimageview mas_makeconstraints:^(masconstraintmaker *make) ];

此view的寬度與父view同寬,高度是寬度的0.8

2、設定居中,設定相對邊距

[authorname mas_makeconstraints:^(masconstraintmaker *make) ];

垂直方向與另乙個view對齊,左邊距離上乙個元素的右邊5,右邊距離父view右邊5

類似這種布局,用frame來寫會複雜很多,如果再考慮螢幕適配,需要非常多**。這類的需求,masonry堪稱神器。不過使用中發現,用masonry布局的view,我們通常會init,或者initwithframe:cgrectzero。這個view直到經過masonry處理以後,它的origin和size才能確定,如果在此之前就用到它的origin和size,就會有問題

對於適配後變化不大的頁面,把if...else寫在uiview裡,但是有個別頁面,完全要根據裝置顯示不同的view。這種情況比較適合在controller裡做判斷,然後load不同的view

iOS布局和螢幕適配的一點總結

我不知道有沒有更好的辦法,我們的做法是根據裝置型別,寫一些if.else,或者switch語句 判斷機型可以使用screen的height 不能使用width,因為4和5的width是一樣的,都是320 也可以使用api裡的巨集,都差不多。我個人感覺,if.else似乎是不可避免的,雖然有auto ...

iOS螢幕適配教程(手動布局和自動布局)

ios螢幕適配教程 1.通過frame進行適配 在ios早期開發,都是使用frame屬性進行螢幕適配,需要多套 非常麻煩。使用frame新增控制項view,並設定屬性,但是只能使用指定螢幕尺寸 super didreceivememorywarning uiview greenview uiview...

布局的一點總結

1.box布局 box布局實現了浮動,並且預設沿著一行排列div。超過部分在頁面可視區域之外 一行的右邊 超過部分不會跑到下一行。box布局的好處 如果左對齊,不用考慮子元素的寬度,box 就可以實現真正意義上的流體布局。只要給出相應屬性,瀏覽器會幫我們做額外的計算。2.選擇按鈕 如果用input的...