iOS開發專案實戰——Swift實現圖片輪播與瀏覽

       最近開始開發一個新的iOS應用，自己決定使用Swift，進行了幾天之後，發現了一個很嚴峻的問題，那就是不管是書籍，還是網路資源，關於Swift的實在是太少了，隨便一搜全都是OC實現某某某功能。就算是找到Swift的資源，一看，大概是半年前的程式碼，或是一年前的程式碼，一執行，全都報錯。這是由於畢竟Swift還是在不斷髮展完善當中，隨著Swift2.0的開源以來，包括髮布Swift這一年多以來，Swift的改動還是很大的，很多的介面或是語法前後有較大差異。有些功能只能自己硬生生看官方文件或擠破腦子想，甚是痛苦。

       基於以上現實原因，也以便以後大家的Swift開發，我把自己在Swift上實現的一些實戰型功能分享給大家，希望減少大家上網檢索的時間。我的開發環境是OS X 10.10.3，Xcode版本是Version 6.4 (6E35b)，建立的專案SDK預設是 iOS SDK 8.4.

       這次我們要使用Swift實現圖片的迴圈播放並可以使用手指進行左右滑動瀏覽圖片。具體實現如下：

（1）建立一個基於Swift的iOS專案，開啟Main.storyboard,在介面中拖入一個ScrollView滾動檢視，用來顯示圖片，在ScrollView下面再放置一個Page Control頁面控制，可以來提示當前是哪一張圖片，介面設計如圖：

。

（2）實現控制元件與程式碼的繫結，按住右鍵拖動控制元件到程式碼中，選擇Outlet，類似生成程式碼如下：

  @IBOutlet weak var galleryScrollView: UIScrollView!   // 實現圖片輪播的滾動；
    @IBOutlet weak var galleryPageControl: UIPageControl!  //提示當前滾動的圖片，指示器；

（3）拖動幾張圖片到Images.xcassets中，本例子拖動5張圖片，名字分別為gallery1.....gallery5.

（4）在類內定義一個NSTimer型別的定時器：

var timer:NSTimer!

（5）實現圖片滾動的方法pictureGallery()，程式碼如下：

func pictureGallery(){   //實現圖片滾動播放；
        //image width
        let imageW:CGFloat = self.galleryScrollView.frame.size.width;//獲取ScrollView的寬作為圖片的寬；
        let imageH:CGFloat = self.galleryScrollView.frame.size.height;//獲取ScrollView的高作為圖片的高；
        var imageY:CGFloat = 0;//圖片的Y座標就在ScrollView的頂端；
        var totalCount:NSInteger = 5;//輪播的圖片數量；
        for index in 0..<totalCount{
            var imageView:UIImageView = UIImageView();
            let imageX:CGFloat = CGFloat(index) * imageW;
            imageView.frame = CGRectMake(imageX, imageY, imageW, imageH);//設定圖片的大小，注意Image和ScrollView的關係，其實幾張圖片是按順序從左向右依次放置在ScrollView中的，但是ScrollView在介面中顯示的只是一張圖片的大小，效果類似與畫廊；
            let name:String = String(format: "gallery%d", index+1);
            imageView.image = UIImage(named: name);
            self.galleryScrollView.showsHorizontalScrollIndicator = false;//不設定水平滾動條；
            self.galleryScrollView.addSubview(imageView);//把圖片加入到ScrollView中去，實現輪播的效果；
        }
        
        //需要非常注意的是：ScrollView控制元件一定要設定contentSize;包括長和寬；
        let contentW:CGFloat = imageW * CGFloat(totalCount);//這裡的寬度就是所有的圖片寬度之和；
        self.galleryScrollView.contentSize = CGSizeMake(contentW, 0);
        self.galleryScrollView.pagingEnabled = true;
        self.galleryScrollView.delegate = self;
        self.galleryPageControl.numberOfPages = totalCount;//下面的頁碼提示器；
        self.addTimer()
        
    }

（6）實現圖片迴圈播放的方法nextImage():

    func nextImage(sender:AnyObject!){//圖片輪播；
        var page:Int = self.galleryPageControl.currentPage;
        if(page == 4){   //迴圈；
            page = 0;
        }else{
            page++;
        }
        let x:CGFloat = CGFloat(page) * self.galleryScrollView.frame.size.width;
        self.galleryScrollView.contentOffset = CGPointMake(x, 0);//注意：contentOffset就是設定ScrollView的偏移；
    }
    

（7）要在當前類中實現一個委託UIScrollViewDelegate，並實現一個方法scrollViewDidScroll()，程式碼如下：

 //UIScrollViewDelegate中重寫的方法；
    //處理所有ScrollView的滾動之後的事件，注意 不是執行滾動的事件；
    func scrollViewDidScroll(scrollView: UIScrollView) {
            //這裡的程式碼是在ScrollView滾動後執行的操作，並不是執行ScrollView的程式碼；
            //這裡只是為了設定下面的頁碼提示器；該操作是在圖片滾動之後操作的；
            let scrollviewW:CGFloat = galleryScrollView.frame.size.width;
            let x:CGFloat = galleryScrollView.contentOffset.x;
            let page:Int = (Int)((x + scrollviewW / 2) / scrollviewW);
            self.galleryPageControl.currentPage = page;
        
    }

（8）設定一個定時器：

    func addTimer(){   //圖片輪播的定時器；
        self.timer = NSTimer.scheduledTimerWithTimeInterval(5, target: self, selector: "nextImage:", userInfo: nil, repeats: true);
    }
    

（9）最後的實現效果如下：

。

。

     希望Swift會變得越來越好，我們放心的去學習Swift吧，未來一定會大放異彩的。

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