ios - 带有异步加载图像的按钮作为 UINavigationItem 中的 titleView

Question

我正在尝试从 Tinder 应用程序重现这种导航栏:

所以我尝试将按钮设置为 UINavigationItem 的 titleView，并带有标题和图像。我使用以下类别来对齐图像下的标题:

extension UIButton {

    func centerButtonVertically(padding: CGFloat = 6.0) {
        guard
            let imageViewSize = self.imageView?.frame.size,
            let titleLabelSize = self.titleLabel?.frame.size else {
                return
        }

        let totalHeight = imageViewSize.height + titleLabelSize.height + padding

        self.imageEdgeInsets = UIEdgeInsets(
            top: -(totalHeight - imageViewSize.height),
            left: 0.0,
            bottom: 0.0,
            right: -titleLabelSize.width
        )

        self.titleEdgeInsets = UIEdgeInsets(
            top: 0.0,
            left: -imageViewSize.width,
            bottom: -(totalHeight - titleLabelSize.height),
            right: 0.0
        )

        self.contentEdgeInsets = UIEdgeInsets(
            top: 0.0,
            left: 0.0,
            bottom: titleLabelSize.height,
            right: 0.0
        )
    }
}

我正在使用 Kingfisher 下载图像、调整图像大小并使其圆整:

override func viewDidLoad() {
    super.viewDidLoad()

    let rounded = RoundCornerImageProcessor(cornerRadius: 15)
    let downsampling = ResizingImageProcessor(referenceSize: CGSize(width: 30.0, height: 30.0), mode: .aspectFit)
    matchAvatarButton.setTitle(self.match.shortName, for: .normal)
    matchAvatarButton.contentMode = .scaleAspectFit
    matchAvatarButton.kf.setImage(with: self.match.pictureUrls[0] as Resource, for: .normal, placeholder: nil, options: [.processor(downsampling), .processor(rounded)])
    matchAvatarButton.centerButtonVertically()
    ...
}

请注意，该按钮被设置为 Storyboard 中导航栏的 titleView，然后我通过 viewDidLoad 中的导出引用修改该按钮。

但结果与我想要达到的目标相去甚远:

图像保持矩形，我希望它是圆形的。由于某种奇怪的原因，我看不到标题。

知道我错过了什么吗？

Answer 1

结果如下:

1. 在 Storyboard的导航栏中放置一个 UIView 而不是一个按钮。
2. 将按钮和标题放在该 View 中。 (将按钮类型设置为自定义)
3. 获取导航栏高度
4. 为 RoundCornerImageProcessor 使用自定义初始化

代码如下:

class ViewController: UIViewController {

        @IBOutlet weak var centerView: UIView!
        @IBOutlet weak var imageButton: UIButton!
        @IBOutlet weak var label: UILabel!

        override func viewDidLoad() {
            super.viewDidLoad()

            // Custom sizes
            let centerViewWidth = 120
            let imageSide = 30

            // Custom init gives a rounded image
            let rounded = RoundCornerImageProcessor(cornerRadius: CGFloat(imageSide/2), targetSize: CGSize(width: imageSide,height: imageSide), roundingCorners: RectCorner(arrayLiteral: .all), backgroundColor: .clear)
            // Downsample to two times the container size to get a better resolution
            let downsampling = ResizingImageProcessor(referenceSize: CGSize(width: imageSide*2, height: imageSide*2), mode: .aspectFit)


            // Setup frame and positions
            let centerViewHeight = Int(self.navigationController?.navigationBar.frame.height ?? 50)
            centerView.frame = CGRect(x: 0, y: 0, width: centerViewWidth, height: centerViewHeight)
            imageButton.frame = CGRect(x: centerViewWidth/2-imageSide/2, y: 0, width: imageSide, height: imageSide)
            label.frame = CGRect(x: 0, y: imageSide, width: centerViewWidth, height: centerViewHeight-imageSide)

            // Quick image download
            let imgUrl = "https://via.placeholder.com/150/771796"
            let resource = ImageResource(downloadURL: URL(string: imgUrl)!)
            imageButton.kf.setImage(with: resource, for: .normal, placeholder: nil, options: [.processor(downsampling), .processor(rounded)])

            // Setup title
            label.text = "Custom title!"
            label.textAlignment = .center

        }
    }