1. 程式人生 > >如何ScrollView在XIB或者Storyboard中設定約束並實現翻頁滾動效果

如何ScrollView在XIB或者Storyboard中設定約束並實現翻頁滾動效果

使用XIB對檢視進行約束非常簡單,也很方便,節省了很多程式碼量,這是眾所周知的事情!但是UIScrollView的約束在XIB裡面比較複雜,而且有時候對它進行約束會經常出錯,當然,這是對你沒有在SV(以下UIScrollView簡稱)上放置別的檢視來說,假如你要對SV進行操作,並在上面放置很多view,並進行約束,那便是比較複雜,以下我就舉個列子來說明對SC上放置多個view,並對其進行約束(完全用約束實現不用程式碼)來實現翻頁滾動的效果。
首先,你得建立一個工程,然後點選選擇其中一項,如下圖:
選擇該選項
然後點選Main.storyboard進入到視覺化介面,選擇view,並往裡拖入SV檢視,結果如下圖:
選中SV


按照下圖所示對SV進行約束設定:
請按照圖中所示進行操作上中下距離都設定0
至此,如果說你單單只是新增一個SV上去,不做別的任何一個操作,那便到此即可,其餘的操作你可以拖動控制元件到程式碼區進行操作!!!
接下來的操作便是實現用xib對SV上進行多個view的約束,且實現翻頁滾動的效果!
第一步:拖動三個view(以下簡稱AV,BV,CV三個檢視)放置在SV上,如下圖:
按順序擺放
第二步:因為是要實現翻頁效果,在這裡是設定一個螢幕一頁,所以設定SV的兩個屬性,還要先修改三個view的frame,如下四個圖所示:
第一個是隻顯示橫滾動條,第二個是實現翻頁滾動,第三個是橫向滾動帶有彈性效果
第三步(重點):關鍵點來了,記住SV的contentsize的大小是根據它上面的子檢視的大小來固定的,所以,關鍵點在於把子檢視的整體frame搞定就搞定SV的contentsize的大小,這樣就能解決SV的約束的問題了,話不多說,上圖:

  1. 先做AV的約束(按順序來):

    第一張和第二張圖做的約束是因為,AV這個檢視需要得到它的寬高,這樣就能固定下來AV的寬高,是根據view(即SV的SuperView)來確定的。
    第三張和第四張圖做的約束是因為,SV這個滾動檢視的左邊界和上邊界還有下邊界需要和AV的上左下邊界進行約束,這樣就能讓SV知道contentsize的上左下知道位置。
  2. 再做BV的約束:

    BV是因為夾在中間,所以它只要設定對AV檢視的相對位置,首先是和AV檢視的右邊界的距離,還有和AV上邊對齊,還要和AV檢視等高等寬,這樣就能確定BV的位置了
  3. 最後做CV的約束:

    圖一和圖二的約束意思和BV對AV做得的約束的意思是一樣的,圖三和圖四的約束目的是為了讓SV的右邊界知道它所在的位置是緊貼CV的右邊界!

    注意:這樣做完,約束是做完了,但是還有一個問題,不知道你發現沒有,就是說你執行起來的時候,發現SV並不會滾動,原因是因為CV對SV的約束的constants值是-1200,應該改為0,如下圖:

    至此整個UIScrollView的約束已經做完,執行起來也很流暢,嘿嘿,親,懂了麼,學會了麼?
    要點:UIScrollView的約束主要問題在於contentSize的大小,它是根據UIScrollView的子檢視的整體大小來確定的,只要知道掌握這個,你就學會UIScrollView的約束的精髓了,之後無論什麼要求都能完美解決了!