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

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

但是结果远非我要达到的目标：

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

有什么想念我的东西吗？

Answer 1

结果如下：

在情节提要的导航栏中放置UIView而不是按钮。
将按钮和标题放在该视图内。（将按钮类型设置为自定义）
获取NavigationBar的高度
为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

        }
    }

UINavigationItem中具有异步加载的图像作为titleView的按钮

1 个答案: