[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.実行例

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

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

 

[Tips]背景を透過させて遷移元のViewを見せるには?

はじめに

ViewControllerから別のViewControllerを呼び出した時に、Alertのように必要部分以外を透過させて見せたい場合があります。

今回は、背景を透過させる方法についてみていきます。

環境

Xcode:9.4.1
Swift:4.1.2

プロジェクトの作成

まずは、Single View Appのプロジェクトを作成します。

次に、Storyboardを開いて、ViewControllerにButtonを貼り付けます。

 

次に新しいViewControllerをstoryboardに配置します。

続いて、Buttonがタップされた時に追加したViewControllerに遷移するようにセグエを追加します。

セグエの種類は、ここではpresent Modallyにします。

続いて、遷移先のViewControllerの背景色を変更します。ここではBackgroundの欄でBlackを選択することとします。

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

別ウィンドウが表示されるので、Opacityを50%にします。ここのパーセンテージは透過率ですので、好みに合わせて調整してください。

さて、これだけでは背景が透けて見えるようにはなりません。

続いて遷移先のViewControllerを選択して(①)、Presentationに「Over Current Context」を選択します。

最後に、UIViewを配置して好きな色を設定します。

実行結果

実行をしてButtonをタップすると、画面は以下のようになります。遷移元のButtonが透けて見えていることが確認できます。

 

 

 

 

 

 

[Tips]Swiftのバージョンを確認するには?

Swiftのバージョンを調べるにはターミナルを使用します。

ターミナルを起動したら、コマンドラインで以下を入力します。

swift -v

このコマンドを実行すると、以下のようにバージョンを確認することができます。この場合はバージョンは4.1.2ということになります。

最後に以下の画面のように「1>」となり、入力待ちになります。

終了するには「:q」か「:exit」と入力します。