xib裏 scrollView的 適配

http://blog.csdn.net/delegate_m/article/details/52022691



1、在使用xib定製界面時,我們經常會用到AutoLayout自動佈局,或者不用AutoLayout,自己在xib屬性的地方進行約束

2、xib中,ScrollView的自動約束並不像我們平常約束其他view一樣,由於ScrollView的滾動範圍是由有屬性ContentSize決定的,所以在xib中使用AutoLayout約束的時候會相對雜一下。 
3、在xib中拖動一個scrollerView到xib中,scrollerView直接在View下面,界面結構如下: 
 
4、對srollerView進行約束,並更新位置 
這裏寫圖片描述 
5、添加約束完成之後,會發現一切正常,並沒有報錯,接下來我們往srollerView中添加一個View,會發現立馬報錯,

這裏寫圖片描述

點擊小紅點,會發現ContentSize報錯,

這裏寫圖片描述

我們不用管他,返回去就可以了,然後選中View,添加約束,

這裏寫圖片描述

6、給view添加約束之後,會發現還是報錯, 
這裏寫圖片描述

這是需要給view再添加一個垂直約束(ScrollView需要垂直滾動,如果需要水平滾動,則需要水平約束,並設置view的寬約束), 
這裏寫圖片描述

添加垂直約束相當於添加X約束,添加成功之後,會報Y沒有約束的錯誤, 
這裏寫圖片描述

然後我們再選中View,添加height約束,這裏約束的是600, 
這裏寫圖片描述

這是會發現,沒有報錯了,說明可以正常使用了

7、如果想要在控制器中動態的設置ScrollView的ContentSize,可以將view的高度拉線設置成屬性,然後在控制器合適的計算地方設置ScrollView的垂直滾動範圍,

<code class="hljs objectivec has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">@property</span> (<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">weak</span>, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">nonatomic</span>) <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">IBOutlet</span> NSLayoutConstraint *scrollerViewContentWith; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// 屬性設置</span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>
<code class="hljs ruby has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">self</span>.scrollerViewContentWith.constant = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1200</span>; <span class="hljs-regexp" style="color: rgb(0, 136, 0); box-sizing: border-box;">//</span> 設置<span class="hljs-constant" style="box-sizing: border-box;">ScrollView</span>的垂直滾動範圍</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li></ul>

8、如果想要往ScrollView上添加需要跟隨ScrollView滾動的控件(比如label),只需要將label添加到view(上面高度約束爲600的那個view)上,成爲view的subView就可以了,簡單來說就是忽略掉ScrollView,把需要的控件放到view上,按照正常的約束來約束控件就可以了。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章