iOS UIScrollView高度自適應(yīng)

UIScrollView經(jīng)常會用來一些高度不確定的場景,要想完全展示(可滾動)需要正確計算contentSize的大小,當子控件很多時手動計算這些frame還是比較復(fù)雜,想要簡單點就需要利用AutoLayout來實現(xiàn)自適應(yīng)高度(寬度)。

高度自適應(yīng)時可以在UIScrollView中添加一個contentView,然后對contentView進行約束。然后將其他子控件添加到contentView中,再按照正常使用View的方式約束各個子控件即可。

這時就需要對contentView進行正確的約束,否者UIScrollView將無法正確計算contentSize的大小從而導致UIScrollView無法滾動的問題。

Xcode11?之后對UIScrollView添加了一個新的屬性Content Layout Guide來控制contentSzie。再啟用這個屬性后UIScrollView中會自動添加兩個屬性:

  1. Content Layout Guide:用于控制contentSzie,需要自適應(yīng)高,寬的屬性都需要依賴該項。
  2. Frame Layout Guide: UIScrollView的固定顯示區(qū)域

UIScrollView高度自適應(yīng)(寬度類似)的示例流程如下:

  1. 先對UIScrollView的四邊進行約束來確定它的位置大小。

  2. 向UIScrollView添加contentView再對其設(shè)置約束:
    一:不使用Content Layout Guide屬性

    1. 添加contentView的四邊與UIScrollView的四邊對齊的約束;
    2. 為contentView的寬添加一個可確定值的約束,添加方式有兩種:
      1. 直接為contentView設(shè)置一個固定值的寬度約束。
      2. 將contentView的centerX(垂直方向)與UIScrollView的centerX對齊,這樣就可使contentView的寬度與UIScrollView的寬度保持一致。
    3. 為contentView添加一個高約束即可實現(xiàn)滾動了,由于這是需要自適應(yīng)高度所以不需要添加這個高的約束。只需要在contentView中的子控件添加約束即可,注意要正確實現(xiàn)高度自適應(yīng),contentView中所有子控件添加的約束一定要能確認contentView的高才行,否則高度自適應(yīng)將失敗。 \

    二:使用Content Layout Guide屬性

    1. 操作方式與上面的一樣,只有contentView的約束對象變?yōu)榱薈ontent Layout Guide 和 Frame Layout Guide對象了。
    2. contentView的四個方向的約束對象變成了Content Layout Guide
    3. contentView.centerX的約束對象變?yōu)榱薋rame Layout Guide.center.X
  3. 特別注意: contentView中所有子控件添加的約束一定能夠確認contentView的高才能使其高度自適應(yīng)。

設(shè)計示例截圖

下圖中灰色部分表示UIScrollView,黃色和藍色部分表示contentView。
然后再向contentView中添加了一個label使其的top,bottom與contentView對齊,這樣就能確定contentView的高度了。
然后設(shè)置label的text讓其動態(tài)計算高度,只要label的高度超過UIScrollView的可視區(qū)就能使其滾動了。

兩種方式整體
不使用Content Layout Guide
使用Content Layout Guide

運行效果示例圖

不使用Content Layout Guide,自適應(yīng)的高度小于UIScrollView的高度
不使用Content Layout Guide,自適應(yīng)的高度大于UIScrollView的高度
使用Content Layout Guide,自適應(yīng)的高度小于UIScrollView的高度
使用Content Layout Guide,自適應(yīng)的高度大于UIScrollView的高度

重復(fù)提示

contentView中所有子控件的約束必須能夠確定contentView的高度,否者高度自適應(yīng)失敗。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容