iOS開發使用Picker View實現一個圖片瀏覽的App

iOS開發使用Picker View實現一個圖片瀏覽的App

今天我們要簡單做一個通過Picker View控制項的選擇，然後在另一個介面顯示圖片的App。主要模組由兩部分，即Picker View控制項的使用，以及兩個介面間的資料傳遞。

（1）在第一個介面中拖入一個Picker View控制項（有點像Date Picker），用來滾動選擇圖片的名稱；在第二個介面中拖入一個ImageView.用來根據第一個介面傳入的資料顯示不同的圖片。介面布局如下：

。

 

（2）拖入幾張照片到images.xcassets中，用來顯示，本文使用5張照片。

（3）在ViewController.swift中為需要在Picker View中顯示的文字建立一個數組，具體如下：

。

 

（3）建立一個swift檔案，作為第一個介面ViewController.swift的擴充，用來實現2個Picker View的Protocol，（可以理解為實現介面）。兩個Protocol分別為：UIPickerViewDataSource；UIPickerViewDelegate。具體代碼如下：

。

 

（4）綁定Picker View控制項到代碼中，並且在viewDidLoad中綁定剛才實現的資料來源和代理；

。

 

（5）實現完以上步驟後，運行程式，發現Picker View已經可以正常使用，並能顯示數組中的文本；

。

 

（6）在進行介面跳轉的時候需要傳遞資料，要用到prepareForSegue方法。可以先指定Storyboard Segue的Identifier為：“GoToGallery”。為什麼一定要指定Identifier。因為同一個介面可能要跳到多個不同的介面，所以會有不同的Segue。方法實現如下：

 

    override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {            if segue.identifier == GoToGallery{                    let index = picPicker.selectedRowInComponent(0)                        var imageName:String?            switch index{                        case 0:                imageName = gugong                break                            case 1:                imageName = tiantan                break                            case 2:                imageName = shuilifang                break                            case 3:                imageName = niaochao                break                            case 4:                imageName = tiananmen                break                            default :                imageName = nil            }                        var vc = segue.destinationViewController as! GalleryViewController            vc.imageName = imageName                    }//if;    }//prepareForSegue();

（7）在第二個介面的中如何進行擷取呢？聲明一個全域的變數imageName,然後根據這個imageName來顯示圖片。實現代碼如下：

 

。

 

（8）經過上述步驟後，實現效果如下：

。

 

。

 

。

 

。

 

下面附上幾個重要類的所有代碼：

ViewController.swift:

 

import UIKitclass ViewController: UIViewController {            @IBOutlet weak var picPicker: UIPickerView!        let pic = [故宮,天壇,水立方,鳥巢,天安門]        override func viewDidLoad() {        super.viewDidLoad()        picPicker.dataSource = self        picPicker.delegate = self            }    override func didReceiveMemoryWarning() {        super.didReceiveMemoryWarning()        // Dispose of any resources that can be recreated.    }        override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {            if segue.identifier == GoToGallery{                    let index = picPicker.selectedRowInComponent(0)                        var imageName:String?            switch index{                        case 0:                imageName = gugong                break                            case 1:                imageName = tiantan                break                            case 2:                imageName = shuilifang                break                            case 3:                imageName = niaochao                break                            case 4:                imageName = tiananmen                break                            default :                imageName = nil            }                        var vc = segue.destinationViewController as! GalleryViewController            vc.imageName = imageName                    }//if;    }//prepareForSegue();    //Unwind Segue    @IBAction func close(segue:UIStoryboardSegue){            print(closed)    }        }//ViewController()

 

GalleryViewController.swift:

 

import UIKitclass GalleryViewController: UIViewController {        @IBOutlet weak var beautyImage: UIImageView!        var imageName:String?    override func viewDidLoad() {        super.viewDidLoad()        if imageName != nil{                    beautyImage.image = UIImage(named: imageName!)        }            }    override func didReceiveMemoryWarning() {        super.didReceiveMemoryWarning()        // Dispose of any resources that can be recreated.    }    }

ViewControllerExtension.swift:

 

 

import UIKit//建立ViewControllerExtension.swift，作為第一個介面ViewController的擴充；extension ViewController: UIPickerViewDataSource{    func numberOfComponentsInPickerView(pickerView: UIPickerView) -> Int{            return 1    }        func pickerView(pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int{            return pic.count    }}extension ViewController: UIPickerViewDelegate{     func pickerView(pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String!{            return pic[row]    }}