iOS 11中如何用UIToolbar替换UITabBar？适配相册编辑场景

Hey there! Let's work through this problem to get that clean edit-mode experience you're aiming for—hiding the UITabBar and swapping in a custom UIToolbar makes perfect sense for a photo album-style app. Here's a step-by-step solution tailored to your view hierarchy (UIViewController → UINavigationController → UITabBarController):

Step 1: Set Up Your Custom Edit Toolbar #

First, declare a property for your toolbar in your view controller and initialize it in viewDidLoad. We'll make sure it's hidden by default and anchored to the bottom of the screen:

import UIKit

class PhotoAlbumViewController: UIViewController {
    // Declare the edit toolbar as a property
    private var editToolbar: UIToolbar!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Initialize the toolbar
        editToolbar = UIToolbar()
        editToolbar.translatesAutoresizingMaskIntoConstraints = false
        editToolbar.barStyle = .default
        
        // Add your desired bar button items (adjust these to match your needs)
        let cancelButton = UIBarButtonItem(barButtonSystemItem: .cancel, target: self, action: #selector(cancelEditMode))
        let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        let saveButton = UIBarButtonItem(barButtonSystemItem: .save, target: self, action: #selector(saveEdits))
        editToolbar.items = [cancelButton, flexibleSpace, saveButton]
        
        // Add the toolbar to your view
        view.addSubview(editToolbar)
        
        // Anchor the toolbar to the bottom of the safe area
        NSLayoutConstraint.activate([
            editToolbar.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            editToolbar.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            editToolbar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
            editToolbar.heightAnchor.constraint(equalToConstant: 44)
        ])
        
        // Hide the toolbar by default
        editToolbar.isHidden = true
    }
}

Step 2: Implement Edit Mode Toggle Logic #

Next, add methods to enter and exit edit mode. We'll use smooth animations to switch between the tab bar and toolbar, and adjust your content view's insets to avoid overlap:

extension PhotoAlbumViewController {
    // Call this when the user taps an "Edit" button
    @objc func enterEditMode() {
        UIView.animate(withDuration: 0.3) {
            // Hide the tab bar
            self.tabBarController?.tabBar.isHidden = true
            // Show the edit toolbar
            self.editToolbar.isHidden = false
        }
        
        // Adjust content inset for CollectionView/TableView (update to match your content view)
        if let collectionView = view.subviews.first(where: { $0 is UICollectionView }) as? UICollectionView {
            collectionView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 44, right: 0)
            collectionView.scrollIndicatorInsets = collectionView.contentInset
        }
        // For TableView:
        // if let tableView = view.subviews.first(where: { $0 is UITableView }) as? UITableView {
        //     tableView.contentInset = UIEdgeInsets(top: 0, left: 0, bottom: 44, right: 0)
        //     tableView.scrollIndicatorInsets = tableView.contentInset
        // }
    }
    
    @objc func cancelEditMode() {
        UIView.animate(withDuration: 0.3) {
            // Show the tab bar again
            self.tabBarController?.tabBar.isHidden = false
            // Hide the edit toolbar
            self.editToolbar.isHidden = true
        }
        
        // Reset content inset
        if let collectionView = view.subviews.first(where: { $0 is UICollectionView }) as? UICollectionView {
            collectionView.contentInset = .zero
            collectionView.scrollIndicatorInsets = .zero
        }
        // For TableView:
        // if let tableView = view.subviews.first(where: { $0 is UITableView }) as? UITableView {
        //     tableView.contentInset = .zero
        //     tableView.scrollIndicatorInsets = .zero
        // }
    }
    
    @objc func saveEdits() {
        // Add your save logic here
        cancelEditMode() // Exit edit mode after saving
    }
}

Key Notes to Avoid Issues #

• Animation Smoothness: Wrapping the visibility toggles in UIView.animate ensures the transition feels natural, matching the system's default animations.
• Safe Area Handling: Anchoring the toolbar to safeAreaLayoutGuide.bottomAnchor ensures it doesn't get covered by the home indicator on newer iPhones.
• Content Inset Adjustment: If your view uses a UICollectionView or UITableView, updating the contentInset prevents your photos from being hidden behind the toolbar in edit mode.

内容的提问来源于stack exchange，提问作者Tobias