Кнопка с асинхронно загруженным изображением в качестве titleView в UINavigationItem

Question

Я пытаюсь воспроизвести такую ​​навигационную панель из приложения Tinder:

Поэтому я пытаюсь установить кнопку в качестве titleView моего UINavigationItem,с заголовком и изображением.Я использую следующую категорию для выравнивания заголовка под изображением:

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()
    ...
}

Обратите внимание, чтокнопка устанавливается как titleView моей панели навигации в раскадровке, а затем я изменяю кнопку с помощью ссылки на ее выход в viewDidLoad.

Но результат далек от того, чего я пытаюсь достичь:

Изображение остается прямоугольным, и мне бы хотелось, чтобы оно было по кругу.И по какой-то странной причине я не вижу названия.

Есть идеи о том, что мне не хватает?

Answer 1

Вот результат:

1. Поместите UIView в панель навигации в раскадровке вместо кнопки.
2. Поставьте кнопкуи заголовок внутри этого представления.(установите тип кнопки на пользовательский)
3. Получить NavigationBar Height
4. Использовать пользовательский init для 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

        }
    }