圖片 UIImageView

顯示圖片主要是使用 UIImageView 及 UIImage 來完成，本節會介紹兩個範例，第一個範例會示範三種建立 UIImageView 的方式以及顯示模式，第二個範例則會示範一個自動輪播圖片的功能。

建立 UIImageView

這個範例的目標如下圖：

uiimageview01

首先在 Xcode 裡，新建一個 Single View Application 類型的專案，取名為 ExUIImageView 。

一開始先以加入檔案的方式加入四張圖片，並在viewDidLoad()中取得螢幕尺寸，以供後續使用，如下：

// 取得螢幕的尺寸
let fullScreenSize = UIScreen.mainScreen().bounds.size

▼ 第一個建立 UIImageView 的方式為使用UIImageView(frame:)：

// 使用 UIImageView(frame:) 建立一個 UIImageView
var myImageView = UIImageView(
  frame: CGRect(
    x: 0, y: 0, width: 100, height: 100))

// 使用 UIImage(named:) 放置圖片檔案
myImageView.image = UIImage(named: "01.jpg")

// 設置新的位置並放入畫面中
myImageView.center = CGPoint(
  x: fullScreenSize.width * 0.5,
  y: fullScreenSize.height * 0.15)
self.view.addSubview(myImageView)

上述程式可以看到，UIImageView不是直接放置圖片檔案名稱，而是要藉由UIImage(named:)建立，再設置給UIImageView的屬性image，未來其他元件需要使用圖片時，也都是使用UIImage(named:)設置圖片檔案。

▼ 第二個建立 UIImageView 的方式為使用UIImageView(image:)，在初始化時直接給一個UIImage，後續再設定尺寸：

// 使用 UIImageView(image:) 建立一個 UIImageView
myImageView = UIImageView(
  image: UIImage(named: "02.jpg"))

// 設置原點及尺寸
myImageView.frame = CGRect(
  x: 0, y: 0, width: 100, height: 100)

// 設置新的位置並放入畫面中
myImageView.center = CGPoint(
  x: fullScreenSize.width * 0.5,
  y: fullScreenSize.height * 0.35)
self.view.addSubview(myImageView)

▼ 第三個建立 UIImageView 的方式為使用UIImageView(image:, highlightedImage:)，在初始化時除了直接設置一個UIImage外，還設置了一個 highlighted 狀態時的UIImage：

// 使用 UIImageView(image:, highlightedImage:)
// 建立一個 UIImageView
myImageView = UIImageView(
  image: UIImage(named: "02.jpg"),
  highlightedImage: UIImage(named: "03.jpg"))

// 設置原點及尺寸
myImageView.frame = CGRect(
  x: 0, y: 0, width: 100, height: 100)

// 設置圖片 highlighted 狀態
myImageView.highlighted = true

// 設置新的位置並放入畫面中
myImageView.center = CGPoint(
  x: fullScreenSize.width * 0.5,
  y: fullScreenSize.height * 0.55)
self.view.addSubview(myImageView)

上面三個 UIImageView 的圖片剛好都為正方形，所以可以剛好適合視圖的尺寸，而如果當圖片尺寸與 UIImageView 的尺寸不一樣時，就需要使用 UIImageView 的一個屬性contentMode來設置顯示模式：

// 建立一個 UIImageView
myImageView = UIImageView(
  image: UIImage(named: "04.jpg"))
myImageView.frame = CGRect(
  x: 0, y: 0, width: 200, height: 200)

// 設置背景顏色
myImageView.backgroundColor = UIColor.yellowColor()

// 設置圖片顯示模式
myImageView.contentMode = .BottomLeft

// 設置新的位置並放入畫面中
myImageView.center = CGPoint(
  x: fullScreenSize.width * 0.5,
  y: fullScreenSize.height * 0.8)
self.view.addSubview(myImageView)

上述程式可以看到 UIImageView 的尺寸為200x200，而圖片的尺寸為240x159，所以沒有辦法剛好放進去，這時就使用contentMode這個屬性來設定顯示模式，這邊示範設置為.BottomLeft，也就是以左下角為準。將 UIImageView 底色設為黃色，所以你可以看到最後會超出原本 UIImageView 設置的尺寸，並在上面露出了一些底色。

Hint
  • 預設contentMode屬性的值為ScaleToFill，會自動縮放圖片以填滿 UIImageView 的尺寸。
  • contentMode屬性其他可以設定的模式，還有以長或寬為準的縮放、重新裁切或是以八個方向或是中心為準等等，你可以自己測試看看。

自動輪播圖片

這個範例的目標如下圖，圖片會自動輪播，且有兩個按鈕可以播放及停止輪播：

uiimageview02

首先在 Xcode 裡，新建一個 Single View Application 類型的專案，取名為 ExAutoPlayImage 。

一開始先以加入檔案的方式加入三張輪播的圖片及兩張按鈕的圖片。

首先為ViewController建立一個myImageView屬性：

class ViewController: UIViewController {
    var myImageView: UIImageView!

    // 省略
}

以及在viewDidLoad()中取得螢幕尺寸，以供後續使用，如下：

// 取得螢幕的尺寸
let fullScreenSize = UIScreen.mainScreen().bounds.size

設置輪播圖片的資訊

myImageView = UIImageView(
  frame: CGRect(x: 0, y: 0, width: 200, height: 200))

// 建立一個陣列 用來放置要輪播的圖片
let imgArr = [
  UIImage(named:"01.jpg")!,
  UIImage(named:"02.jpg")!,
  UIImage(named:"03.jpg")!]

// 設置要輪播的圖片陣列
myImageView.animationImages = imgArr

// 輪播一次的總秒數
myImageView.animationDuration = 6

// 要輪播幾次 (設置 0 則為無限次)
myImageView.animationRepeatCount = 0

// 開始輪播
myImageView.startAnimating()

// 設置位置及放入畫面中
myImageView.center = CGPoint(
  x: fullScreenSize.width * 0.5,
  y: fullScreenSize.height * 0.4)
self.view.addSubview(myImageView)

建立圖片輪播一樣是使用 UIImageView ，以下是需要的屬性說明：

  • animationImages：為一個型別為[UIImage]的陣列，其內使用UIImage(named:)生成的圖片因為是可選的( optional )，所以必須將其解析( unwrap ，即加上驚嘆號!)，當然你必須確定這些圖片檔案都存在，不然可能會導致程式錯誤並中止。
  • animationDuration：輪播一次的總秒數，如果一張圖片要顯示 2 秒，則乘上圖片張數 3 張，所以這裡設置為 6 秒。
  • animationRepeatCount：要輪播的次數，如果設置 0 則是無限次。

另外還有兩個關於輪播的方法：

  • startAnimating()：開始圖片輪播。
  • stopAnimating()：停止圖片輪播。

設置使用圖片的按鈕

// 建立一個播放按鈕
let playButton = UIButton(
  frame: CGRect(x: 0, y: 0, width: 64, height: 64))

// 設置播放按鈕的圖片
playButton.setImage(
  UIImage(named: "play"), forState: .Normal)

// 設置按下播放按鈕的動作的方法
playButton.addTarget(
  self,
  action: #selector(ViewController.play),
  forControlEvents: .TouchUpInside)

// 設置位置及放入畫面中
playButton.center = CGPoint(
  x: fullScreenSize.width * 0.35,
  y: fullScreenSize.height * 0.65)
self.view.addSubview(playButton)

// 建立一個停止按鈕
let stopButton = UIButton(
  frame: CGRect(x: 0, y: 0, width: 64, height: 64))

// 設置停止按鈕的圖片
stopButton.setImage(
  UIImage(named: "stop"), forState: .Normal)

// 設置按下停止按鈕的動作的方法
stopButton.addTarget(
  self,
  action: #selector(ViewController.stop), 
  forControlEvents: .TouchUpInside)

// 設置位置及放入畫面中
stopButton.center = CGPoint(
  x: fullScreenSize.width * 0.65,
  y: fullScreenSize.height * 0.65)
self.view.addSubview(stopButton)

按鈕除了可以使用文字之外，也可以設置成圖片，利用 UIButton 的方法setImage()，設置一個 UIImage 給它即可。 UIButton 的詳細說明請參考前節說明。

接著ViewController新增兩個按下按鈕後執行動作的方法：

func play() {
    print("play images auto play")
    myImageView.startAnimating()
}

func stop() {
    print("stop images auto play")
    myImageView.stopAnimating()
}
Hint
  • 圖片如果為 png 檔案類型，使用UImage(named:)生成元件時，可以不用寫副檔名 png ，如上面程式中的UImage(named:"play")，程式會自己找到play.png的圖片檔案。
  • 另外你可能會發現範例檔案內，播放按鈕的圖片除了play.png外，還有[email protected]跟[email protected]檔案，這是為了因應不同解析度的 iPhone ，可以設置不同解析度的圖片，像是 iPhone 5、iPhone 6 及 iPhone 6s 使用 @2x 的圖片，而 iPhone 6 Plus 及 iPhone 6s Plus 則是使用 @3x 的圖片。只要將檔案名稱設定好，程式就會自己找到檔案，當然如果沒有 @2x 及 @3x 的圖片檔案，就會一律使用同樣尺寸的圖片檔案。

圖片來源

範例

本節範例程式碼放在 uikit/uiimageview

results matching ""

    No results matching ""