UIScrollView相對布局

2021-09-20 06:24:56 字數 2744 閱讀 4165

uiscrollview在ib中的相對布局一直是個令人頭疼的事情,大家所遇到的不外乎下面兩個問題

1. 如何正確確定contentsize大小

2. 如何設計超過一屏大小的介面

首先必須知道的一點是使用autolayout後,contentsize無需手動設定,系統會通過加入到uiscrollview的內容來確定contentsize的大小。先來看乙個簡單的例子。

拖乙個uiscrollview到vc上,設定其上下左右的約束相對于父檢視為0

拖乙個uilabeluiscrollview中心上,同樣需要設定上下左右的約束

最終得到的結果:

為什麼label的布局需要確定設定上下左右的約束?

前面提到的,系統會通過加入到uiscrollview的內容來確定contentsize的大小。設想一下如果去除掉向右和向下的約束,那麼uiscrollview為了能包含這個label,contentsize所要達到的條件是:

* 橫向至少 139 + 42=181 畫素的寬度

* 縱向至少 273 + 21=294 畫素的高度

也就是contentsize的值至少是,當然這個值還可以是等等,所以說contentsize的值是不確定的。而且當去除這任意乙個約束的時候,ib也會給出contentsize不確定的警告。

warning: ambiguous layout: scrollable content size is ambiguous for "scroll view".

另外需要注意的是,對於固定行數和固定text值的label,高寬是確定的,不用顯性的去設定。再來看增加了向下和向右的約束的時,contentsize所要達到的條件是:

* 橫向: 139 + 139 + 42 = 320

* 縱向: 274 + 273 + 21 = 568

contentsize這時候的值是確定的為,所以在布局uiscrollview內容檢視的時候,始終要記住一點:必須讓uiscrollview知道其contentsize大小,而不是乙個不確定的值,這樣才算完成uiscrollview布局。

再回頭看uiscrollview的布局:相對於其父檢視的上下左右約束都是0。這就說明它的寬高其實決定於裝置,3.5寸螢幕大小的裝置是,4.0寸螢幕大小的裝置是.....那麼如果在iphone 4上執行,uiscrollview縱向需要滾動,因為縱向需要的畫素大小(568) > 480。在iphone 5上執行,uiscrollview縱向不需要滾動,因為縱向需要的畫素大小(568) = 568。

實際運**況具體如何?在iphone 5(7.1韌體)模擬器上執行會發現,uiscrollview竟然可以縱向滾動,這是為什麼。還記得ios 7給uiscrollview及其子類預留的額外64個畫素的滾動區域嗎,就是這個原因導致uiscrollview的contentsize值的高度會相對減少64畫素。那麼縱向需要的畫素大小(568) > 568 - 64,所以uiscrollview才會在縱向滾動。可以試著將label向上的約束值改為274 - 64 = 210或在ib中取消viewcontroller的adjust scroll view insets就會無法滾動。

簡單的布局兩屏寬度的ui

設定viewcontroller的寬度

這樣一來就可以在超過兩屏寬度的檢視上布局

拖兩個view到uiscrollview上,分別設定好顏色,view1代表紅色view,view2代表黑色view

view1設定左、上、下約束為0,向右相對於view2屬於設定0,view2設定右、上、下約束為0

先無視警告,到這步contentsize的寬高其實都是未確定的,因為view1和view2的寬高都是不確定的。

選中view1和uiscrollview約束選擇相同的寬高,選擇view2執行相同的約束,最後update frames

橫向:0 + view1的寬度 + 0 + view2的寬度 = 兩倍的uiscrollview寬度

縱向:0 + view1的高度 + 0 = uiscrollview高度 或 0 + view2的高度 + 0 = uiscrollview高度

將viewcontroller的size重新設定為fixed

UIScrollView實現重用

import inte ce test19viewcell uiview 索引 property nonatomic,assign nsuinteger index 文字 property nonatomic,copy nsstring text 文字控制項 property nonatomic,r...

UIScrollView使用注意

這裡討論同時使用autolayout 和 uiscrollview 的情況 1.如果內容元件的尺寸能夠確定 則直接在storyboard 中設定乙個uiview包裹住所有內容元件,並在storyboard中設定固定的高度。這樣,uiscrollview設不設定contentsize都可以正常顯示。2...

UIScrollView控制項介紹

一 知識點簡單介紹 1.uiscrollview控制項是什麼?1 移動裝置的螢幕 大 小是極其有限的,因此直接展 示在 使用者眼前的內容也相當有限 2 當展 示的內容較多,超出 乙個螢幕時,使用者可通過滾動 手勢來檢視螢幕以外的內容 3 普通的uiview不具備滾動功能,不能顯 示過多的內容 4 u...