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

问题描述

我正在尝试从 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()
    ...
}

请注意，该按钮在情节提要中设置为我的导航栏的 titleView，然后我通过 viewDidLoad 中的出口引用修改该按钮。

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

图像保持矩形，我希望它是一个圆圈。由于某些奇怪的原因，我没有看到标题。

知道我缺少什么吗？

标签： iosuibuttonuikituinavigationbarkingfisher

结果如下：

在故事板的导航栏中放置一个 UIView 而不是按钮。
将按钮和标题放在该视图中。（将按钮类型设置为自定义）
获取导航栏高度
使用自定义初始化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

        }
    }

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

问题描述

解决方案

推荐阅读