明日はクリスマスイブで、明後日がクリスマスです。
この2日間でみなさん素敵な写真をたくさん撮ると思うので、撮った写真を加工できるアプリを作ろうと思います。
##仕様
1.UIImagePickerControllerを使って、加工する写真を選択します。
2.画像加工にはAdobe Creative SDK for iOSというSDKを使います。
3.加工した画像を保存します。
##実装
さっそく実装していきましょう。
###Xcodeで新規プロジェクトを作成する
まずはプロジェクトを作りましょう。
プロジェクト名は「XmasPhotoEditor」にします。
###プロジェクトにAdobe Creative SDK を導入する
@koitaroさんのこちらの記事 が本当にやばいので参考にしてSDKをプロジェクトに導入してください。
Adobe Creative SDK for ios が本当にやばい
###必要なファイルを準備する
EditPhotoViewController.swift(subclass: UIViewController)
選択した写真を編集するためのViewControllerです。
###Interfacebuilderで作業する
1.ViewControllerとNavigation Controllerを紐付ける。
ViewControllerを選択して、ツールバーのEditorのEmbed inからNavigation Controllerを選択してください。
2.新しいViewControllerを1つ配置してください。
先ほど作成したEditPhotoViewControllerと紐付けましょう。
3.segueを設定する
画面遷移をするので、segueを設定しておきましょう。
IdentifierはshowEditPhotoVCにしておきます。
4.2つのViewControllerに部品を配置する
(1)ViewController
配置する部品
- ImageView(ViewController全体に配置)
- Button(ImageViewの上に配置)
- Label(ImageViewの上に配置)
クリスマスっぽい画像をImageViewとButtonのImageにそれぞれ設定します。
LabelのTextはPushにしました。
(2)EditViewController
- ImageView(大きさはお任せします)
ImageVIewのModeをAspect Fillにしておきます。
以下の画像のように部品を配置してみました。
Viewの色を変えたり、NavigationBarの色を変えたりしても良いですねぇ
5.2つのViewControllerに配置した部品を関連付けする
(1)ViewController
- Button(Connect: Action, Name: tapChoosePhotoButton)
(2)EditPhotoViewController
- ImageView(Connect: Outlet, Name: editImageView)
以上でInterfaceBuilderでの作業は終了です。
この時点で以下のようなソースコードになっていれば大丈夫です。
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
@IBAction func tapPhotoButton(sender: UIButton) {
}
}
import UIKit
class EditPhotoViewController: UIViewController {
@IBOutlet weak var editImageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
##ViewController.swiftで作業する
###1.NavigationBarを非表示にする
override func viewWillAppear(animated: Bool) {
super.viewWillAppear(animated)
self.navigationController?.navigationBar.hidden = true
}
###2.UINavigationControllerDelegateとUIImagePickerControllerDelegateを採用する
class ViewController: UIViewController, UINavigationControllerDelegate, UIImagePickerControllerDelegate
###2.Buttonにアクションを関連付けてボタンが押された時にUIImagePickerControllerが表示されるようにする
@IBAction func tapPhotoButton(sender: UIButton) {
if UIImagePickerController.isSourceTypeAvailable(UIImagePickerControllerSourceType.PhotoLibrary) {
let imagePickerViewController = UIImagePickerController()
imagePickerViewController.delegate = self
imagePickerViewController.sourceType = UIImagePickerControllerSourceType.PhotoLibrary
presentViewController(imagePickerViewController, animated: true, completion: nil)
}
}
###3.写真が選択された時に呼ばれる処理を記述する
func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [String : AnyObject]) {
if info[UIImagePickerControllerOriginalImage] != nil {
selectedImage = info[UIImagePickerControllerOriginalImage] as? UIImage
}
self.dismissViewControllerAnimated(true, completion: nil)
performSegueWithIdentifier("showEditPhotoVC", sender: nil)
}
###4.選択した写真を遷移先のEditPhotoViewControllerに渡す
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
if segue.identifier == "showEditPhotoVC" {
let editPhotoViewController = segue.destinationViewController as! EditPhotoViewController
editPhotoViewController.editImage = self.selectedImage
}
}
この時点ではエラーが出ていますが、この後EditPhotoViewControllerを編集する中で解決されるので安心してください。(履いてますよ....ﾎﾞｿ)
ここまででViewControler.swiftでの作業は終わりです。
##EditPhotoViewControler.swiftで作業する。
###1.選択した画像の値を入れるためのプロパティを定義する。
var editImage: UIImage?
このプロパティを定義したところで、先程までのエラーが消えたと思います。
###2.選択した写真を表示させる
override func viewDidLoad() {
super.viewDidLoad()
self.editImageView.image = editImage
}
###3.NavigationBarの設定をする
override func viewDidLoad() {
super.viewDidLoad()
self.editImageView.image = editImage
let editButton = UIBarButtonItem(title: "EDIT", style: .Done, target: self, action: "editPhoto")
self.navigationItem.rightBarButtonItem = editButton
self.navigationController?.navigationBar.hidden = false
}
###4.AdobeUXImageEditorViewControllerDelegateを採用する
class EditPhotoViewController: UIViewController, AdobeUXImageEditorViewControllerDelegate {
###5.NavigationbarのButtonがタップされた時のアクションと処理を記述する
func editPhoto() {
let adobeViewController = AdobeUXImageEditorViewController(image: editImage!)
adobeViewController.delegate = self
self.presentViewController(adobeViewController, animated: true, completion: nil)
}
###6.写真の編集に使う項目を定義する
override func viewDidLoad() {
super.viewDidLoad()
self.editImageView.image = editImage
let editButton = UIBarButtonItem(title: "EDIT", style: .Done, target: self, action: "editPhoto")
self.navigationItem.rightBarButtonItem = editButton
self.navigationController?.navigationBar.hidden = false
//編集に使える項目
AdobeImageEditorCustomization.setToolOrder([
kAdobeImageEditorEnhance, /* Enhance */
kAdobeImageEditorEffects, /* Effects */
kAdobeImageEditorOrientation, /* Orientation */
kAdobeImageEditorCrop, /* Crop */
kAdobeImageEditorColorAdjust, /* Color */
kAdobeImageEditorLightingAdjust, /* Lighting */
kAdobeImageEditorSharpness, /* Sharpness */
kAdobeImageEditorDraw, /* Draw */
kAdobeImageEditorText, /* Text */
kAdobeImageEditorRedeye, /* Redeye */
kAdobeImageEditorWhiten, /* Whiten */
kAdobeImageEditorBlur, /* Blur */
kAdobeImageEditorSplash, /* ColorSplash */
kAdobeImageEditorVignette /* Vignette */
])
}
###7.写真の編集が完了した時に行う処理を記述する
func photoEditor(editor: AdobeUXImageEditorViewController, finishedWithImage image: UIImage?) {
self.editImage = image
editor.dismissViewControllerAnimated(true, completion: nil)
UIImageWriteToSavedPhotosAlbum(self.editImage!, self, "image:didFinishSavingWithError:contextInfo:", nil)
}
###8.写真が保存が終わったタイミングで行う処理を記述する
写真の保存ができた場合は、ViewControllerに戻るようにします。
func image(image: UIImage, didFinishSavingWithError error: NSError!, contextInfo: UnsafeMutablePointer<Void>) {
if error != nil {
print(error)
} else {
navigationController?.popToRootViewControllerAnimated(true)
}
}
###9.写真の編集がキャンセルされた時に行う処理を記述する
func photoEditorCanceled(editor: AdobeUXImageEditorViewController) {
editor.dismissViewControllerAnimated(true, completion: nil)
}
はい、完成です
Adobe Creative SDKを使うと簡単に画像加工アプリを作ることが出来ますね。
アラートを出す処理は記事の中では実装していないので、注意してください。