iOS開發項目實戰——Swift實現ScrollView捲軸功能

標籤：scrollview   ios   swift   捲軸   

       手機作為一個小屏裝置，需要顯示的資訊往往無法在一個螢幕上顯示，此時就需要使用到捲軸，當然除了像TableView這樣可以內建滾動功能的。如果一個介面上View較多，那就必須要使用到ScrollView了。現在我們將會使用Swift在iOS上實現滾動效果。具體實現如下：

（1）建立一個新的iOS項目，語言選擇Swift，並在Main.storyboard中拖入一個ScrollView控制項。然後在ScrollView中拖入幾張照片，等下可以使用滾動功能查看照片，介面如下：

。

（2）把ScrollView和幾個ImageView拖拽與代碼進行Outlet綁定，綁定後代碼如下：

    @IBOutlet weak var homepageScrollView: UIScrollView!  //這個是捲軸；    @IBOutlet weak var image1: UIImageView!    @IBOutlet weak var image2: UIImageView!    @IBOutlet weak var image3: UIImageView!    

（3）然後在viewDidLoad()方法中實現 捲軸的代碼，注意如下contentSize的使用，必須設定ScrollView的內容大小，介面才會有滾動效果，並且這個大小是可以自己任意輸入的，你設定多大的長和寬，整個ScrollView就像畫布，這個畫布的大小就是多大，然後由於螢幕較小，只能顯示一部分，所以你就可以通過滑動查看其他未見的部分。

    override func viewDidLoad() {        super.viewDidLoad()        //在捲軸中增加View；        homepageScrollView.addSubview(image1)//不斷在ScrollView中添加子控制項；        homepageScrollView.addSubview(image2)        homepageScrollView.addSubview(image3)        homepageScrollView.contentSize=CGSize(width: image1.bounds.size.width, height: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height+500)        //注意要添加所有控制項的高度到ScrollView中；也可以自訂長和寬；            }

（4）運行程式，查看結果。

。

。

（5）可能會有人有疑問，我上面的圖片都是直接添加到storyboard中的，都是寫死的，我現在通過代碼動態增加一張圖片，並且添加到ScrollView中。以此來真正實現捲軸的功能；

動態顯示圖片代碼：

        //這裡的“image4”是通過代碼動態添加的，而不是在storyboard中寫死的，加在image3下面；        var imageView:UIImage = UIImage(named: "gallery4")!        //gallery4是這張圖片的名字，不需要副檔名；        var image4:UIImageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0,y: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height), size: image1.bounds.size))        //設定這張圖片的顯示位置和大小，原圖較大，我設定為和image1大小一樣；        image4.image = imageView

繼續在ScrollView中增加這個View：

 homepageScrollView.addSubview(image4)

最後別忘了在contentSize中增加相應的長度：

homepageScrollView.contentSize=CGSize(width: image1.bounds.size.width, height: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height+image4.bounds.size.height+500)//注意要添加所有控制項的高度到ScrollView中；也可以自訂長和寬；

所以最後整個類中的代碼如下：

class HomepageViewController: UIViewController,UIScrollViewDelegate{    //注意要實現這個Delegate委託；            @IBOutlet weak var homepageScrollView: UIScrollView!  //這個是捲軸；    @IBOutlet weak var image1: UIImageView!    @IBOutlet weak var image2: UIImageView!    @IBOutlet weak var image3: UIImageView!        override func viewDidLoad() {        super.viewDidLoad()        //這裡的“image4”是通過代碼動態添加的，而不是在storyboard中寫死的，加在image3下面；        var imageView:UIImage = UIImage(named: "gallery4")!        //gallery4是這張圖片的名字，不需要副檔名；        var image4:UIImageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0,y: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height), size: image1.bounds.size))        //設定這張圖片的顯示位置和大小，原圖較大，我設定為和image1大小一樣；        image4.image = imageView                //在捲軸中增加View；        homepageScrollView.addSubview(image1)//不斷在ScrollView中添加子控制項；        homepageScrollView.addSubview(image2)        homepageScrollView.addSubview(image3)            homepageScrollView.addSubview(image4)        homepageScrollView.contentSize=CGSize(width: image1.bounds.size.width, height: image1.bounds.size.height+image2.bounds.size.height+image3.bounds.size.height+image4.bounds.size.height+500)//注意要添加所有控制項的高度到ScrollView中；也可以自訂長和寬；            }    override func didReceiveMemoryWarning() {        super.didReceiveMemoryWarning()        // Dispose of any resources that can be recreated.        ///////////////////////////////////////////    }}

（6）最後運行結果如下：

。

。

     其實ScrollView捲軸還有很多其他的屬性設定和特性，有一部分也可以在storyboard中進行設定，是博大精深的，我們以後在開發中在慢慢學習。

著作權聲明：本文為博主原創文章，未經博主允許不得轉載。

iOS開發項目實戰——Swift實現ScrollView捲軸功能