在 Navigation titleView 中居中两个视图

Question

我希望我的应用程序表现如下：

让我的 NavigationItem.titleView 具有准确的行为很重要

到目前为止，我遵循了这些步骤：

我正在我的应用程序中以编程方式创建三个视图：

(1) container => 持有 (2) 和 (3) => 附加了一个手势识别器

   let container = UIView(frame: CGRectMake(0,0,200,40))

(2) imageContainer => 有图片

        let imageContainer = UIImageView(frame: CGRectMake(0, 0, 30, 30))
        imageContainer.image = UIImage(named: "mock.jpg")

(3) textContainer => 有一些文字

        let textContainer = UILabel(frame: CGRectMake(0,0, 180, 20))
        textContainer.text = "Group xY"

下面我设置图像的中心以对齐它们：

    imageContainer.center = CGPointMake(container.frame.size.width  / 2,
        container.frame.size.height / 2)
textContainer.center = CGPointMake(container.frame.size.width  / 2,
            container.frame.size.height / 2)

现在我将所有子视图添加到我的视图和设置中

self.navigationItem.titleView = (1)

启动应用显示，titleView 的元素没有正确对齐

有没有办法正确地实现这个确切的行为？

注意：不要担心圆形图像。我知道如何实现这一点。

Answer 1

您应该将 textContainer 的大小设置为更接近文本的边界。您可以通过调用sizeToFit 来执行此操作，然后您需要将 imageContainer 设置在文本的左侧，因此图像的中心应该是图像宽度的一半加上文本开头的缓冲区。你可以通过说imageContainer.center = CGPointMake(textContainer.frame.minX - imageContainer.frame.size.width * 0.5 - buffer,container.frame.size.height / 2) 来做到这一点。您的代码应类似于：

let container = UIView(frame: CGRectMake(0,0,200,40))
let buffer:CGFloat = 8.0
let maxWidth:CGFloat = 120.0

let imageContainer = UIImageView(frame: CGRectMake(0, 0, 30, 30))
imageContainer.image = UIImage(named: "profile.jpg")

let textContainer = UILabel(frame: CGRectMake(0,0, 180, 20))
textContainer.text = "Group xY"
textContainer.adjustsFontSizeToFitWidth = true
textContainer.minimumScaleFactor = 0.95

textContainer.sizeToFit()
textContainer.frame.size.width = min(maxWidth, textContainer.frame.size.width)
textContainer.center = CGPointMake(container.frame.size.width  / 2,
                                   container.frame.size.height / 2)
imageContainer.center = CGPointMake(textContainer.frame.minX - imageContainer.frame.size.width * 0.5 - buffer,
                                    container.frame.size.height / 2)

container.addSubview(imageContainer)
container.addSubview(textContainer)

这将为您的容器提供。