iOS開發專案實戰——Swift實現ScrollView滾動條功能

乞力馬紮羅的雪CYF發表於2015-08-10
iOSSwiftView

       手機作為一個小屏裝置，需要顯示的資訊往往無法在一個螢幕上顯示，此時就需要使用到滾動條，當然除了像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中進行設定，是博大精深的，我們以後在開發中在慢慢學習。



github主頁：https://github.com/chenyufeng1991  。歡迎大家訪問！






相關文章