Bottom Bar を Tab Bar から Tool Bar へ切り替える方法

Question

実現したいこと

swiftでiOSアプリを作成しています。
iOS13の写真アプリ（標準搭載）の「アルバム」タブで「ピープルと撮影地」にある「撮影地」フォルダを選択すると，Bottom Bar が Tab Bar から Tool Bar へ滑らかに変化します。このような画面遷移を実装するための方法を思いつきましたら，ぜひご紹介ください。

Answer 1

推測ですが、 両方とも UIToolBar で実装し、setItems(_:animated:)でアニメーションさせているような気がします。

• setItems(_:animated:) Sets the items on the toolbar by animating the changes.

animated
A Boolean value if set to true animates the transition to the items; otherwise, does not.

BarButton に配置された絵文字を押すたびに、二つの状態をトランジッション（transition）させながら変化させています。

import UIKit

class ViewController: UIViewController {
    var toolBar: UIToolbar!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        toolBar = UIToolbar(frame: CGRect(x: 0, y: 0, width: view.bounds.width, height: 35))
        
        // 初期状態のボタンをセット
        statusBarOne()
        
        view.addSubview(toolBar)
    }
    
    override func viewWillLayoutSubviews() {
        toolBar.translatesAutoresizingMaskIntoConstraints = false
        toolBar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
        toolBar.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true
        toolBar.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
    }
    
    func statusBarOne() {
        let leftButton = UIBarButtonItem(title: "????", style: .plain, target: self, action: #selector(barButtonOneTapped(_:)))
        let spacer = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        let rightButton = UIBarButtonItem(title: "☕️", style: .plain, target: self, action: #selector(barButtonOneTapped(_:)))
        toolBar.setItems([leftButton, spacer, rightButton], animated: true)
    }
    
    func statusBarTwo() {
        let centerButton = UIBarButtonItem(title: "????", style: .plain, target: self, action: #selector(barButtonTwoTapped(_:)))
        let spacer = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        toolBar.setItems([spacer, centerButton, spacer], animated: true)
    }
    
    
    @objc func barButtonOneTapped(_ sender: UIBarButtonItem) {
        // do something here
        print(#function)
        statusBarTwo()
    }
    
    @objc func barButtonTwoTapped(_ sender: UIBarButtonItem) {
        // do something here
        print(#function)
        statusBarOne()
    }
}

Comments

[polypoly]

ご指摘の通り，UIToolBarを使ってUITabBarと同等のデザインを実装できました。UITabBarのような画面切り替えをUIToolBarで行うのはやや大変ですが，なんとかなりそうです。ありがとうございます。

[polypoly]

Storyboard 上でTabBarCobtrollerを設置しておきながら、コード上ではTabBarを一切非表示にして、かわりにToolBarをコードで設置するのが、デザイン面でも機能面でも最適でした。TabBarが無くてもコードでタブ切り替えはできるので。