Gunosy Tech Blog

Gunosy Tech Blogは株式会社Gunosyのエンジニアが知見を共有する技術ブログです。

iOSデバッグ中LLDBコマンドでUIView(Controller)を作って表示してみる

こんにちは。グノシー開発部でiOSの開発を担当しているhongmhoonです。

この記事はGunosy Advent Calendar 2019の23日目の記事です。 昨日の記事はokataiさんの自分なりのマネジメントを言語化してみたでした。

はじめに

FlutterのHot ReloadやSwiftUIのpreviewなどUI開発をよりはやく可能にする技術が次々と出てきてますが、色々な理由で今すぐは使えない既存プロジェクトも多々あると思います。 今回はそのような既存プロジェクトでもLLDBコマンドを利用してリビルドせずにUIViewやUIViewControllerを動的に生成して表示して見たいと思います。

準備作業

新しいプロジェクト作成

それでは早速今回のデモのために新しくプロジェクトを作ります。 (*この記事はXcode 11.2.1を利用しています)

Single View Appを選び、

f:id:hongmhoon:20191219222420p:plain

User InterfaceはStoryboardを選びます。

f:id:hongmhoon:20191219222525p:plain

ViewControllerにデバッグの準備

今回デバッグ中UIView(Controller)を作って表示するためにビューが表示された後のviewDidAppearのタイミングでデバッグができるように以下のコードをViewControllerに追加してブレイクポイントを設定しておきます。

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
}

f:id:hongmhoon:20191219222749p:plain

デバッグ開始

アプリを実行すると白画面だけのアプリが起動後、デバッグモードになります。

f:id:hongmhoon:20191219222851p:plain

LLDBコマンドの紹介

今回使うLLDBコマンドはexpressionです。

(lldb) help expression
     Evaluate an expression on the current thread.  Displays any returned value
     with LLDB's default formatting.

ヘルプ見ると式を評価して結果を表示すると書いてあります。

また有名なpopコマンドもヘルプを見ると中身はexpressionであることがわかります。

'po' is an abbreviation for 'expression -O  --'
'p' is an abbreviation for 'expression --'

expressionを使ってみる

まず e 3 + 5と実行してみます。(eexpressionの略)

f:id:hongmhoon:20191219223355p:plain

すると式を評価して結果が表示されました。

次は結果をあとで使うために変数に保存してみます。

f:id:hongmhoon:20191219223441p:plain

結果を$sumに保存して後から使うことができました。(変数名は$で始まる)

UIViewの作成

それでは本題のUIViewを作ってみます

f:id:hongmhoon:20191219223637p:plain

UIViewを作るコードは基本swiftのコードと同じです。これでビューは作られましたが、まだサイズも色味もないのでちょっと修正します。

f:id:hongmhoon:20191219223735p:plain

これで背景色とサイズがあるのでViewControllerに追加して表示します

f:id:hongmhoon:20191219223829p:plain

e CATransaction.flush() はデバッグ中のままビューを更新するためのコードです。

f:id:hongmhoon:20191219223938p:plain

作ったビューがシミュレーターでも確認できました。

UIViewControllerの作成

UIViewの作成と追加ができたので次はUIViewControllerを作って画面遷移をしてみます

f:id:hongmhoon:20191219224023p:plain

基本的なUIViewControllerにわかりやすくするため背景色を黄色にしました。

それではモーダルで表示してみましょう

f:id:hongmhoon:20191219224129p:plain

画面遷移のself.present($vc, animated: true)e CATransaction.flush()では更新されなかったのでcontinueで一旦デバッグを中止しましたが作ったViewControllerがシミュレーターでも確認できました。

おまけ(アニメーション)

デバッグ中でもUIView.animatione CATransaction.flush()でビューのアニメーションも確認できます。

f:id:hongmhoon:20191219224234p:plain

このコードで追加したビューの背景色をアニメーションで変えてみます

f:id:hongmhoon:20191219231649g:plain

おわりに

いかがですか。FlutterのHot ReloadやSwiftUIのpreviewなどよりは不便かも知れませんが、既存プロジェクトでもLLDBコマンドを利用してリビルドせず楽しいiOS開発をやっていきましょう。

明日はaitaさんです。引き続きGunosy Advent Calendar 2019をお楽しみください。