クイズアプリ開発入門書を書きました。

【Swift5/Xcode】アルバムから画像を取得する方法

サトリク

今回は、アルバムから画像を取得して、その画像をImageViewに貼り付ける方法を紹介していきたいと思います。

やりたいこと

  1. 「画像を追加する」ボタンを押すと、アルバムを表示する
  2. アルバムで画像を選択すると、ImageViewに表示される

 

確認済動作環境

Item Version
Swift 5.3.1
Xcode 12.2

バージョンの確認方法

 

画像のアルバムを取得(簡単に解説)

①:デリゲートを追加する

まずはアルバムを呼び出す機能を使うために、デリゲートします。

class ViewController:の行を以下のように変更してください。

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

②:アルバムを呼び出す関数を追加する

以下のコードを追記してください。

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
    if let selectedImage = info[.originalImage] as? UIImage {
        // imageView.image = selectedImage
    }
    self.dismiss(animated: true)
}

func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
    self.dismiss(animated: true)
}

imageView.image = selectedImageで選択した画像をImageViewに代入できます。

③:②で作った関数を呼び出す。

ボタンのIBActionを作り、その中で以下のように呼び出しましょう。

@IBAction func addImageButtonAction(_ sender: Any) {
    let picker = UIImagePickerController()
    picker.sourceType = .photoLibrary
    picker.delegate = self
    present(picker, animated: true)
    self.present(picker, animated: true)
}

これだけで、アルバムの取得ができます!

 

実際に手を動かしてやってみる

準備

STEP.1
プロジェクト作成

「Create a new Xcode project」  「App」  「InterfaceはStoryboard」で作成

STEP.2
オブジェクトを配置
  1. Main.storyboardにButtonImageViewを配置
  2. Buttonの名前を画像を追加するに変更
  3. Autolayoutを適当につける
STEP.3
オブジェクトを紐付け
  1. ImageViewimageViewという名前で「Outlet」で紐付け
  2. ButtonaddImageButtonActionという名前で「Action」で紐付け
STEP.4
現在の状態

Storyboardはこのような状態です。

ViewController.swift

//
//  ViewController.swift
//  GetAlbum
//
//  Created by RikutoSato on 2020/12/13.
//

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var imageView: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func addImageButtonAction(_ sender: Any) {
    }
    
}

完了

ここまでが準備です。

アルバムを表示して画像を代入する方法

STEP.1
デリゲートを追加

class ViewController:の行を以下のように変更してください。

class ViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

STEP.2
関数を追加

以下のコードを追記してください。

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
    if let selectedImage = info[.originalImage] as? UIImage {
        // imageView.image = selectedImage
    }
    self.dismiss(animated: true)
}

func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
    self.dismiss(animated: true)
}

STEP.3
ボタンを押した時に呼び出す

@IBActionの中を以下のように追記してください。

@IBAction func addImageButtonAction(_ sender: Any) {
    let picker = UIImagePickerController()
    picker.sourceType = .photoLibrary
    picker.delegate = self
    present(picker, animated: true)
    self.present(picker, animated: true)
}

STEP.4
画像をImageViewに代入する

//imageView.image = selectedImageがコメントアウトされてますので、この//を消してください。

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
    if let selectedImage = info[.originalImage] as? UIImage {
         imageView.image = selectedImage
    }
    self.dismiss(animated: true)
}

ここでimageViewに代入しています。

STEP.5
実行して確認

このようになればOKです!

完了

 

まとめ

ここまで、アルバムを取得して画像をImageViewに代入する方法を解説してきました。

他にもSwift、Xcodeの記事を書いていますので、他の記事もみてみてください。