我在UIImageView
内部有一个UIView
,它在水平UIStackView
内部(带有.fillEqually选项)。水平UIStackView
始终具有两个视图。水平UIStackView
从其最高子UIView
获得高度。
我要实现的目标:在示例屏幕快照中,考虑到多线视图,UIImageView的尺寸较大,因为它的图像尺寸较大。但是,我希望图像视图缩小到适合左(多行标签)视图的大小。这显示在第二个屏幕截图中。图片的高度应通过右侧的红色椭圆线显示。
带有标签类的UIImageView:
@IBDesignable class LabelWithImage: UIView {
var topMargin: CGFloat = 0.0
var verticalSpacing: CGFloat = 10.0
var bottomMargin: CGFloat = 0.0
@IBInspectable var labelText: String = "" { didSet { updateView() } }
@IBInspectable var image: UIImage = UIImage(named: "harcamagrafik")! { didSet { updateView() } }
fileprivate var label: UILabel!
fileprivate var imageView: UIImageView!
override init(frame: CGRect) {
super.init(frame: frame)
setUpView()
}
required public init?(coder: NSCoder) {
super.init(coder:coder)
setUpView()
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
setUpView()
}
func setUpView() {
label = UILabel()
label.font = UIFont.init(name: "Metropolis-Medium", size: 12)
label.numberOfLines = 1
label.lineBreakMode = NSLineBreakMode.byWordWrapping
label.textColor = UIColor.init(rgb: 0x9B9B9B)
imageView = UIImageView(image: image)
imageView.contentMode = .scaleAspectFill
imageView.clipsToBounds = true
addSubview(label)
addSubview(imageView)
label .translatesAutoresizingMaskIntoConstraints = false
imageView.translatesAutoresizingMaskIntoConstraints = false
setContentHuggingPriority(.init(rawValue: 1000.0), for: .vertical)
setContentCompressionResistancePriority(.init(rawValue: 10.0), for: .vertical)
label.leftAnchor.constraint(equalTo: leftAnchor, constant: 0.0).isActive = true
// imageView.leftAnchor.constraint(equalTo: leftAnchor, constant: 0.0).isActive = true
label.rightAnchor.constraint(equalTo: rightAnchor, constant: 0.0).isActive = true
// imageView.rightAnchor.constraint(equalTo: rightAnchor, constant: 0.0).isActive = true
imageView.centerXAnchor.constraint(equalTo: centerXAnchor).isActive = true
label.topAnchor.constraint(equalTo: topAnchor, constant: topMargin).isActive = true
imageView.topAnchor.constraint(equalTo: label.bottomAnchor, constant: verticalSpacing).isActive = true
bottomAnchor.constraint(equalTo: imageView.bottomAnchor, constant: bottomMargin).isActive = true
// call common "refresh" func
updateView()
}
func updateView() {
label.text = labelText
accessibilityIdentifier = labelText
imageView.image = image
label.sizeToFit()
}
}
水平StackView:
private let topHorizontalStackView: UIStackView = {
let s = UIStackView()
s.distribution = .fillEqually
s.spacing = 10
s.axis = .horizontal
s.alignment = .fill
s.translatesAutoresizingMaskIntoConstraints = false
return s
}()
编辑,我尝试为LabelWithImage视图设置高度限制。现在,看起来还可以,但是当我打开调试器时,它说视图的高度不明确。
leftView.layoutIfNeeded() //It is the view with multilineLabel.
view.heightAnchor.constraint(equalToConstant: leftView.bounds.height).isActive = true
我要在屏幕快照中显示的内容:
编辑2 在我优先使用@Don所说的标签并将图像视图的压缩率设置为低后,我得到了以下结果。下方代码仍处于活动状态
leftView.layoutIfNeeded() //It is the view with multilineLabel.
view.heightAnchor.constraint(equalToConstant: leftView.bounds.height).isActive = true
如果我给labelWithImageView指定特定的常量为(40是UIStackView的顶部和底部插图);
view.heightAnchor.constraint(equalToConstant: leftView.bounds.height - 40).isActive = true
顶部垂直UIStackView内部的视图显示了雄心勃勃的布局。 (您无法在屏幕截图中看到该视图,因为我认为这些视图不相关。)