如何在AutoLayout中使用UIScrollView

時間 2022-04-02 15:45:02

1樓:用q戶名

原則1:uiscrollview的size依賴於subviews

首先在畫布中拖入一個uiscrollview。用pin按鈕,隨意設定其佈局。甚至不用設定。

因為《如何》一文中的第一個原則是:uiscrollview的佈局依賴於subviews。因此我們設定uiscrollview的佈局約束是沒有用的。

我們只需要將subviews的size都明確下來,這條原則自然不成問題。

uiscrollview的size(即contentsize)則根據subviews所佔據的size來計算。當然,如果contentsize的內容不足以佈滿整個uiscrollview時,滾動條將不會出現,uiscrollview也不會滾動。

原則2:subviews的size不能依賴於uiscrollview

比如你設計這樣一個佈局:

uiscrollview包含兩個subview:uilabel和uitextfield。

uilabel的pin約束設定如下:

注意,這裡我們固定了uilabel的寬度為100,而label的高度也是固定的(lines設定為1)。這是可行的,因為它的寬高都沒有依賴於uiscrollview了。

但我們不可能所有控制元件都使用固定的寬高,那樣就不叫做「自動佈局了」。

例如,uitextfield,我們準備設定它的pin約束為:

這樣,uitextfield沒有固定的寬高了。這樣說也不對,其實uitextfield是有固定高的,對於一個使用了預設邊框型別(圓角)的uitextfield來說,它的高度固定為30。但對於寬度則是由左邊緣和右邊緣決定。

從上圖可知,它的左邊緣距離左邊的uilabel 8個畫素,右邊緣距superview的右邊緣14個畫素。這樣uitextfield的寬度應該由右邊緣的x減左邊緣的x得到。

由於左邊的uilabel為固定寬度,所以uitextfield的左邊緣位置也是固定的。但右邊緣的x則是相對於superview而定的,這就不可能固定。

我們知道在xcode6的自適應佈局上,view的大小實際上是根據裝置而變的,在iphone上是一個size,在ipad上又是另一個size。

但無論如何,我們的uitextfield無論在何種裝置上都能自適應。無非是在iphone上略顯窄一點,在ipad上則寬一些。

2樓:雪v歌

首先,我在故事板中定義如下檢視層次:

view (uiviewcontroller 的 view)

· scroll view (uiscrollview)– 暗灰色

· container view (uiview) – 輕灰色

· content1 (uiview) – 紅色

· content2 (uiview) – 綠色

· content3 (uiview) – 藍色

最終在故事板中顯示為如下佈局:

在設定佈局規則之前,注意以下幾點:

scroll view 沒有固定的高度和寬度。

scroll view 的 寬度和高度由其內容所決定(即 scroll view 的

contentsize 所決定) 。

內容的大小必須不依賴於 scroll view

的尺寸。例如,content1,content2,content3 不能包含任何與 container view 相關的 top,bottom,left 和

right 的佈局約束。只能包含固定寬度和高度的約束(每個約束至少在得在其中之一上定義)。如果任何一個 content view

都不包含這些約束,則它們的大小將依賴於 scroll view(因為它們被繫結到 scroll view 的邊距),但 scroll view

又依賴於內容的尺寸,這就導致矛盾衝突。

scrollview 必須至少有一個內容繫結它的四條邊,例如

top,left,right,bottom。這樣 scrollview 才能知道它的內容的邊界在**,即 scroll view 的

contentsize。

現在,讓我們開始佈局。

scroll view (uiscrollview): 相對於 superview , leading,

trailing, top, bottom 四個方向都為 20。

你也可以將 20 改為 0,這樣將佔據 view controller 的整個 view

大小。container view (uiview): 相對於 scroll view,leading,

trailing, top, bottom 四個間距都取值 0。

一般來說,這是固定不變的,除非你想做一個在邊上留白的效果。

在截圖裡,

leading, trailing, top, 和 bottom 間距都設為 0。container view 的尺寸將有 3 個 content views

的大小決定,從而再影響 scrollview 的大小(scrollview 的實際大小將在執行時計算,在故事板上設定它的大小沒有任何作用)。

content1: 固定寬為 100,高 240,leading 和 trailing 邊距 20,top

邊距 8,bottom 邊距 8( content1 和 content2 之間的間距)。

注意 leading 和 trailing 約束,以及

width 約束。如果 content1 是位於另外一個固定大小的 view 中,則 xcode 會提示有約束衝突。但 content1 除 bottom 外,

top,left,right 邊距都是相對於 scrollview 的。

content2: leading 和 trailing 為 20 , bottom 為

8 (content2 和 content3 之間的垂直間距), 高度 100。

我們沒有新增寬度限制。這樣,只有 content1 能影響

scrollview 的 contentsize。

content3: leading 和 trailing 為 20,button 20(content3

和 superview 即 containerview 之間的垂直間距)。寬度固定為 100。現在,我們也有一個 view 跟 scrollview

的底邊是相關的了。

用 iphone

3.5 inch 模擬器執行程式,觀察執行結果。

怎麼不能滾動?

別急,這是因為

contentview 對於scrollview 來說還不夠大的緣故。

我們可以修改任何一個 contentview 的 size。這裡,我只修改了 content1

的寬度:

-(void)viewdidload

執行程式,水平滾動條出現。注意,別忘了為相應的約束建立 iboulet。

然後,嘗試修改content2 的高度。

-(void)viewdidload

執行程式,垂直滾動條也出現了。

iso 中storyboard中怎麼設定uiscrollview滑動 不實用autolayout

3樓:元小翠

首先,我在故事板中定義如下檢視層次:

view (uiviewcontroller 的 view)

· scroll view (uiscrollview)– 暗灰色

· container view (uiview) – 輕灰色

· content1 (uiview) – 紅色

· content2 (uiview) – 綠色

· content3 (uiview) – 藍色

最終在故事板中顯示為如下佈局:

在設定佈局規則之前,注意以下幾點:

scroll view 沒有固定的高度和寬度。

scroll view 的 寬度和高度由其內容所決定(即 scroll view 的

contentsize 所決定) 。

內容的大小必須不依賴於 scroll view

的尺寸。例如,content1,content2,content3 不能包含任何與 container view 相關的 top,bottom,left 和

right 的佈局約束。只能包含固定寬度和高度的約束(每個約束至少在得在其中之一上定義)。如果任何一個 content view

都不包含這些約束,則它們的大小將依賴於 scroll view(因為它們被繫結到 scroll view 的邊距),但 scroll view

又依賴於內容的尺寸,這就導致矛盾衝突。

scrollview 必須至少有一個內容繫結它的四條邊,例如

top,left,right,bottom。這樣 scrollview 才能知道它的內容的邊界在**,即 scroll view 的

contentsize。

現在,讓我們開始佈局。

scroll view (uiscrollview): 相對於 superview , leading,

trailing, top, bottom 四個方向都為 20。

你也可以將 20 改為 0,這樣將佔據 view controller 的整個 view

大小。container view (uiview): 相對於 scroll view,leading,

trailing, top, bottom 四個間距都取值 0。

一般來說,這是固定不變的,除非你想做一個在邊上留白的效果。

在截圖裡,

leading, trailing, top, 和 bottom 間距都設為 0。container view 的尺寸將有 3 個 content views

的大小決定,從而再影響 scrollview 的大小(scrollview 的實際大小將在執行時計算,在故事板上設定它的大小沒有任何作用)。

content1: 固定寬為 100,高 240,leading 和 trailing 邊距 20,top

邊距 8,bottom 邊距 8( content1 和 content2 之間的間距)。

注意 leading 和 trailing 約束,以及

width 約束。如果 content1 是位於另外一個固定大小的 view 中,則 xcode 會提示有約束衝突。但 content1 除 bottom 外,

top,left,right 邊距都是相對於 scrollview 的。

content2: leading 和 trailing 為 20 , bottom 為

8 (content2 和 content3 之間的垂直間距), 高度 100。

我們沒有新增寬度限制。這樣,只有 content1 能影響

scrollview 的 contentsize。

content3: leading 和 trailing 為 20,button 20(content3

和 superview 即 containerview 之間的垂直間距)。寬度固定為 100。現在,我們也有一個 view 跟 scrollview

的底邊是相關的了。

用 iphone

3.5 inch 模擬器執行程式,觀察執行結果。

怎麼不能滾動?

別急,這是因為

contentview 對於scrollview 來說還不夠大的緣故。

我們可以修改任何一個 contentview 的 size。這裡,我只修改了 content1

的寬度:

-(void)viewdidload

執行程式,水平滾動條出現。注意,別忘了為相應的約束建立 iboulet。

然後,嘗試修改content2 的高度。

-(void)viewdidload

執行程式,垂直滾動條也出現了。

如何在火狐中使用Onenote,如何在Windows系統中使用OneNote

開啟chrome 位址列的右邊 的那一個 控制當前頁的圖示 選擇列印或者直接按組合鍵 ctrl p 彈出列印選擇框 選擇印表機 中的 傳送至onenote就ok了 ie中和firefox中都可以這樣。這個需要根據不同版本的firefox可以新增不同的onenote,我的新增方法如下 1 將firef...

如何在jsp頁面中使用freemarker標籤和struts2標籤

三炮 struts cleanup org.apache.struts2.dispatcher.actioncontextcleanup sitemesh freemarker org.apache.struts2.sitemesh.freemarkerpagefilter default enco...

如何在ecel中使用rank函式排序

函小苼 首先,開啟需要修改的exce,然後選擇需要修改的資料,輸入rank公式即可排序。具體步驟如下 1 電腦開啟excel 2 電腦開啟excel 後,在排名中輸入公式 rank j11,j 11 j 14 j 11 j 14是所有成績單元格的絕對值,選中單元格後按f4就會變成絕對值。3 輸入公式...