Segueの移動先から前の画面に遷移するには

はじめに

Segueで遷移した先の画面から元の画面に戻る処理を作成しようとしていたのですが、うまく行かず嵌ってしまいました。

そこで、今回はSegueを使用した画面遷移と移動元に戻る方法について説明します。

“Segueの移動先から前の画面に遷移するには” の続きを読む

[ライブラリ] Eurekaでヘッダーにイメージを表示するには?

はじめに

本ブログに「Eurekaのリストの開始位置の変更方法を知りたい」とのコメントをいただきましたので調査しました。

Eurekaのリストの開始位置(行の表示位置)を変更するには、ヘッダーのサイズで調整することができますので、その方法を説明します。

環境

Xcode:9.4.1
Swift:4.1.2

目次

“[ライブラリ] Eurekaでヘッダーにイメージを表示するには?” の続きを読む

[ライブラリ] EurekaでImageRowを使用するには?

はじめに

Eurekaは、標準では ImageRow という行はありません。

そこで、EurekaCommunity にあるImageRowをインストールして画像の選択をできるようにする方法を紹介します。

環境

Xcode:9.4.1
Swift:4.1.2

目次

“[ライブラリ] EurekaでImageRowを使用するには?” の続きを読む

[Realm][Swift4対応 完全保存版] 2.モデルの定義

はじめに

第2回目となる今回は、Realmにおけるモデルの定義について説明します。

過去記事は以下を参照ください。

環境

Xcode:9.4.1
Swift:4.1.2
Realm:3.7.4

目次

“[Realm][Swift4対応 完全保存版] 2.モデルの定義” の続きを読む

[Realm][Swift4対応 完全保存版] 1.CocoaPodsによるRealmのインストールとプロジェクトの作成方法

はじめに

本サイトのアクセスログを見ると、Swiftで使用できるデータベースフレームワーク「Realm」の記事への参照が多いようです。

そこで、もっと詳細な説明を加えた、Swif4向けの完全保存版を作成することとしました。

第1回目となる今回は、プロジェクトを作成し、Realmをプロジェクトに組み込むまでを説明します。

なお、過去記事にてCarthageによるRealmの導入方法について説明しましたが、今回はCocoaPodsによるRealmのインストール方法について説明します。

※筆者としては、CocoaPodsによるRealmの組み込みの方が簡単だと感じました。

なお、CocoaPodsのインストール方法については、「CocoaPodsの導入」の記事を参照してください。

環境

Xcode:9.4.1
Swift:4.1.2
Realm:3.7.4

目次

  1. プロジェクトを作成する
  2. podファイルを作成する
  3. podファイルを編集する
  4. Realmをインストールする

“[Realm][Swift4対応 完全保存版] 1.CocoaPodsによるRealmのインストールとプロジェクトの作成方法” の続きを読む

[Tips]Swift4での文字列操作

はじめに

どのようなプログラミング言語であっても、文字列操作は頻繁に使用しますし、必要不可欠な技術です。

今回はSwift4における文字列操作について説明します。

環境

macOS High Sierra 10.13.3
Xcode 9.2(9C40b)
Swift 4.0.3

目次

“[Tips]Swift4での文字列操作” の続きを読む

[Tips]UIAlertControllerでアラートやアクションシートを表示するには?

はじめに

iOSではUIActionControllerを使用して、ポップアップでアラートを表示したり、選択肢(アクションシート)を表示したりして、ユーザーに項目を選択させることができます。

iPhoneにおいては、アラートの表示も選択肢の表示も問題なく動作します。しかし、iPadにおいてはiPhoneと同様の実装を行うと、アラートは動作しますが、選択肢(アクションシート)の表示は落ちてしまいます。

本TipsではiPhoneとiPadでアラートとアクションシートを表示する方法について説明します。

今回作成するサンプルは以下のようなものです。

環境

Xcode:9.4.1
Swift:4.1.2

AlertControllerの使用方法

はじめに、AlertControllerの使用してアラートを表示する方法について説明します。これが基本となります。

Xcodeを起動してSingle View Appプロジェクトを作成します。

次にMain.storyboardを開いてUIButtonを1つ貼り付けます。

続いて、貼り付けたButtonのアクション接続を作成します。

名称は、buttonAlertとしました。

コードはiPhoneもiPadも同一のもので動作します。コード例を以下に示します。

①の部分でUIAlertControllerのインスタンスを作成し、②と③でOKボタンとキャンセルボタンを作成しています。

④で、①で作成したインスタンスにOKボタンとキャンセルボタンを追加し、⑤でアラートの表示をしています。詳細はコード中のコメントを参照してください。

@IBAction func buttonAlert(_ sender: Any) {
    // ①UIAlertControllerクラスのインスタンスを生成する
    // titleにタイトル, messegeにメッセージ, prefereedStyleにスタイルを指定する
    // preferredStyleにUIAlertControllerStyle.alertを指定してアラート表示にする
    let alert: UIAlertController = UIAlertController(
        title: "アラート表示",
        message: "メールを送信します。よろしいですか?",
        preferredStyle: UIAlertControllerStyle.alert)
    
    // ②OKボタンの作成
    // titleにボタンのテキストを、styleにUIAlertActionStyle.defaultを
    // handlerにボタンが押された時の処理をクロージャで実装する
    let okAction: UIAlertAction =
        UIAlertAction(
            title: "OK",
            style: UIAlertActionStyle.default,
            handler:{
                (action: UIAlertAction!) -> Void in
                print("OK")
    })
    
    // ③キャンセルボタンの作成
    // OKボタンと同様に作成
    let cancelAction: UIAlertAction =
        UIAlertAction(
            title: "キャンセル",
            style: UIAlertActionStyle.cancel,
            handler:{
                (action: UIAlertAction!) -> Void in
                print("Cancel")
    })
    
    // ④UIAlertControllerのインスタンスに作成したボタンを追加
    alert.addAction(cancelAction)
    alert.addAction(okAction)
    
    // ⑤アラートを表示
    present(alert, animated: true, completion: nil)
}

上記の実行例を以下に示します。

iPhoneでのActionSheet表示

UIAlertControllerでのアラート表示方法を理解したら、iPhoneにおける選択肢(ActionSheet)の表示方法を理解しましょう。

コード例を以下に示します。この例ではユーザーに「バスケットボール」「野球」「テニス」の選択肢を示し、選択してもらうためのアクションシートを表示します。

はじめに①の部分でUIAlertControllerのインスタンスを生成します。アラートの時との違いは preferredStyle に UIAlertControllerStyle.actionSheet を指定するという部分です。

②では選択肢を作成し、①で作成したインスタンスに追加をしています。アラートのOKボタン作成時のコードとほぼ同様です。

最後に③でアクションシートを表示します。

@IBAction func buttonAlert(_ sender: Any) {
    // ①UIAlertControllerクラスのインスタンスを生成する
    // titleにタイトル, messegeにメッセージ, prefereedStyleにスタイルを指定する
    // preferredStyleにUIAlertControllerStyle.actionSheetを指定してアクションシートを表示する
    let actionSheet: UIAlertController = UIAlertController(
        title: "選択肢を表示",
        message: "好きなスポーツを選択してください",
        preferredStyle: UIAlertControllerStyle.actionSheet)

    // ②選択肢の作成と追加
    // titleに選択肢のテキストを、styleに.defaultを
    // handlerにボタンが押された時の処理をクロージャで実装する
    actionSheet.addAction(
        UIAlertAction(title: "バスケットボール",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                            print("バスケットボール")
        })
    )

    // ②選択肢の作成と追加
    actionSheet.addAction(
        UIAlertAction(title: "野球",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                        print("野球")
        })
    )
    
    // ②選択肢の作成と追加
    actionSheet.addAction(
        UIAlertAction(title: "テニス",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                        print("テニス")
        })
    )

    // ③アクションシートを表示
    present(actionSheet, animated: true, completion: nil)
}

上記の実行例を以下に示します。

iPadでのActionSheet表示

iPadではiPhoneと同様に実装すると落ちてしまいます。

そこで、コードを以下のように実装します。

違いは以下コードの③の部分のみです。

iPadでアクションシートを表示するには、アクションシートを表示するViewと表示位置を指定する必要があります。

Viewは popoverPresentationController?.sourceView に、表示位置は popoverPresentationController?.sourceRect に指定します。このとき表示位置をsender(つまりはアクションシートを表示するために押されたボタン)を指定することで、そのボタンから吹き出しのようにアクションシートが表示されるようになります。

@IBAction func buttonAlert(_ sender: Any) {
    // ①UIAlertControllerクラスのインスタンスを生成する
    // titleにタイトル, messegeにメッセージ, prefereedStyleにスタイルを指定する
    // preferredStyleにUIAlertControllerStyle.actionSheetを指定してアクションシートを表示する
    let actionSheet: UIAlertController = UIAlertController(
        title: "選択肢を表示",
        message: "好きなスポーツを選択してください",
        preferredStyle: UIAlertControllerStyle.actionSheet)

    // ②選択肢の作成と追加
    // titleに選択肢のテキストを、styleに.defaultを
    // handlerにボタンが押された時の処理をクロージャで実装する
    actionSheet.addAction(
        UIAlertAction(title: "バスケットボール",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                            print("バスケットボール")
        })
    )

    // ②選択肢の作成と追加
    actionSheet.addAction(
        UIAlertAction(title: "野球",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                        print("野球")
        })
    )
    
    // ②選択肢の作成と追加
    actionSheet.addAction(
        UIAlertAction(title: "テニス",
                      style: .default,
                      handler: {
                        (action: UIAlertAction!) -> Void in
                        print("テニス")
        })
    )

    // ③表示するViewと表示位置を指定する
    actionSheet.popoverPresentationController?.sourceView = view
    actionSheet.popoverPresentationController?.sourceRect = (sender as AnyObject).frame
    
    // ④アクションシートを表示
    present(actionSheet, animated: true, completion: nil)
}

③の部分を以下のように変更することで、デバイスを自動的に判断して実行できるようになります。このように記述すればiPhoneでもiPadでも動作させることが可能になります。

デバイスの判定については「[Tips] 使用中のデバイスを判定する」の記事を参考にしてください。

// ③表示するViewと表示位置を指定する(デバイス自動判定版)
if UIDevice.current.userInterfaceIdiom  == .pad {
    actionSheet.popoverPresentationController?.sourceView = view
    actionSheet.popoverPresentationController?.sourceRect = (sender as AnyObject).frame
}

上記の実行例を以下に示します。

ボタンのスタイルについて

最後にボタンのスタイルについて説明します。

ボタンのスタイルは以下に示す3種類を指定することができます。

スタイル 説明
default 標準ボタン用
cancel キャンセルボタン用
destructive 赤文字

必要に応じて選択するようにしましょう。

[Tips]コードスニペットを作成するには?

はじめに

よく使用するコードをなんども入力するのは面倒ですね。

そこで、よく使用するコードはライブラリとして登録して使い回せるようにします。これをコードスニペットと呼びます。

今回は、コードスニペットを作成する方法を説明します。

環境

Xcode:9.4.1
Swift:4.1.2

コードスニペットの登録方法

以下のようなコメントがあるとします。これを毎回入力するのもコピペして使いまわすのも大変です。

///==================================================
/// 機能:
/// 引数:
///     引数1:
///     引数2:
/// 戻り値:
///
/// Create Date:
/// Update Date:
///==================================================

そこで、コードスニペットとして登録します。

はじめにXcode上でコードスニペットにしたいコードを入力します。

次に、入力したコードを選択して、コードスニペットライブラリにドラッグ&ドロップします。

以下のように詳細情報を入力する画面が表示されるので必要に応じて編集します。

  • Title:登録するコードスニペットのタイトルを入力
  • Summary:コードスニペットの説明を入力
  • Platform:iOSやmacOSなど、コードスニペットを使用するターゲットを選択します。
  • Language:対象の言語を選択します。Swiftが対象の場合は「Swift」を選択。
  • Completion Shortcut:コードスニペットを入力するときのショートカット文字列を入力します。Xcode上でこの文字を入力すると、ここで登録したコードスニペットが入力されます。
  • Completion Scopes:ここで設定したスコープ内で入力補完されます。+を押すことで、複数指定が可能です。

プレースホルダも作成することができます。プレースホルダは、登録したコードスニペット内でTabキーを押して移動できる文字列です。コードスニペットのコードを入力したあとに、変更したい場所がある場合はプレースホルダにしておきます。

プレースホルダを作成するにはコードスニペット内で <# 文字列 #> と入力します。

Completion Scopes

Completion Scopesについて、もう少し詳しく説明します。

Completion Scopesは実際には以下の種類があります。

Completion Scopes 説明
ALL 全てのスコープで使用可能
String or Comment 文字列リテラルとコメント内で使用可能
Top Level importよりも下のレベルで@interface, @implementationより外のスコープ

[Tips]NavigationBarの背景色を変更するには?

はじめに

NavigationBarの背景色はAttribute Inspectorから変更することができないので、コードから変更する必要があります。

環境

Xcode:9.4.1
Swift:4.1.2

背景色の変更

背景色を変更するには、以下のようにコードを記述するだけです。この例では紫を設定しています。

self.navigationController?.navigationBar.backgroundColor = UIColor.purple

実行すると以下のように背景色が設定されます。

 

[Tips]ハンバーガーメニューを作成するには?

はじめに

ハンバーガーメニューは、様々な作成方法があります。

ここでは、メインのViewControllerにハンバーガーボタンを設置して、タップされた時に別のViewControllerをオーバーレイ表示させてメニューを表示させる方法を紹介します。

環境

Xcode:9.4.1
Swift:4.1.2

1.Navigation Controllerの配置

Single View Appのプロジェクトを作成したら、Storyboardを開いてメインのViewControllerを選択します。

次に、メニューの[Editor]-[Embed in]-[Navigation Controller]を選択します。

すると、以下のようにNavigation Controllerが追加されて、メインのViewControllerにはNavigation Barが表示されます。

2.ハンバーガーアイコンの設置

次にハンバーガーアイコンを設置します。

はじめに、以下のような画像を準備して、Assetsフォルダに入れます。Assetsフォルダ場では、追加したハンバーガーアイコンの名前を「menu」にしておきます。

続いてメインのViewControllerにあるNabigation Barの左側に、Bar Button Itemを追加します。

続いて、配置したBar Button Itemに先ほど追加したハンバーガーアイコンを設定します。System Itemを「Custom」に、Imageを「menu」にします。これでハンバーガーアイコンが表示されます。

3.ハンバーガーメニュー用のビューを作成する

ハンバーガーボタンをタップした時に表示されるメニューを作成します。メニューは、ViewControllerで作成します。

新しくViewControllerを追加してください。

次にハンバーガーボタンを[control]キーを押しながら、追加したViewControllerにドラッグ&ドロップしてセグエを作成します。セグエは以下のように設定してください。

続いて、追加したViewControllerの背景色をBlackにします。

もう一度Backgroundを選択して、「Other…」を選択します。

別ウィンドウが表示されるのでOpacityを50%にします。

この設定で、ハンバーガーボタンが設置されている遷移元の画面を透けて見えるようにします。

続いて、メニュー用のViewControllerを選択してPresentation欄でOver Current Contextを選択します。

 

次にUIViewを配置します。画面の左側に寄せて配置してください。ここがメニューの領域になります。

4.メニュー画面用のViewControllerクラスの作成

メニュー画面用のViewControllerクラスを作成します。

新規でファイルの追加をし、Cocoa Touch Classを選択します。

続いて、クラス名を「MenuViewController」にし、Subclass ofを「UIViewController」にしてファイルを作成します。

Storyboardでメニュー用のViewControllerを選択して、作成したMenuViewControllerクラスを設定します。

続いて、メニューのアウトレット接続を作成します。アウトレット接続名はmenuViewとします。

最後に、メニュー以外の領域を設定しておきます。メニュー以外の部分を選択して、Tagを1に設定します。メニュー領域外が選択されたかどうかは、このTagに設定した番号をコードから参照して「1」であれば非表示になるようにします。

5.メニュー表示/非表示のアニメーションコードを作成する

最後にメニューの表示/非表示のコードを作成します。このコードはメニュー画面用に作成したMenuViewController.swiftに記述します。

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
    // メニューの位置を取得する
    let menuPos = self.menuView.layer.position
    // 初期位置を画面の外側にするため、メニューの幅の分だけマイナスする
    self.menuView.layer.position.x = -self.menuView.frame.width
    // 表示時のアニメーションを作成する
    UIView.animate(
        withDuration: 0.5,
        delay: 0,
        options: .curveEaseOut,
        animations: {
            self.menuView.layer.position.x = menuPos.x
    },
        completion: { bool in
    })
    
}

// メニューエリア以外タップ時の処理
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    super.touchesEnded(touches, with: event)
    for touch in touches {
        if touch.view?.tag == 1 {
            UIView.animate(
                withDuration: 0.2,
                delay: 0,
                options: .curveEaseIn,
                animations: {
                    self.menuView.layer.position.x = -self.menuView.frame.width
            },
                completion: { bool in
                    self.dismiss(animated: true, completion: nil)
            }
            )
        }
    }
}

 

6.実行例

以上でハンバーガメニューの完成です。

実行例は以下の通りです。