如何在滚动视图中正确显示背景图像?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在滚动视图中正确显示背景图像?相关的知识,希望对你有一定的参考价值。
scaleAspectfit似乎不起作用。我正在尝试使我的整个背景图像略微适合背景,看到更多的图像。我添加了一个滚动视图,以便用户可以上下滚动一下以查看图像。
但是,我的应用程序太放大了图像。
lazy var scrollView: UIScrollView = {
let view = UIScrollView()
view.translatesAutoresizingMaskIntoConstraints = false
view.contentSize.height = 800
view.bounces = true
return view
}()
override func viewDidLoad(){super.viewDidLoad()
let backgroundImage = UIImageView(frame: UIScreen.main.bounds)
backgroundImage.image = UIImage(named: "backgroundImage.png")
backgroundImage.contentMode = UIViewContentMode.scaleAspectFit
view.insertSubview(backgroundImage, at: 0)
view.addSubview(scrollView)
scrollView.anchor(top: view.topAnchor, left: view.leftAnchor, bottom: view.bottomAnchor, right: view.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
scrollView.addSubview(backgroundImage)
backgroundImage.center(x: scrollView.centerXAnchor, y: scrollView.centerYAnchor)
}
//这只是我用于自动布局的扩展,如果你们想知道的话
extension UIView {
func anchor(top: NSLayoutYAxisAnchor?, left: NSLayoutXAxisAnchor?, bottom: NSLayoutYAxisAnchor?, right: NSLayoutXAxisAnchor?, paddingTop: CGFloat, paddingLeft: CGFloat, paddingBottom: CGFloat, paddingRight: CGFloat, width: CGFloat, height: CGFloat) {
translatesAutoresizingMaskIntoConstraints = false
if let top = top {
topAnchor.constraint(equalTo: top, constant: paddingTop).isActive = true
}
if let left = left {
leftAnchor.constraint(equalTo: left, constant: paddingLeft).isActive = true
}
if let bottom = bottom {
bottomAnchor.constraint(equalTo: bottom, constant: -paddingBottom).isActive = true
}
if let right = right {
rightAnchor.constraint(equalTo: right, constant: -paddingRight).isActive = true
}
if width != 0 {
widthAnchor.constraint(equalToConstant: width).isActive = true
}
if height != 0 {
heightAnchor.constraint(equalToConstant: height).isActive = true
}
func center(x: NSLayoutXAxisAnchor?, y: NSLayoutYAxisAnchor? ) {
translatesAutoresizingMaskIntoConstraints = false
if let x = x {
centerXAnchor.constraint(equalTo: x).isActive = true
}
if let y = y {
centerYAnchor.constraint(equalTo: y).isActive = true
}
}
}
答案
首先,您在此处的2个位置添加相同的imageView
view.insertSubview(backgroundImage, at: 0)
和这里
scrollView.addSubview(backgroundImage)
所以最终它只会被添加到scrollView,因为它是一个对象
其次,您需要像这样约束imageView
backgroundImage.anchor(top: scrollView.topAnchor, left: scrollView.leftAnchor, bottom: scrollView.bottomAnchor, right: scrollView.rightAnchor, paddingTop: 0, paddingLeft: 0, paddingBottom: 0, paddingRight: 0, width: 0, height: 0)
然后根据scrollView内容,imageView将拉伸
第三个contentMode
应该是
backgroundImage.contentMode =.scaleToFill // or .scaleAspectFill
应该提到你可以将imageView添加到self.view
并使scrollView背景透明,以避免因拉伸而导致imageView的质量和方面丢失
以上是关于如何在滚动视图中正确显示背景图像?的主要内容,如果未能解决你的问题,请参考以下文章
如何在 MS Word 文档中显示代码片段,因为它在 *** 中显示(滚动条和灰色背景)