【问题标题】:Centering an UIImage (horizontally or vertically) with programatic constraints UIKit使用编程约束 UIKit 使 UIImage 居中(水平或垂直)
【发布时间】:2018-05-20 23:56:27
【问题描述】:

我试图在 UIKit 的水平行中简单地将 5x5 图像居中。

在视图的左侧,我有一个 UIView,它的左边距和上边距附加到父视图,并且具有固有的宽度和高度。它可能不会完全填满包含视图的一半(因此假设它的宽度是任意的)。

在它的右侧(但在同一行)我试图将一个 UIImage 放在左侧对象右侧的空白区域中。这意味着它水平和垂直居中,但在另一个对象的右侧。

我真的不知道如何实现这一点,尽管我认为实现这一点的方式越来越多,也越来越少。

【问题讨论】:

    标签: ios uikit constraints


    【解决方案1】:

    在为它设置适当的宽度和高度后,设置这些约束

    smallView.centerYAnchor.constraint(equalTo: greenView.centerYAnchor).isActive = true
    smallView.centerXAnchor.constraint(equalTo: parentView.centerXAnchor, multiplier:1.5).isActive = true
    

    【讨论】:

    • 虽然它在图中看起来确实像它,但不能保证绿色对象正好是屏幕的一半,因此 1.5x 中心锚在此处不起作用。
    • 要么在绿色视图的右侧添加一个透明视图并根据它居中smallView,要么根据你设置的greenView的宽度进行计算
    【解决方案2】:

    这很简单。您将使用布局指南来定义水平空间的开始和结束。然后,您将在布局指南中心居中您的视图。我已经包含了layoutMarginsGuide,可以通过设置container.layoutMargins来调整。

    let containerView = UIView()
    containerView.backgroundColor = .gray
    // Add view to parent ...
    
    let greenView = UIView()
    greenView.translatesAutoresizingMaskIntoConstraints = false
    greenView.backgroundColor = .green
    containerView.addSubview(greenView)
    greenView.topAnchor.constraint(equalTo: containerView.layoutMarginsGuide.topAnchor).isActive = true
    greenView.leadingAnchor.constraint(equalTo: containerView.layoutMarginsGuide.leadingAnchor).isActive = true
    
    let horizontalGuide = UILayoutGuide()
    containerView.addLayoutGuide(horizontalGuide)
    horizontalGuide.leadingAnchor.constraint(equalTo: greenView.trailingAnchor, constant: containerView.layoutMargins.left).isActive = true
    horizontalGuide.trailingAnchor.constraint(equalTo: containerView.layoutMarginsGuide.trailingAnchor).isActive = true
    
    let imageView = UIImageView()
    imageView.translatesAutoresizingMaskIntoConstraints = false
    imageView.backgroundColor = .red
    containerView.addSubview(imageView)
    imageView.centerXAnchor.constraint(equalTo: horizontalGuide.centerXAnchor).isActive = true
    imageView.centerYAnchor.constraint(equalTo: greenView.centerYAnchor).isActive = true
    

    【讨论】:

      猜你喜欢
      • 2017-08-24
      • 2016-06-30
      • 2020-03-10
      • 2012-12-03
      • 2012-05-09
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-07-19
      相关资源
      最近更新 更多