iOS開發項目實戰——Swift實現圖片輪播與瀏覽

標籤：.net   gpo   執行   name   weak   ++   else   寬度   net   

       近期開始開發一個新的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  。

歡迎大家訪問！

      

iOS開發項目實戰——Swift實現圖片輪播與瀏覽