ios - 给大标题导航栏添加一个按钮

Question

总结

我想在大标题导航栏上添加一个按钮，例如 App Store 的帐户按钮。

所需的流量:

1. 按钮仅在启用large titles 时可见
2. 当用户在 View 内滚动时，允许从大标题过渡到普通标题。

注意:我使用 Storyboard。

Answer 1

在 this Medium article 上找到了答案董秘。

private let imageView = UIImageView(image: UIImage(named: "image_name"))

/// WARNING: Change these constants according to your project's design
private struct Const {
  /// Image height/width for Large NavBar state
  static let ImageSizeForLargeState: CGFloat = 40
  /// Margin from right anchor of safe area to right anchor of Image
  static let ImageRightMargin: CGFloat = 16
  /// Margin from bottom anchor of NavBar to bottom anchor of Image for Large NavBar state
  static let ImageBottomMarginForLargeState: CGFloat = 12
  /// Margin from bottom anchor of NavBar to bottom anchor of Image for Small NavBar state
  static let ImageBottomMarginForSmallState: CGFloat = 6
  /// Image height/width for Small NavBar state
  static let ImageSizeForSmallState: CGFloat = 32
  /// Height of NavBar for Small state. Usually it's just 44
  static let NavBarHeightSmallState: CGFloat = 44
  /// Height of NavBar for Large state. Usually it's just 96.5 but if you have a custom font for the title, please make sure to edit this value since it changes the height for Large state of NavBar
  static let NavBarHeightLargeState: CGFloat = 96.5
}

/**
 Setup the image in navbar to be on the same line as the navbar title
 */
private func setupUI() {
  navigationController?.navigationBar.prefersLargeTitles = true
  title = "Large Title"

  // Initial setup for image for Large NavBar state since the the screen always has Large NavBar once it gets opened
  guard let navigationBar = self.navigationController?.navigationBar else { return }

  navigationBar.addSubview(imageView)

  // setup constraints
  imageView.layer.cornerRadius = Const.ImageSizeForLargeState / 2
  imageView.clipsToBounds = true
  imageView.translatesAutoresizingMaskIntoConstraints = false
  NSLayoutConstraint.activate([
    imageView.rightAnchor.constraint(equalTo: navigationBar.rightAnchor, constant: -Const.ImageRightMargin),
    imageView.bottomAnchor.constraint(equalTo: navigationBar.bottomAnchor, constant: -Const.ImageBottomMarginForLargeState),
    imageView.heightAnchor.constraint(equalToConstant: Const.ImageSizeForLargeState),
    imageView.widthAnchor.constraint(equalTo: imageView.heightAnchor)
  ])
}

override func viewDidLoad() {
  super.viewDidLoad()

  // setup Settings navigation bar button
  setupUI()
}

如果您想在导航到此 View Controller 的子级时隐藏/显示图像:

/**
 Show or hide the image from NavBar while going to next screen or back to initial screen

 - parameter show: show or hide the image from NavBar
 */
private func showImage(_ show: Bool) {
  UIView.animate(withDuration: 0.4) {
    self.settingsImageView.alpha = show ? 1.0 : 0.0
  }
}

override func viewWillDisappear(_ animated: Bool) {
  super.viewWillDisappear(animated)
  showImage(false)
}

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

如果这对您有帮助，您可以查看实际文章并给作者一两下鼓掌