20190413のiOSに関する記事は8件です。

初心者向け、iPhoneアプリをリリースするために参考にしたサイト

0 はじめに

プログラム初心者が、swiftを初めてさわって、AppleStoreでリリースするまでに、参考にしたサイトです。これから初めて、iPhoneアプリを作ってみようと思っている人の参考になればと思い、投稿しました。

1 Progate,ドットインストール

まずは、この二つのswiftのコースを学習しました。とにかく、この二つは最初に、取り掛かりやすく、やって損はないと思います。

Progate
ドットインストール

2 Udemy

動画学習サイトです。私はUdemyをメインに学習していました。セール期間中でなくても、2つ買うと2400円というお買い得情報が、各教材のページの下の方にあるので、2つ買って安く買うことができました。私が使ったのは主にこの3つです。

【6日で速習】iOS 11 Swift 4アプリ開発入門決定版 20個のアプリを作る(ARKit,CoreML,NFC)

こちらは、初心者にもわかりやすく、質問しても丁寧に答えてもらえます。

【最新版iOS12対応】プログラミング初心者が学ぶiPhoneアプリ開発入門

動画の説明の声が聞き取りやすく、いろんな種類のアプリが作成できるので、参考になります。

iOS 12 & Swift - The Complete iOS App Development Bootcamp

英語の教材なのですが、教材としての完成度が非常に高く、この値段で買えるのが不思議なくらいです。英語ですが、コードを書いて、動かす部分は動画を追って行けばできるので、十分参考になると思います。

3 わからない所

アプリを作る上で、検索している時間が1番長かったかなと思います。エラーメッセージをそのまま貼り付けてGoogle検索することで、かなり解決しました。学習を進めていくうちに、英語なので避けていたAppleのドキュメントを見ることが重要なことに気づいて、参考にするようにしました。

Apple Developer Documentation

4 書籍

ネットの学習サイトのみで作っていたのですが、紙ベースの本も欲しくなり購入しました。

絶対に挫折しないiPhoneアプリ開発「超」入門 第7版 【Xcode 10 & iOS 12】 完全対応 (Informatics&IDEA)

こちらは入門編です。とても丁寧でわかりやすいです。本屋さんでみやすい好みのものを選びました。

[改訂新版]Swift実践入門 ── 直感的な文法と安全性を兼ね備えた言語 (WEB+DB PRESS plus)

中級者以上向けです。辞書的に分からない時に調べる感じです。

5 まとめ

私は、Progate,ドットインストール1周した後、Udemy,ネット検索しながら自分の作りたいアプリを作りつつ、たまに書籍も見るという感じでした。これから学習を始める方の参考になれば幸いです。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

AppDelegateから一番上のUIViewControllerにアクセスする方法

AppDelegateからUI操作を行う時、UIViewControllerが複数重なっている時は一番上(最前面)のUIViewControllerにアクセスする必要がありますよね。
今回はその方法について調べてみました。

準備

以下の様な3つのUIViewControllerをSegueで順に起動するサンプルプログラムを作成します。
AppDelegate.png
青いUIViewControllerにはFirstViewController、黄色いUIViewControllerにはSecondViewController、赤いUIViewControllerにはThirdViewControllerというクラス名をつけておきます。

処理

今回はAppDelegateのapplicationWillEnterForegroundに処理を記述しました。
ホームボタンやホームインジケータを押下してアプリを一度バックグラウンドにして、その後フォアグラウンドに復帰させた時に走るイベントです。

AppDelegate.swift
import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

-------------------- (中略) --------------------
    func applicationWillEnterForeground(_ application: UIApplication) {
        //一番手前のViewControllerを取得
        var viewController = UIApplication.shared.keyWindow?.rootViewController

        //PresentedViewControllerが取得できなくなるまでループ
        while viewController!.presentedViewController != nil {

            let presentedViewController = viewController!.presentedViewController

            //UIAlertControllerは対象外とする
            if let alertController = presentedViewController as? UIAlertController {
                //一番上がUIAlertControllerであればUIAlertControllerを閉じる
                alertController.dismiss(animated: true, completion: nil)
                break
            } else {
                //UIAlertControllerでなければ取得
                viewController = presentedViewController
            }
        }

        var message: String = ""

        if viewController is FirstViewController {
            message = "1番目のViewControllerです"
        }

        if viewController is SecondViewController {
            message = "2番目のViewControllerです"
        }

        if viewController is ThirdViewController {
            message = "3番目のViewControllerです"
        }

        let alertController: UIAlertController = UIAlertController(title: "", message: message, preferredStyle: .alert)
        let defaultAction: UIAlertAction = UIAlertAction(title: "OK", style: .default, handler: nil)
        alertController.addAction(defaultAction)
        viewController!.present(alertController, animated: true, completion: nil)
    }
}

一番上のUIViewControllerを取得して、そこからアラートを表示する処理を記述しています。

サンプルプログラムを動かすとフォアグラウンドになった時に現在表示している画面をアラートで表示します。
ezgif-4-4554282cb2d2.gif

解説

まずUIApplicationからrootViewController(一番手前のUIViewController)を取得します。

var viewController = UIApplication.shared.keyWindow?.rootViewController

そしてrootViewControllerからpresentedViewControllerをループして取得します。

while viewController!.presentedViewController != nil {
    let presentedViewController = viewController!.presentedViewController

一番最後に返ってきたpresentedViewControllerが一番上のUIViewControllerになるのですが、ここで1点注意が必要です。
アラートを表示するUIAlertControllerや、App Extensionsを表示するUIActivityViewControllerもUIViewControllerを継承しているので、presentedViewControllerで返ってきます。
その為、一番上がUIAlertControllerやUIActiveViewControllerであった場合はその一つ手前のUIViewControllerが一番上のUIViewControllerになります。
今回のサンプルでもUIAlertControllerが表示されている可能性はあるので、UIAlertControllerだったらそれを閉じて、その一つ手前のUIViewControllerを一番上のUIViewControllerとして取得するようにしています。

while viewController!.presentedViewController != nil {

    let presentedViewController = viewController!.presentedViewController

    //UIAlertControllerは対象外とする
    if let alertController = presentedViewController as? UIAlertController {
       //一番上がUIAlertControllerであればUIAlertControllerを閉じる
       alertController.dismiss(animated: true, completion: nil)
       break
    } else {
       //UIAlertControllerでなければ取得
       viewController = presentedViewController
    }
}

どのUIViewControllerが一番上に来ているのかは「is」を使用してクラス名と型比較をすればわかります。

var message: String = ""

if viewController is FirstViewController {
   message = "1番目のViewControllerです"
}

if viewController is SecondViewController {
   message = "2番目のViewControllerです"
}

if viewController is ThirdViewController {
   message = "3番目のViewControllerです"
}
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

iOSアプリエンジニアのためのAndroidアプリ開発入門 その1 〜インストール編〜

はじめに(対象読者と内容の方向性)

iOSアプリ開発を5年ほどやっていますが、諸事情によりAndroidアプリ開発にも挑戦することになりました。

せっかくなので、わたしと同じように『iOSアプリ開発はやったことあるけど、Androidアプリ開発ははじめて』という方向けにAndroidアプリ開発についてまとめていきます。iOSアプリエンジニア向けなので、『iOSでのこういう機能は、Androidではこうやって実装する』、『iOSではこういう考え方だけど、Androidではこういう考え方で実装する』みたいな形で紹介できればと考えています。

免責事項

Androidアプリ開発初心者が勉強しながら書いているので、たぶん間違いがたくさんあります。勉強していく過程で間違いに気がついたらその都度修正をしますが、「ここ間違ってるで〜」というのがあれば、ぜひツッコンでください。

全体の目次

その1 〜インストール編〜 ←イマココ
その2 〜新規プロジェクト作成編〜
その3 〜エミュレータ編〜

Android Studioのインストール

まずは、iOSアプリ開発でのXcodeに当たる、Android Studioをインストールします。
Xcodeと同じようにけっこう容量が大きいので、それなりの回線で時間があるときに実行しましょう。

01-001.png

こちら↓のDeveloperサイトにアクセスして、DOWNLOAD ANDROID STUDIOボタンをクリックします。
Android Studio

01-002.png

利用規約の確認画面が表示されるので、内容を確認して同意にチェックを入れて、ダウンロードボタンをクリックします。

01-003.png

ダウンロードされたファイルをダブルクリックします。

01-004.png

Android StudioをApplicationsフォルダにコピーします。

01-005.png

Android Studioを起動します。

01-006.png

開いてもよろしいですか? と聞かれるので、開くボタンをクリックします。

01-007.png

『Import Android Studio settings from:』と聞かれますが、はじめてのインストールで設定ファイルはないので、『Do not import settings』を選択してOKボタンをクリックします。

01-008.png

改善のためのデータ送信を許可するか聞かれるので、開発者として協力するために『Send usage statistics to Google』ボタンをクリックします(データを送りたくない場合は『Don't send』ボタンをクリックしてください)。

01-009.png

Welcome画面が表示されました。ありがとうございます。

01-010.png

Nextボタンをクリックすると、インストールタイプを聞かれます。はじめてでカスタムする内容もわからないので、Standardを選択してNextボタンをクリックします。

01-011.png

テーマの選択が表示されるので、DarculaかLightのどちらかを選択します。最近はやりのダークテーマっぽいDarculaにしてみました。

01-012.png

インストール内容の確認が表示されるので、内容を確認してFinishボタンをクリックします。

01-013.png

データのダウンロードがはじまります。

01-014.png

セキュリティの警告が表示されるので、セキュリティとプライバシーを開いて、許可ボタンをクリックします。

01-015.png

インストールが終わったら、Finishボタンをクリックします。

01-016.png

Welcome画面が表示されました。XcodeのWelcome画面のように、プロジェクトの作成やプロジェクトを開くことができます。

終わりに

今回はここまでです。
次回の更新をお待ちください。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

1行もコードを書かずにネイティブアプリ(もどき)をリリースする7つのステップ

前提

これだけでちゃんとしたアプリが作れるとは言いませんし、ネイティブアプリオワタとは言いません。
ただ、ノーコードでアプリをデプロイまでできるのは結構すごいなあと思ったので、共有します。
(やはりY Combinatorすごい)

必要とされる知識など

  • インターネット接続できる環境にあること。
  • PCで画面をみれて、スプレッドシートが開けること。(&作れること)
  • Gmailのアカウントがあること。
  • 作りたいアプリのイメージがあること。

今回のアプリについて

米国株の配当金、買い時の指標などを管理できるアプリを作ります。

完成イメージは

メインページがこれで

スクリーンショット 2019-04-13 17.55.30.png

詳細画面がこれです。シンプルですね。

スクリーンショット 2019-04-13 17.56.45.png

もう一度言いますが、一行もコードは書いていません。

もう一つ付け加えると15分くらいでリリースまでこぎつけました。

では、作っていきましょう!

事前準備

添付のような感じでスプレッドシートを作リます。
スクリーンショット 2019-04-13 18.09.27.png

手順1

Glideにアクセスする。

手順2

Create an appを押して、下記の画像の画面に遷移する
スクリーンショット 2019-04-13 18.02.23.png

Sign Upを押して、Gmailのアカウントでログインする。

手順3

左上にあるNew Appを押す。
スクリーンショット 2019-04-13 18.04.57.png

手順4

スプレッドシートを読み込む。
(スプレッドシートは事前に作っておいたものを利用)
スクリーンショット 2019-04-13 18.06.13.png
僕の場合はここに書いてある「配当金管理」というスプレッドシートを使います。

手順5

アプリの開発画面になったので、見た目を調整する

スクリーンショット 2019-04-13 18.10.26.png

検索バーがデフォルトでついてて驚愕・・・

大まかにいうと、左側が「どんなことをしたいか」右側が「その詳細を変更する」という感じになっています。めっちゃわかりやすいですね。

機能は色々いじりながら試していってもらいたいのですが、先ほどの見た目に近づけるための方法を簡単に記載します。

まず、「ア」とか「ウ」とか左側に表示されるのがダサいので無くします。
Show initials as default Imageの部分が有効になっているので無効になります。

次に色を黒くしたいので、左側のSettingsを押して、右側に出てくるThemeを押します。

スクリーンショット 2019-04-13 18.16.53.png

これでほぼできたので、あとは細かいところを適当に作ります。(アイコンとか、色合いとかはご自身でどうぞ)

手順6

URLを決める。

Settingを押した後の画面でAPP URLを入れるところがあるので、適当に名前を決めて入力します。

スクリーンショット 2019-04-13 18.21.01.png

手順7

リリースする(まじか・・・!)

左下のopen appを押す。

スクリーンショット 2019-04-13 18.23.32.png

これでアプリができてしまいました。。

完成品がこれです。

PWA対応もしているので、Androidだともはやネイティブアプリです。
ちなみにiOSでもちゃんとアプリという認識で立ち上がってくれました。

ezgif.com-video-to-gif.gif

すごい世界がやってきたものだ。。

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

command phasescriptexecution failed with a nonzero exit code エラーとの戦い

Xcode 10.2にしたらなぜか以上のエラーに襲われるように
ググった感じの下記対応は全滅でした。。

・PC再起動
・Xcode再インストール
・clean
・DerivedData削除
・keychainを開く->左メニューの ログイン を右クリック -> キーチェーンログインをロック -> キーチェーンログインのロックを解除

最終的な解決方

gawkとreadlineのバージョンが関係していたみたい

brew uninstall readline
brew uninstall gawk
brew install readline
brew install gawk

で解決

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Swift】ABI StabilityとModule StabilityとLibrary Evolution Support

2019年3月18日に
Swift5.1のfinal branchingがアナウンスされてから
1ヶ月ほど経過しました。

リリース日はまだ出ていませんが
Appleのブログを見ている限り短いスパンでのリリースを考えており
次のバージョンについても学び始める時期なのかと思っています。
(WWDCに合わせるのかもしれませんが)

https://swift.org/blog/5-1-release-process/

Swift5.0ではABI Stabilityが達成されましたが、
Swift5.1はModule Stabilityを主な目的としています。

今回はSwift5.0で実現したABI Stability
そして5.1で達成されるModule Stability
さらに今後実現される予定のLibrary Evolution Support
について簡単にまとめてみたいと思います。

もし何か間違いなどごさいましたら教えていただけますとうれしいです:bow_tone1:

API Stability

API StabilityはSwiftのバイナリの互換性を確保することによって
Swiftのバージョンが異なっても
他のバージョンのstandard libraryやruntime libraryでアプリの実行が可能になります。

メリットとして下記のようなものがあります。

アプリサイズの削減

今まではアプリを使用する時に同じバージョンのstandard libraryやruntime libraryが必要になるため
これらをアプリのバンドルに含めなければならず容量が増えてしまっていました。(約5MB)

今後はObjective-Cのruntimeと同様にOSと一緒に同梱されるため
アプリのバンドルサイズを削減することができます。

パフォーマンスの向上

ホストのOSとより統合することができるため

  • 起動時間の短縮
  • runtime時の処理の最適化
  • 使用メモリの削減

が期待できます。

Appleが将来のOSバージョンでSwiftを使ったPlatformのFrameworkを提供可能になる

ブログに書かれていたのですが、具体的にどういうメリットがあるのかがわかっていません。

FrameworkがSwiftで書かれることで
Swiftで書かれたアプリとの連携が向上してパフォーマンスが良くなるということでしょうか:thinking:


ABI Stabilityは
2019年4月現在 Appleプラットフォームで実現していますが
LinuxやWindowsはまだのようです。

https://swift.org/blog/abi-stability-and-more/
https://swift.org/blog/abi-stability-and-apple/

Module Stability

ABI Stabilityは実行時のSwiftのバージョン差異を吸収してくれる一方、
Module Stabilityはコンパイル時のSwiftのバージョンの違いを吸収してくれます。

Swiftでは「swiftmodule」というアーカイブフォーマーットでライブラリのinterfaceを定義していますが、
このファイルの内容が現在のコンパイラのバージョン(実質Swiftのバージョン)と密接に結びついているために
別のバージョンでビルドされたライブラリをimportとしようとしてもコンパイラがエラーにしてしまいます。

これによってバイナリフレームワークを提供しているライブラリで、
バージョンに合わせてビルドされたライブラリを用意する必要が毎回あり
クライアント側でも
ライブラリが対応していないからSwiftのバージョンを上げることができない
ということが起きていました。

これをModule Stabilityが実現されると
どのコンパイラのバージョンで実装されたかを気にする必要がなくなります。

※ 実はObjective-CでWrapすればできるということをInstabugの方がブログで書かれていました。
https://instabug.com/blog/swift-5-module-stability-workaround-for-binary-frameworks/

詳細は下記のSwift Forumの中で話されています。
https://forums.swift.org/t/plan-for-module-stability/14551

Library Evolution Support

これはまだ最終決定がされていないものですが
AppleのブログではすでにStandard Libraryなどで実装されているようです。

Swift4.2で導入された@inlinableもこれの一つです。
https://github.com/apple/swift-evolution/blob/master/proposals/0193-cross-module-inlining-and-specialization.md

今まではSwift(コンパイラ)のバージョンが上がった時の話をしていましたが、
今度はアプリで使用しているライブラリのバージョンが上がった時の話です。

現在ですと
ライブラリのバージョンが変わるたびに
アプリの再コンパイルが必要になります。

ブログによると
この動きにはメリットがあり
コンパイラがどのバージョンを使用しているのかがわかるので
最適化ができると書いてあります。
しかし
ライブラリのバージョンが違うと
この最適化が正しい最適化ではなくなる可能性があります。
そのため再コンパイルが必要になってくるようです。

Library Evolution Supportを達成すると
この再コンパイルが不要になります。

例えば
あるライブラリの更新が
他のライブラリの更新を引き起こすことがなくなります。

AとBのライブラリのbinary frameworkを使用している。

AはBのライブラリに依存している。

Bのライブラリを上げる

Aも再コンパイルしなければならなくなる

まとめ

Swiftは表だけではなく
裏側の仕組みもどんどん進化していっています。

普段はあまり目に見えないことに関しても
気がつかないところで恩恵を受けていたり
逆に何か影響を受けているかもしれないので
こういう裏側に仕組みを学ぶことも大事だなと思っています。

これからもSwiftがどう進化していくのかを追っていくのが楽しみです:smiley:

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

【Swift】Swift5.0のABI StabilityとSwift5.1のModule Stabilityと その先のLibrary Evolution Support

2019年3月18日に
Swift5.1のfinal branchingがアナウンスされてから
1ヶ月ほど経過しました。

リリース日はまだ出ていませんが
Appleのブログを見ている限り短いスパンでのリリースを考えており
次のバージョンについても学び始める時期なのかと思っています。
(WWDCに合わせるのかもしれませんが)

https://swift.org/blog/5-1-release-process/

Swift5.0ではABI Stabilityが達成されましたが、
Swift5.1はModule Stabilityを主な目的としています。

今回はSwift5.0で実現したABI Stability
そして5.1で達成されるModule Stability
さらに今後実現される予定のLibrary Evolution Support
について簡単にまとめてみたいと思います。

もし何か間違いなどごさいましたら教えていただけますとうれしいです:bow_tone1:

API Stability

API StabilityはSwiftのバイナリの互換性を確保することによって
Swiftのバージョンが異なっても
他のバージョンのstandard libraryやruntime libraryでアプリの実行が可能になります。

メリットとして下記のようなものがあります。

アプリサイズの削減

今まではアプリを使用する時に同じバージョンのstandard libraryやruntime libraryが必要になるため
これらをアプリのバンドルに含めなければならず容量が増えてしまっていました。(約5MB)

今後はObjective-Cのruntimeと同様にOSと一緒に同梱されるため
アプリのバンドルサイズを削減することができます。

パフォーマンスの向上

ホストのOSとより統合することができるため

  • 起動時間の短縮
  • runtime時の処理の最適化
  • 使用メモリの削減

が期待できます。

Appleが将来のOSバージョンでSwiftを使ったPlatformのFrameworkを提供可能になる

ブログに書かれていたのですが、具体的にどういうメリットがあるのかがわかっていません。

FrameworkがSwiftで書かれることで
Swiftで書かれたアプリとの連携が向上してパフォーマンスが良くなるということでしょうか:thinking:


ABI Stabilityは
2019年4月現在 Appleプラットフォームで実現していますが
LinuxやWindowsはまだのようです。

https://swift.org/blog/abi-stability-and-more/
https://swift.org/blog/abi-stability-and-apple/

Module Stability

ABI Stabilityは実行時のSwiftのバージョン差異を吸収してくれる一方、
Module Stabilityはコンパイル時のSwiftのバージョンの違いを吸収してくれます。

Swiftでは「swiftmodule」というアーカイブフォーマーットでライブラリのinterfaceを定義していますが、
このファイルの内容が現在のコンパイラのバージョン(実質Swiftのバージョン)と密接に結びついているために
別のバージョンでビルドされたライブラリをimportとしようとしてもコンパイラがエラーにしてしまいます。

これによってバイナリフレームワークを提供しているライブラリで、
バージョンに合わせてビルドされたライブラリを用意する必要が毎回あり
クライアント側でも
ライブラリが対応していないからSwiftのバージョンを上げることができない
ということが起きていました。

これをModule Stabilityが実現されると
どのコンパイラのバージョンで実装されたかを気にする必要がなくなります。

※ 実はObjective-CでWrapすればできるということをInstabugの方がブログで書かれていました。
https://instabug.com/blog/swift-5-module-stability-workaround-for-binary-frameworks/

詳細は下記のSwift Forumの中で話されています。
https://forums.swift.org/t/plan-for-module-stability/14551

Library Evolution Support

これはまだ最終決定がされていないものですが
AppleのブログではすでにStandard Libraryなどで実装されているようです。

Swift4.2で導入された@inlinableもこれの一つです。
https://github.com/apple/swift-evolution/blob/master/proposals/0193-cross-module-inlining-and-specialization.md

今まではSwift(コンパイラ)のバージョンが上がった時の話をしていましたが、
今度はアプリで使用しているライブラリのバージョンが上がった時の話です。

現在ですと
ライブラリのバージョンが変わるたびに
アプリの再コンパイルが必要になります。

ブログによると
この動きにはメリットがあり
コンパイラがどのバージョンを使用しているのかがわかるので
最適化ができると書いてあります。
しかし
ライブラリのバージョンが違うと
この最適化が正しい最適化ではなくなる可能性があります。
そのため再コンパイルが必要になってくるようです。

Library Evolution Supportを達成すると
この再コンパイルが不要になります。

例えば
あるライブラリの更新が
他のライブラリの更新を引き起こすことがなくなります。

AとBのライブラリのbinary frameworkを使用している。

AはBのライブラリに依存している。

Bのライブラリを上げる

Aも再コンパイルしなければならなくなる

まとめ

Swiftは表だけではなく
裏側の仕組みもどんどん進化していっています。

普段はあまり目に見えないことに関しても
気がつかないところで恩恵を受けていたり
逆に何か影響を受けているかもしれないので
こういう裏側に仕組みを学ぶことも大事だなと思っています。

これからもSwiftがどう進化していくのかを追っていくのが楽しみです:smiley:

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

アプリをそれっぽく見せるNavigationBarとTabBarの色の変え方 Swift初心者向け

完成品

tab_qiita.gif

対象

・iOSアプリの開発初心者で、それっぽいアプリ作りたいなと思っている方。
・Navigation Bar をカスタムしたいなと思っている方。
・Tab Bar をカスタムしたいなと思っている方。
・毎回 UIColor 使って入力するの面倒だなと思っている方。

開発環境

Xcode10.2
Swift5

概要

  1. Navigation Bar と Tab Bar の使い方がわかる!(Controller も)
  2. 色を一元管理することで、色の指定、色の変更を簡単にする!
  3. Navigation Bar と Tab Bar の色を統一して、アプリっぽさを出す!

セットアップ

コードを書く前に、Xcode を触っていきます!

プロジェクトの立ち上げ

スクリーンショット 2019-04-12 12.58.40setup.png

画面の準備

1. 初期の View Controller の削除

Main.storyboard にある ViewController は使わないので、消し去りましょう。
スクリーンショット 2019-04-12 13.03.37remove.png

2. Tab Bar Controller を入れる

次に Tab Bar Controller を Storyboard に挿入します。
1. Library をクリック
2. 検索欄に tabbar と入力
3. 結果に出てきた、Tab Bar Controller をドラッグ&ドロップで召喚

スクリーンショット 2019-04-12 13.04.04addtab.png
4. OK!
スクリーンショット 2019-04-12 13.04.35addedTabbar.png

Tab Bar Controller をちょっとだけ編集

アイコンがデフォルトだと味気ないので、変更します!
1. Tab Barを選択
2. System Item から好きなものを選択
3. OK!
(もう1つの画面も同様に編集)
スクリーンショット 2019-04-12 13.24.15.jpg

3. Navigation Controller を入れる

  1. Tab Bar Controller の次の画面の上にある黄色いところを選択
  2. Editor を選択
  3. Embed In → Navigation Controller を選択 スクリーンショット 2019-04-12 13.05.14addEmbedIn_navigationbar.jpg
  4. 完成!(もう1つの画面も同様に編集) スクリーンショット 2019-04-12 13.05.28.png

Navigation Bar をちょっとだけ編集

タイトルを入れましょー!
1. Navigation Barをクリック
2. Titleを編集
3. OK!
(もう1つの画面も同様に編集)

スクリーンショット 2019-04-12 13.08.03.jpg

Is initial View Controllerの設定

最初に View Controllerを消してしまったので、 Is initial View Controllerの設定がなくなってしまいました。
このまま、プロジェクトをビルドしてRunすると、どの ViewController を表示すれば良いのかがわからず、下記のエラーが発生してしまうのでここで設定しておきます。

Failed to instantiate the default view controller for UIMainStoryboardFile 'Main' - perhaps the designated entry point is not set?
  1. 黄色のところを選択
  2. Is initial View Controller を選択
  3. 矢印があればOK! スクリーンショット 2019-04-12 22.28.51.jpg

実装

UIColor を継承したクラス作成

なぜ UIColor を継承したクラスを作成するかというと、1つのファイルで色の指定を管理したいからです。
Tab Bar などのアイテムに色をつける際に、1つ1つの画面で色を設定するのは面倒です。
例えば、全ての画面で Tab Bar の色を黒(#000000)にしていたとします。
色の変更したいな〜と思って、白(#FFFFFF)にすることになったとしたら、全ての画面に適用されているソースコードを変更しなければなりません。
10画面あったら、10個もコードを変更する手間がかかります。

色の指定を1つのクラスにし、そのクラスのプロパティを参照することで、1つのクラスで色を管理できるようにでき、修正が簡単になり、保守性が上がります!

また、UIColor を継承しているクラスを作成することによって、「プロジェクトで利用する色なんだ」とクラスを見ただけで、他の人(共同開発したり、保守運用をしている人)に意図が伝わるというメリットもあります。

  1. Ctrl + N でファイル作成 (Swift File)
  2. SoreppoiAppColor.swift ファイル選択(ファイル名は適当に。プロジェクト名+Color だと分かりやすいかも)
  3. 以下のコードを記述
SoreppoiAppColor.swift
import Foundation
import UIKit

class SoreppoiAppColor {
    // 濃い緑を返す
    class var primary: UIColor {
        return rgbColor(rgbValue: 0x73C6B6)
    }

    // 薄いオレンジを返す
    class var secondary: UIColor{
        return rgbColor(rgbValue: 0xFFD6BA)
    }

    // 白っぽい灰色を返す
    class var background: UIColor{
        return rgbColor(rgbValue: 0xFAF9F9)
    }

    // #FFFFFFのように色を指定できるようにするメソッド!色が使いやすくなる。
    // ここでしか使わないので privateメソッドにする。
    private class func rgbColor(rgbValue: UInt) -> UIColor{
        return UIColor(
            red:   CGFloat((rgbValue & 0xFF0000) >> 16) / 255.0,
            green: CGFloat((rgbValue & 0x00FF00) >>  8) / 255.0,
            blue:  CGFloat( rgbValue & 0x0000FF)        / 255.0,
            alpha: CGFloat(1.0)
        )
    }
}

Tab Bar Controller ファイルを作成

目的:Tab Bar の色を変更する

  1. Ctrl + N でファイル作成 (Cocoa Touch Class)
  2. 「Subclass of: 」 で UITabBarController を選択して作成 (Class名は適当に)
    スクリーンショット 2019-04-12 13.10.48.png

  3. 以下のコードを記述。コードの説明は、コメントにて。
    (追記部分以外は最初から記述してあります。)

SoreppoiAppTabBarController.swift
import UIKit

class SoreppoiTabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // -----**追記部分**----- //
        // アイコンの色を変更できます!
        UITabBar.appearance().tintColor = SoreppoiAppColor.secondary
        // 背景色を変更できます!
        UITabBar.appearance().barTintColor = SoreppoiAppColor.primary
        // -----**追記部分**----- //
    }

}

4_ Tab Bar Controller に、swift ファイルを適用
このままでは Tab Bar Controller と、SorreppoiAppTabBarController.swift ファイルが別々のもの(連携していない)になっているので、swift ファイルで Tab Bar Controller で制御できるようにしましょう!

Main.storyboard を開いて、Tab Bar Controller に swift ファイルを適用

スクリーンショット 2019-04-12 13.11.54.jpg

Navigation Bar の色を変更

AppDelegate.swift のコードを修正

なぜ function にしているかというと、function名を使ってどのような処理をしているかが、直感的にわかるからです!
もちろん function化せずに処理を書いても良いのですが、パッと見ただけですぐに処理内容がわからず、処理を読み解く時間が発生します。
function化することで、誤った解釈を防ぐことができ、可読性も向上します!

追記部分だけ記述してください!

AppDelegate.swift
import UIKit
import CoreData

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?


    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        // -----**追記部分**----- //
        changeNavigationBarColor()
        // -----**追記部分**----- //
        return true
    }
    // -----**追記部分**----- //
    func changeNavigationBarColor() {
        // 全てのNavigation Barの色を変更する
        // Navigation Bar の背景色の変更
        UINavigationBar.appearance().barTintColor = SoreppoiAppColor.primary
        // Navigation Bar の文字色の変更
        UINavigationBar.appearance().tintColor = SoreppoiAppColor.secondary
        // Navigation Bar のタイトルの文字色の変更
        UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: SoreppoiAppColor.background]
    }
    // -----**追記部分**----- //


///ここから先は省略///

完成したそれっぽいアプリ(再度掲載)

tab_qiita.gif

まとめ

Navigation Bar と Tab Bar の色を統一してみるだけでなんかそれっぽいアプリに見えませんか!?(自分だけかな。)
この画面をベースにアプリ開発をしていくと少しだけテンション上がります。それっぽく見えるかもなんで!
Navigation Controller を使っているので、次の画面に遷移した時に、上に 「<戻る」 も付くので便利ですよ!

長文でしたがお読みいただきありがとうございました。

この投稿が誰かの手助けとなると、とても嬉しいです!
ぜひコメントください。

間違っている点、もっとこうした方がいいよ、という点などご指摘お待ちしております!
よろしくお願いいたします。

参考にさせていただいた記事

@senseiswift さん
ExtensionでUIColorにブランドカラーを返す拡張メソッド追加

コードログ
Swift – iOS:ナビゲーションバーの色を変更する

  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む