[Swift] UITextViewに画像を添付する方法

はじめに

GameWith AdventCalendar 2019 の14日目の記事になります。

普段はiOSエンジニアをやっていて、最近はWebの業務を行なっているのでその辺りについても来週のアドベントカレンダーで話したいと思います。

今回の記事ではUITextViewにNSTextAttachmentクラスを用いて画像を添付する方法をまとめています。
入力中の文字のpositionなどを取得して、その上下にUIImageViewを配置するなどといった事をしなくても簡単に実装できるので具体例をまじえて紹介したいと思います。

具体例

SNSサービスなどでカメラロールから画像を選択し、テキストと一緒に投稿などを行う場合のUIイメージを想定しています。

カメラロールから画像を取得

シンプルにUIImagePickerControllerを使うケースです。

let picker = UIImagePickerController()
picker.delegate = self
picker.sourceType = .photoLibrary
present(picker, animated: true, completion: nil)

UIImagePickerControllerDelegateを設定する

extension SampleViewController: UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        if let image = info[.originalImage] as? UIImage {
            
            let fullString = NSMutableAttributedString(string: textView.text)
            
            let imageWidth = image.size.width
            // 画像の幅を調整したい場合paddingなどをframeから引く
            let padding: CGFloat = 16

            let scaleFactor = imageWidth / (textView.frame.size.width - padding)
            
            let imageAttachment = NSTextAttachment()
            imageAttachment.image = UIImage(cgImage: image.cgImage!, scale: scaleFactor, orientation: .up)
            
            let imageString = NSAttributedString(attachment: imageAttachment)
            fullString.append(imageString)
            
            // TextViewに画像を含んだテキストをセット
            textView.attributedText = fullString
        } 
        dismiss(animated: true, completion: nil)
    }
    
    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        dismiss(animated: true, completion: nil)
    }
    
}

終わりに

NSTextAttachment

今回利用している NSTextAttachment ですが、こちらを使う事でUILabelにも画像を適用する事ができるので非常に便利なクラスになっています。
今後文字と画像を結合するUIを実装する際には是非使ってみてください！