为什么UIImageView.content模式被忽略 [英] Why is UIImageView.content mode ignored

问题描述

我有一个带有三个子视图的垂直UIStackView，我想将所有三个子视图中的内容居中.我正在以编程方式进行所有操作，而不是使用情节提要.我从尝试使用情节提要开始，仅添加了最后一个arrangedSubview，但这使事情变得更加复杂.

I have a vertical UIStackView with three subviews and I want to center the content in all three of these subviews. I'm doing this all programmatically, not with the storyboard. I started by trying to use the storyboard and only adding the last arrangedSubview but that complicated things more.

我尝试在堆栈视图本身，每个子视图以及所有这些子视图上同时设置".contentMode"(如下所示).它们没有任何影响-无论我做什么，这三个子视图中的所有内容都保持与容器视图齐平.我还确保根据我在另一个线程中看到的内容，未在IB中检查自动调整子视图"的大小，但这也没有影响.

I've tried setting the '.contentMode` on the stack view itself, on each of the subviews, and all of them at the same time (as seen below). None of them have any affect - everything in these three subviews remains flush left against their container views no matter what I do. I also made sure Auto Resize Subviews was not checked in IB based on something I saw in another thread but it didn't make a difference either.

有人可以告诉我我在做什么错吗?谢谢.

Can anyone tell what I'm doing wrong here? Thanks.

override func viewDidLoad() {
    super.viewDidLoad()
    let horizontalCenter = self.view.frame.width/2
    let verticalCenter = self.view.frame.height/2

    // the stackview that lives in 'emptyLogView'
    let liftLogStackView = UIStackView(frame: CGRect(x: horizontalCenter, y: verticalCenter, width: 320, height: 480))
    liftLogStackView.axis = .Vertical
    liftLogStackView.distribution = UIStackViewDistribution.FillEqually
    liftLogStackView.contentMode = .Center

    // 1st subview
    let weightsImage = UIImage(named: "weights_image")
    let weightsContainerView = UIImageView(image: weightsImage)
    weightsContainerView.frame = CGRect(x: 0, y: 0, width: 320, height: 77)
    weightsContainerView.contentMode = .Center

    // 2nd subview
    let noLiftsMessageContainerView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 40))
    let noLiftsMessage = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 20))
    noLiftsMessage.text = "You don't have any lifts saved."
    noLiftsMessage.textColor = UIColor(hexString: "b7b7b7")
    noLiftsMessageContainerView.contentMode = .Center

    // 3rd subview
    let letsDoThisContainerView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 40))
    let doThisButton = UIButton(frame: CGRect(x: 0, y: 0, width: 120, height: 36))
    doThisButton.setTitle("Let's do this.", forState: .Normal)
    doThisButton.setTitleShadowColor(UIColor.blackColor(), forState: .Highlighted)
    doThisButton.layer.cornerRadius = 6
    doThisButton.layer.backgroundColor = UIColor(hexString: "b7b7b7").CGColor
    doThisButton.layer.borderWidth = 0
    letsDoThisContainerView.contentMode = .Center

    noLiftsMessageContainerView.addSubview(noLiftsMessage)
    letsDoThisContainerView.addSubview(doThisButton)

    liftLogStackView.addArrangedSubview(weightsContainerView)

    liftLogStackView.addArrangedSubview(noLiftsMessageContainerView)

    liftLogStackView.addArrangedSubview(letsDoThisContainerView)

    liftLogStackView.translatesAutoresizingMaskIntoConstraints = false

    emptyLogView.addSubview(liftLogStackView)

    let horizontalCenterConstraint = NSLayoutConstraint(item: liftLogStackView, attribute: NSLayoutAttribute.CenterX, relatedBy: NSLayoutRelation.Equal, toItem: emptyLogView, attribute: NSLayoutAttribute.CenterX, multiplier: 1, constant: 0)

    let verticalCenterConstraint = NSLayoutConstraint(item: liftLogStackView, attribute: NSLayoutAttribute.CenterY, relatedBy: NSLayoutRelation.Equal, toItem: emptyLogView, attribute: NSLayoutAttribute.CenterY, multiplier: 1, constant: 0)

    emptyLogView.addConstraint(horizontalCenterConstraint)
    emptyLogView.addConstraint(verticalCenterConstraint)
}

更新

我在一个6岁的SO线程上发现了另外一件事，但是它也不起作用:

I found one more thing on a 6-yr old SO thread to try but it didn't work either:

    let letsDoThisContainerView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 40))
    let doThisButton = UIButton(frame: CGRect(x: 0, y: 0, width: 120, height: 36))
    doThisButton.setTitle("Let's do this.", forState: .Normal)
    doThisButton.setTitleShadowColor(UIColor.blackColor(), forState: .Highlighted)
    doThisButton.layer.cornerRadius = 6
    doThisButton.layer.backgroundColor = UIColor(hexString: "b7b7b7").CGColor
    doThisButton.layer.borderWidth = 0

    // this is the new thing
    let contentAlignmentMode = UIViewContentMode.Center
    liftLogStackView.contentMode = contentAlignmentMode

我还尝试了将contentMode设置为.Right的其他方法，但没有任何反应.无论我做什么，这些元素都被卡在同一个位置.

I also tried different setting the contentMode to .Right and nothing happen. The elements are all stuck flush left no matter what I do.

更新2

我找到了答案的一部分(我认为).看来UIStackViewAlignment是我所需要的.所以我现在有这个:

I found part of the answer (I think). It looks like UIStackViewAlignment is what I need. So I now have this:

    let liftLogStackView = UIStackView(frame: CGRect(x: horizontalCenter, y: verticalCenter, width: 320, height: 480))
    liftLogStackView.axis = .Vertical
    liftLogStackView.distribution = UIStackViewDistribution.FillEqually

    // Finally, this has an affect on the alignment
    liftLogStackView.alignment = UIStackViewAlignment.Center

但是看起来并没有居中，而是几乎右对齐(蓝色框是堆栈视图):

But instead of being centered, it looks like it's almost right aligned (the blue box is the stack view):

在我看来，这些视图不知道它们所在的父视图的范围，但是我认为我正在正确地创建堆栈视图及其子视图.

It looks to me like the views don't know the bounds of the parent views they're in but I think I'm creating the stack view and its subviews correctly.

有什么想法吗?

推荐答案

但是我认为我正在正确地创建堆栈视图及其子视图

but I think I'm creating the stack view and its subviews correctly

再想一想.您创建它们是完全错误的.让我们考虑一下这种排列的视图:

Think again. You are creating them completely wrong. Let's consider just this one arranged view:

let weightsImage = UIImage(named: "weights_image")
let weightsContainerView = UIImageView(image: weightsImage)
weightsContainerView.frame = CGRect(x: 0, y: 0, width: 320, height: 77)

您在这里做错了两件事(也许三件事，这取决于您的计算方式).

You are doing two things wrong here (maybe three, depending how you count).

• 您不得设置任何框架.那是没有意义的.这是一个堆栈视图！它通过约束来完成其工作.约束与框架相反.您使用其中一个.

• You must not set any frames. That is meaningless. This is a stack view! It does its work through constraints. Constraints are the opposite of frames; you use one or the other.

您必须设置约束！您尚未赋予图像视图任何约束.因此，它将只需要将其自身设置为视图的大小即可.特别是，堆栈视图将执行的所有工作均基于其排列视图的intrinsicContentSize.您需要提供足够的信息以使您按预期的方式工作.

You must set constraints! You have not given the image view any constraints. So it will will simply want to set itself to the size of the view. In particular, all the work that the stack view will do is based on the intrinsicContentSize of its arranged views. You need to provide enough information to make that work the way you intend.

您已经忘记将图像视图的translatesAutoresizingMaskIntoConstraints设置为false.因此，由堆栈视图施加的约束将与图像视图的自动调整大小冲突.实际上，我非常确定，如果您在运行项目时仅在控制台中查看，就会看到，运行时会在尖叫冲突！".在你身上.

You have forgotten to set the image view's translatesAutoresizingMaskIntoConstraints to false. Thus, the constraints that will be imposed by the stack view will conflict with the image view's autoresizing. In fact, I am pretty sure that if you just look in the console when you run your project, you will see that the runtime is screaming "Conflict!" at you.

我正在以编程方式完成所有操作，而不是使用情节提要

I'm doing this all programmatically, not with the storyboard

这是一个崇高的目标，但我建议您最好在情节提要(或xib文件)中执行此操作，因为与所有代码相比，这样做会做得更好.

That is a noble goal, but I would suggest that you'd be better off doing it in the storyboard (or a xib file), because it will do a better job of all this than your code is doing.

这篇关于为什么UIImageView.content模式被忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！