post Image
[Swift]iOS11以降、遷移時にナビゲーションがカクツク問題に対処する

前書き

iphone Xの対応をするにあたり、発生したバグだったのですが、、、
iphone Xじゃなくても古い端末でiOS11にしていると発生したので思わずびっくり。

現象

以下、遷移時の挙動(個人のアプリではないのでスレスレで公開しています、すいません、、。)
move.gif
ナビゲーションバーの下に隙間ができているのが見えるだろうか。
行ったり来たりするたびに、その隙間部分がカクついている

もしかして、、、safeArea?

iphone Xに関してググると、だいたいこいつがヒットする。
iOS11のバグ修正を行うに当たって気になったレイアウト関連の変更点
iOS11 で UIScrollView の contentInsetがずれる問題

ContentInsetAdjustmentBehaviorをいじればなんとかなるんじゃね!と思いきやダメでした、、、。
それもそのはず、前書きでも書きましたが、iphone Xじゃなくても古い端末でiOS11にしていると発生するので。

原因は何、、、?

結果からいうと、ナビゲーションバーにデフォルトの領域(高さ)以上の要素を突っ込むと起こります。
もっというと、ナビゲーションバーのtitleViewにセットすると起こります。

let searchBar = UISearchBar()
navigationItem.titleView = searchBar

上記のアニメーション挙動は、上のコードで発生しています。
これは憶測なのでなんとも言えませんが、UISearchBarの高さがデフォルトで決まっているので、そちらが優先されている模様です。

解決策

解決策が2つあったのでご紹介します(2つとも実際に確認済み)

方法①動的にconstraintを調整

動的にconstraintを操作することで調整しています。

let searchBar = UISearchBar()

if #available(iOS 11.0, *) {
   searchBar.heightAnchor.constraint(equalToConstant: 44).isActive = true
}

navigationItem.titleView = searchBar

※44はナビゲーションのデフォルトの高さ

方法②UIViewをワンクッション挟む

直接セットせず、ラッパーとしてUIViewをワンクッション挟んでからセットします。
ワンクッション挟むUIViewの大きさを先に決めてそこに描画(addSubview)する方法です。

let searchBar = UISearchBar()

if #available(iOS 11.0, *) {
  let wrapperView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: view.bounds.width, height: 44))
  searchBar.frame = wrapperView.bounds
  wrapperView.addSubview(searchBar)

  navigationItem.titleView = wrapperView           
}

一応、分岐処理をしっかり書くと以下

navigationItem.titleView = {
  let searchBar = UISearchBar()

  if #available(iOS 11.0, *) {
    let wrapperView = UIView(frame: CGRect(x: 0.0, y: 0.0, width: view.bounds.width, height: 44))
    searchBar.frame = wrapperView.bounds
    wrapperView.addSubview(searchBar)
    return wrapperView

  } else {
    return searchBar

  }
}()

※44はナビゲーションのデフォルトの高さ

注意点

どちらにも言えますが、高さを削ってしまうので、少し窮屈な見た目になってしまいます。

左:調整前 / 右:調整後
スクリーンショット 2017-11-15 1.12.20.png

結果

高さを調節することで、遷移先と同じ高さになり、結果としてカクツキがなくなっているはずです。
別途良い方法があればご教授いただきたいです。

余談

今回たまたま発見したのですが、
デバッグ時に、たまにView構造確認のために、Xcodeの以下の機能を使用しており、

スクリーンショット 2017-11-15 0.19.51.png

Xcode9からちょっと進化してました!

スクリーンショット 2017-11-13 18.06.54.png

余白部分とか、はみ出ている部分にクラス名が表示されるようになってました!
これで、原因不明の余白が出た際に視覚的にもわかり、作業が捗るかと思います!

良いXcodeライフを!

参考

UISearchBar increases navigation bar height in iOS 11
Can’t set titleView in the center of navigation bar because back button


『 Swift 』Article List
Category List

Eye Catch Image
Read More

Androidに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

AWSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Bitcoinに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

CentOSに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

dockerに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

GitHubに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Goに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Javaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

JavaScriptに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Laravelに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Pythonに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Rubyに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Scalaに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Swiftに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Unityに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Vue.jsに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

Wordpressに関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。

Eye Catch Image
Read More

機械学習に関する現役のエンジニアのノウハウ・トレンドのトピックなど技術的な情報を提供しています。コード・プログラムの丁寧な解説をはじめ、初心者にもわかりやすいように写真や動画を多く使用しています。