带有大标题iOS 11的导航栏的图像 [英] Image for Navigation Bar with Large Title iOS 11

问题描述

AppStore应用程序在带有大标题的NabBar的右侧具有一个带有图像的图标:

如果有人知道如何实现或想法如何实现它，将非常感谢.

顺便说一句:无法在UIBarButtonItem内为UIButton设置图像.已经试过了.该按钮将停留在屏幕顶部:

解决方案

经过几个小时的编码，我终于设法使其正常工作.我还决定编写一个详细教程:

在GitHub上完成项目:链接.

要完成此任务，只需 5个步骤:

第1步:创建图片

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

第2步:添加常量

 ///警告:根据项目的设计更改这些常量私有结构常量{///大型NavBar状态的图像高度/宽度静态让ImageSizeForLargeState:CGFloat = 40///从安全区域的右锚到图像的右锚的边距静态让ImageRightMargin:CGFloat = 16///对于较大的NavBar状态，从NavBar的底部锚点到图像的底部锚点的边距静态让ImageBottomMarginForLargeState:CGFloat = 12///对于较小的NavBar状态，从NavBar的底部锚点到图像的底部锚点的边距静态让ImageBottomMarginForSmallState:CGFloat = 6///小型NavBar状态的图像高度/宽度静态让ImageSizeForSmallState:CGFloat = 32///处于较小状态的NavBar的高度.通常只有44静态让NavBarHeightSmallState:CGFloat = 44///处于较大状态的NavBar的高度.通常只有96.5，但如果标题使用自定义字体，请确保编辑此值，因为它会更改NavBar的Large状态的高度静态让NavBarHeightLargeState:CGFloat = 96.5} 

第3步:设置用户界面:

  private func setupUI(){navigationController?.navigationBar.prefersLargeTitles = truetitle =大标题"//大型NavBar状态的图像的初始设置，因为打开后屏幕始终具有大型NavBar警卫队让navigationBar = self.navigationController?.navigationBar else {return}navigationBar.addSubview(imageView)imageView.layer.cornerRadius = Const.ImageSizeForLargeState/2imageView.clipsToBounds = trueimageView.translatesAutoresizingMaskIntoConstraints = falseNSLayoutConstraint.activate([imageView.rightAnchor.constraint(equalTo:navigationBar.rightAnchor，常数:-Const.ImageRightMargin)，imageView.bottomAnchor.constraint(equalTo:navigationBar.bottomAnchor，常数:-Const.ImageBottomMarginForLargeState)，imageView.heightAnchor.constraint(equalToConstant:Const.ImageSizeForLargeState)，imageView.widthAnchor.constraint(等于:imageView.heightAnchor)])} 

第4步:创建图像大小调整方法

 私有函数moveAndResizeImage(用于高度:CGFloat){让系数:CGFloat = {让delta =高度-Const.NavBarHeightSmallState让heightDifferenceBetweenStates =(Const.NavBarHeightLargeState-Const.NavBarHeightSmallState)返回增量/heightDifferenceBetweenStates}()让因子= Const.ImageSizeForSmallState/Const.ImageSizeForLargeState让规模:CGFloat = {让sizeAddendumFactor = coeff *(1.0-因子)返回最小值(1.0，sizeAddendumFactor +因子)}()//大小状态图标之间的差异值let sizeDiff = Const.ImageSizeForLargeState *(1.0-因子)//8.0let yTranslation:CGFloat = {///此值=14.它等于12和6之差(大小状态的底边距).还会增加8.0(图像变小时的大小差异)让maxYTranslation = Const.ImageBottomMarginForLargeState-Const.ImageBottomMarginForSmallState + sizeDiff返回max(0，min(maxYTranslation，(maxYTranslation-coeff *(Const.ImageBottomMarginForSmallState + sizeDiff))))}()令xTranslation = max(0，sizeDiff-coeff * sizeDiff)imageView.transform = CGAffineTransform.identity.scaledBy(x:标度，y:标度).translatedBy(x:x平移，y:y平移)} 

第5步:

  override func scrollViewDidScroll(_ scrollView:UIScrollView){守卫let height = navigationController?.navigationBar.frame.height else {return}moveAndResizeImage(for:height)} 

希望这很清楚，对您有帮助！如果您还有其他问题，请在评论中让我知道.

AppStore app has an icon with an image on the right side of the NabBar with Large Title:

Would really appreciate if anyone knows how to implement it or ideas on how to do it.

BTW: Setting an image for UIButton inside of UIBarButtonItem won't work. Tried already. The button sticks to the top of the screen:

解决方案

After several hours of coding, I finally managed to make it work. I also decided to write a detailed tutorial: link. Follow it in case you prefer very detailed instructions.

Demo:

Complete project on GitHub: link.

Here are 5 steps to accomplish it:

Step 1: Create an image

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

Step 2: Add Constants

/// 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
}

Step 3: setup UI:

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)
    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)
        ])
}

Step 4: create image resizing method

private func moveAndResizeImage(for height: CGFloat) {
    let coeff: CGFloat = {
        let delta = height - Const.NavBarHeightSmallState
        let heightDifferenceBetweenStates = (Const.NavBarHeightLargeState - Const.NavBarHeightSmallState)
        return delta / heightDifferenceBetweenStates
    }()

    let factor = Const.ImageSizeForSmallState / Const.ImageSizeForLargeState

    let scale: CGFloat = {
        let sizeAddendumFactor = coeff * (1.0 - factor)
        return min(1.0, sizeAddendumFactor + factor)
    }()

    // Value of difference between icons for large and small states
    let sizeDiff = Const.ImageSizeForLargeState * (1.0 - factor) // 8.0

    let yTranslation: CGFloat = {
        /// This value = 14. It equals to difference of 12 and 6 (bottom margin for large and small states). Also it adds 8.0 (size difference when the image gets smaller size)
        let maxYTranslation = Const.ImageBottomMarginForLargeState - Const.ImageBottomMarginForSmallState + sizeDiff
        return max(0, min(maxYTranslation, (maxYTranslation - coeff * (Const.ImageBottomMarginForSmallState + sizeDiff))))
    }()

    let xTranslation = max(0, sizeDiff - coeff * sizeDiff)

    imageView.transform = CGAffineTransform.identity
        .scaledBy(x: scale, y: scale)
        .translatedBy(x: xTranslation, y: yTranslation)
}

Step 5:

override func scrollViewDidScroll(_ scrollView: UIScrollView) {
    guard let height = navigationController?.navigationBar.frame.height else { return }
    moveAndResizeImage(for: height)
}

Hope it's clear and helps you! Please let me know in comments if you have any additional questions.

这篇关于带有大标题iOS 11的导航栏的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！