AppSeedのアプリ開発ブログ

アプリ開発会社AppSeed(アップシード)開発担当のブログです。iOS、Android、Unity、Cocos2d-xなどアプリ開発関連のTipsや備忘録、アプリ開発に役立つ情報を発信します。

【iOSアプリ開発】キーボードの上にビューやボタンを表示させる方法(UITextView)

f:id:no-work-no-life-4081:20181012105827p:plain



日記アプリの投稿画面にカメラアイコンから写真を選択できる機能を実装しました。
今回はテキスト入力時にキーボードの上に写真を選択できるアイコンをつける方法についてのメモです。


キーボードの上にビューやボタンを表示させる

UITexViewでキーボードの上にビューやアイコンを設置するには、UITextViewの「inputAccessoryView」に表示させたいビューをセットすればできます。

Apple Developer Documentation




以下の例では、「inputAccessoryView」にカメラボタンを設置して、選択できるようにしてます。

     override func viewDidLoad() {
        
        super.viewDidLoad()

        let Custombar = UIView(frame: CGRect.init(x: 0, y: 0, width: (UIScreen.main.bounds.size.width), height: 50))
        Custombar.backgroundColor = UIColor.darkGray
        let CommitBtn = UIButton(frame:CGRect.init(x: ((UIScreen.main.bounds.size.width)/2)-25, y: 0, width: 50, height: 50))
        CommitBtn.setImage(UIImage.init(named: "cameraicon.png"), for: .normal)
        CommitBtn.addTarget(self, action:#selector(PostViewController.onClickPicture(sender:)), for: .touchUpInside)
        Custombar.addSubview(CommitBtn)
        InputTextView.inputAccessoryView = Custombar
        InputTextView.delegate = self
        
    }

    @objc func onClickPicture (sender: UIButton) {
        //UIImagePickerControllerで写真を選択する処理
    }


完成形はこんな感じ↓

f:id:no-work-no-life-4081:20181012105622p:plain


UITextViewにフォーカスを当ててキーボードを表示すると、一緒にカメラアイコンのビューも表示されます。
キーボードを閉じるタイミングでカメラアイコンも非表示になります。