iOS UIScrollView高度自適應

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

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

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

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

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

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

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

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

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

    二:使用Content Layout Guide屬性

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

設計示例截圖

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

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

運行效果示例圖

不使用Content Layout Guide,自適應的高度小于UIScrollView的高度
不使用Content Layout Guide,自適應的高度大于UIScrollView的高度
使用Content Layout Guide,自適應的高度小于UIScrollView的高度
使用Content Layout Guide,自適應的高度大于UIScrollView的高度

重復提示

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

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容