見出し画像

【徒然iOS】気ままにUIKit85〜Tool bar 画面下部にボタンを並べる〜

M_Kaku堂

概要

このマガジンは四十を過ぎたおっさんが、

を参考にStoryboardでiOSアプリを完全に趣味で楽しんでいるだけな記事を気ままに上げてます。

今回

をハイ、レッツゴ🕺

前準備

念の為、

  1. バックアップ

  2. 新しいクラス

  3. ビューコントローラの追加

をいつも通りやってから本題へ💃

こんな感じかな💦

本題

ツールバーとは、

アプリが提供する機能をボタンなどで並べるためのバー

実は、

で、ToolBar自体は使ってないけど、イメージが湧きやすように、画面の下にアイコンをSFSymbolsを並べたビューを作ってた💦
あくまでもイメージでそこはやってたけど、今回はイメージではなくボタンでやってく〜〜〜！

⒈早速、ツールバーとボタンを配置

てな感じで、実はすでにボタンが一つ配置されてる👀
選んで〜〜〜
配置
Imageでカメラアイコンに変更

と、ここで。
一応わかりやすいように、ビューにもイメージを貼っとこ〜〜〜〜

AutoLayoutまでやったとこ〜〜〜

⒉とりあえず、アクション接続

接続できた🕺

⒊元々あるボタンの設定を変更して、Segueで繋ぐ

てな感じに設定を変更して〜〜〜
こんな感じ
前準備で作ってたセグエが邪魔なので消しておこう
こんな感じかな💦

⒋コード組み込み

//
//  ViewController.swift
//
import UIKit
class ViewController: UIViewController {
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
        
    }
    //カメラボタン押下時の呼び出しメソッド
    @IBAction func pushCamera(sender: UIBarButtonItem) {
        //グラフィックコンテキストを作成する。
        UIGraphicsBeginImageContext(view.bounds.size)
        //ビューをコンテキストにレンダリングする。
        view.layer.renderInContext(UIGraphicsGetCurrentContext()!)
        //コンテキストから画像を取得する。
        let image = UIGraphicsGetImageFromCurrentImageContext()
        //コンテキストを破棄する。
        UIGraphicsEndImageContext()
        //画像をPhoto Albumに保存する。
        UIImageWriteToSavedPhotosAlbum(image, self, "image:error:contextInfo:", nil)
    }
    //保存終了時の呼び出しメソッド
    func image(image:UIImage, error:NSError!, contextInfo:UnsafeMutablePointer<Void>) {
        if(error != nil) {
            //エラー
            print(error)
        }
    }
}

を参考に書き換えてみたんだけど、、、

class NavigationToolBarViewController: UIViewController{
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    //カメラボタン押下時の呼び出しメソッド
    @IBAction func myPushCamera(_ sender: UIBarButtonItem) {
        //グラフィックコンテキストを作成する。
        UIGraphicsBeginImageContext(view.bounds.size)
        //ビューをコンテキストにレンダリングする。
        view.layer.render(in: UIGraphicsGetCurrentContext()!)
        //コンテキストから画像を取得する。
        let image = UIGraphicsGetImageFromCurrentImageContext()!
        //コンテキストを破棄する。
        UIGraphicsEndImageContext()
        //画像をPhoto Albumに保存する。
        UIImageWriteToSavedPhotosAlbum(image, self, #selector(self.image(_:error:contextInfo:)), nil)
    }
    //保存終了時の呼び出しメソッド
    @objc func image(_ image:UIImage, error:NSError!, contextInfo:UnsafeMutableRawPointer) {
        if(error != nil) {
            //エラー
            print(error as Any)
        }
    }
}

実行結果は、

カメラマークを押すと、、、
エラー発生

エラー内容を調べると、、、

てな感じなので👀

そら、いきなり前置きもなく、PhotoLibraryを開く設定のコード持ってきても、Xcode側で使う許可与えてないとエラーになるよね〜〜〜〜

info.plistでこいつら

を追加すると、エラーは出なくなったんだけど、
結局、そこから先が起動しない　藁🤣

要は、

ボタンを押したらアルバム起動して写真を追加したいだけだろ？

って感じなんで👀

なんかを参考に、イメージビューだけアウトレット接続して、

class NavigationToolBarViewController: UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {
    @IBOutlet weak var myImageView: UIImageView!
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    //カメラボタン押下時の呼び出しメソッド
    @IBAction func myPushCamera(_ sender: UIBarButtonItem) {
        let picker = UIImagePickerController()
        picker.sourceType = .photoLibrary
        picker.delegate = self
        present(picker, animated: true)
        self.present(picker, animated: true)
    }
    func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {
        if let selectedImage = info[.originalImage] as? UIImage {
            myImageView.image = selectedImage
        }
        self.dismiss(animated: true)
    }
    func imagePickerControllerDidCancel(_ picker: UIImagePickerController) {
        self.dismiss(animated: true)
    }
}

にコードを貼り替え〜〜〜

シミュレータで適当な、写真がアルバムにないから実機で

起動時
アルバムから写真追加後

てな感じで動く〜〜〜〜🕺

クラスもやろうかなと思ったんだけど、どうせ動かないので、コードだけ載せておく〜〜〜

//
//  TestNavigationController.swift
//
import UIKit
class TestNavigationController: UINavigationController, UINavigationControllerDelegate {
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
        //デリゲート先に自分を設定する。
        self.delegate = self
    }
    //画面出現前の呼び出しメソッド
    func navigationController(navigationController: UINavigationController, willShowViewController viewController: UIViewController, animated: Bool) {
        //カメラボタンをツールバーに設定する。
        let button = UIBarButtonItem(barButtonSystemItem: UIBarButtonSystemItem.Camera, target: self, action: "pushCamera")
        viewController.toolbarItems = [button]
    }
    //カメラボタン押下時の呼び出しメソッド
    func pushCamera() {
        //グラフィックコンテキストを作成する。
        UIGraphicsBeginImageContext(view.bounds.size)
        //ビューをコンテキストにレンダリングする。
        view.layer.renderInContext(UIGraphicsGetCurrentContext()!)
        //コンテキストから画像を取得する。
        let image = UIGraphicsGetImageFromCurrentImageContext()
        //コンテキストを破棄する。
        UIGraphicsEndImageContext()
        //画像をPhoto Albumに保存する。
        UIImageWriteToSavedPhotosAlbum(image, self, "image:error:contextInfo:", nil)
    }
    //保存終了時の呼び出しメソッド
    func image(image:UIImage, error:NSError!, contextInfo:UnsafeMutablePointer<Void>) {
        if(error != nil) {
            //エラー
            print(error)
        }
    }
}

を参考に

class AlbumNavigationController: UINavigationController, UINavigationControllerDelegate {
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
        //デリゲート先に自分を設定する。
        self.delegate = self
    }
    //画面出現前の呼び出しメソッド
    @objc func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) {
        //カメラボタンをツールバーに設定する。
        let button = UIBarButtonItem(barButtonSystemItem: UIBarButtonItem.SystemItem.camera, target: self, action: #selector(self.pushCamera))
        viewController.toolbarItems = [button]
    }
    //カメラボタン押下時の呼び出しメソッド
    @objc func pushCamera() {
        //グラフィックコンテキストを作成する。
        UIGraphicsBeginImageContext(view.bounds.size)
        //ビューをコンテキストにレンダリングする。
        view.layer.render(in: UIGraphicsGetCurrentContext()!)
        //コンテキストから画像を取得する。
        let image = UIGraphicsGetImageFromCurrentImageContext()
        //コンテキストを破棄する。
        UIGraphicsEndImageContext()
        //画像をPhoto Albumに保存する。
        UIImageWriteToSavedPhotosAlbum(image!, self, #selector(self.image(_:error:contextInfo:)), nil)
    }
    //保存終了時の呼び出しメソッド
    @objc func image(_ image:UIImage, error:NSError!, contextInfo:UnsafeMutableRawPointer) {
        if(error != nil) {
            //エラー
            print(error as Any)
        }
    }
}

に書き換えて、

てな感じにして、
実行するとエラーになるだけ〜〜〜

ま、クラスファイルで独立してるから、適用しなければいいだけなんで、コードとして残しておいても支障はないけどね👀

サイト記事の内容は以上🕺

ブラッシュアップ

さてと、よりはよっぽどこっちのが今回は大事で、
（特に、何か操作をするわけではないんだけど）
ナビゲーションコントローラーとかセグエで繋ぐ場合（普通のアプリはこちらがほとんど）
入り口のビューでもない限り、ツールバーで下にボタンなんか配置すると、、、

てな感じでポップオーバーで表示できればいいんだけど
実機でやってみたら、ボタンが切れて下にない
みたいなことはよくある話。

これって、

だから実機も確認しようね〜〜〜〜

って話がメインではなくて、そもそも

ひとつの画面にボタンを上にも下にも配置しすぎるのが問題
👉そんなに情報が多くてもどれを使っていいのかユーザーはわからなくなったりする（特に老人とか幼い子供たちとか）

なので、

結局、こうしておいた方が、ポップオーバー時に隠れなくていいでしょ？
ま、フルスクリーンにすればいいって思うかもしれないけど
場合によってはフルスクリーンにできない時だってあるし👀

さてと、後はいつも処理をやっていってと

地球儀ボタン追加

で、カメラマークで写真選択が出るのは、ユーザーに誤解を与えるので、次いでに

てな感じで、写真マークに変更っと🕺

＊カメラを起動して、撮った写真を表示する機能に変更したい人は、

なんかでできるから、参考にしてみてね🕺

記事公開後、

💃ハイ、完了🕺

Apple公式

さてと、次回は、

をレッツゴする🕺

ナビゲーション関係もこれでラストだね〜〜〜〜

いいなと思ったら応援しよう！