LoginSignup
18
10

More than 5 years have passed since last update.

PhotoLibraryから写真を取得し、表示させる方法(途中に編集画面を挟み、正方形に切り取る方法も解説)

Posted at

はじめに

自分の写真フォルダにアクセスして、その中の写真を扱いたいという時があると思います。(サムネイルの設定など)
しかし、ネット検索でそういった情報を探そうとすると、情報が古かったり、あまりまとまった内容ではないものが多かったりします。
なので、自分がまとめておきたいと思います。

完成図

selectPhoto.gif

開発環境

  • Xcode9
  • Swift4
  • iOS 10.0

PhotoLibraryから写真を取得し、表示させる方法

まず、info.plistにPhotoLibraryを使う旨を教えます。

スクリーンショット 2018-01-26 14.56.04.png

上記の青枠で示されているように設定します。
※設定をしないと、PhotoLibraryにアクセスすることができません。

次に、選択された写真を表示するためのimageViewと、PhotoLibraryにアクセスする時にトリガーとして扱うButtonを配置します。

スクリーンショット 2018-01-26 14.57.09.png

上記のように配置します。そしてViewController.swiftと繋ぎます。

次にソースコードを書きます。
下記にソースコードを示す。

ViewController.swift
import UIKit

class ViewController: UIViewController,UIImagePickerControllerDelegate,UINavigationControllerDelegate{

    //storyboardと接続
    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }


    //PhotoLibraryにアクセスする処理。
    @IBAction func pictureSetting(_ sender: UIButton) {
        let ipc = UIImagePickerController()
        ipc.delegate = self
        ipc.sourceType = UIImagePickerControllerSourceType.photoLibrary
        //編集を可能にする
        ipc.allowsEditing = true
        self.present(ipc,animated: true, completion: nil)
    }


    //写真を選択した時の処理を書く。
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : Any]) {

        //編集機能を表示させたい場合
        //UIImagePickerControllerEditedImageはallowsEditingをYESにした場合に用いる。
        //allowsEditingで指定した範囲を画像として取得する事ができる。
        //UIImagePickerControllerOriginalImageはallowsEditingをYESにしていたとしても編集機能は表示されない。
        if info[UIImagePickerControllerOriginalImage] != nil {
            let image = info[UIImagePickerControllerEditedImage] as! UIImage
            //画像を設定する
            imageView.image = image
        }

        //編集機能を表示させない場合
        //let image = info[UIImagePickerControllerOriginalImage] as? UIImage
        //imageView.image = image

        dismiss(animated: true,completion: nil)
    }
}

上記のソースコードは、写真を選択し終えた後に、正方形に切り取ることができる編集機能付きのソースコードになっています。
コメントを所々挟んでいるので、それを読んで理解してもらえればと思います。

ここまで実装をすることができれば完成です!
以下、余談。

余談

写真の設定画面は、初期設定だと下記のように英語表記になっていると思います。

selectPhoto1.PNG

それを日本語表記にするには、下記のようにinfo.plistのLocalization native development regionをJapanに設定します。

スクリーンショット 2018-01-26 14.56.29.png

これを設定することにより、下記のように日本語表記になります。

selectPhoto.PNG

※注意:実機だと日本語表記になるが、シミュレーターだとなぜか英語表記のままだった。

18
10
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
18
10