你如何让背景图像快速缩放到屏幕大小？
Posted
技术标签:
【中文标题】你如何让背景图像快速缩放到屏幕大小？【英文标题】：How do you make a background image scale to screen size in swift? 【发布时间】：2014-11-26 15:39:44 【问题描述】：我正在尝试使用模式图像快速为我的背景制作 UIView 图像。除了我希望图像占据整个屏幕之外，我的代码运行良好。我的代码如下所示：self.view.backgroundColor = UIColor(patternImage: UIImage(named: "backgroundImage")!)
有谁知道如何使背景成为占据整个屏幕的图像，并且在出现在不同的 iPhone 屏幕尺寸时会缩放？
【问题讨论】：
【参考方案1】：注意：
我从我的旧帐户发布了这个答案（对我来说已弃用，我无法再访问它），这是我的improved answer。
您可以通过编程来完成，而不是在每个视图中创建一个 IBOutlet。 只需创建一个 UIView extension (File -> New -> File -> Swift File -> 随便命名) 并添加：
extension UIView
func addBackground()
// screen width and height:
let width = UIScreen.mainScreen().bounds.size.width
let height = UIScreen.mainScreen().bounds.size.height
let imageViewBackground = UIImageView(frame: CGRectMake(0, 0, width, height))
imageViewBackground.image = UIImage(named: "YOUR IMAGE NAME GOES HERE")
// you can change the content mode:
imageViewBackground.contentMode = UIViewContentMode.ScaleAspectFill
self.addSubview(imageViewBackground)
self.sendSubviewToBack(imageViewBackground)
现在，您可以在视图中使用此方法，例如：
override func viewDidLoad()
super.viewDidLoad()
self.view.addBackground()
【讨论】：
让 imageViewBackground = UIImageView(frame: UIScreen.mainScreen().bounds) 一段很棒的代码，但我有一个小问题，背景的大小应该是多少才能适合不同比例的所有屏幕 @MinaFawzy 谢谢你的提问，你可能想检查我改进的答案，它应该包含你的答案:)【参考方案2】：只需添加您的 UIImageView 定位 居中并且所有边缘都与边缘对齐。把它留在那里 点击右下角，如下图所示，现在继续 为顶部、底部、左侧和右侧边缘添加 4 个约束。
现在只需选择您的图像视图并使用 IB 检查器选择如何 您想要您的图像：填充或适合，如下所示：
【讨论】：
【参考方案3】：这是我previous one 的更新答案。
和我之前的回答一样，你可以创建一个 UIView 的扩展，并在其中添加addBackground() 方法，如下：
记住：如果你将它添加到一个新的 .swift 文件中，记得添加import UIKit
extension UIView
func addBackground(imageName: String = "YOUR DEFAULT IMAGE NAME", contentMode: UIView.ContentMode = .scaleToFill)
// setup the UIImageView
let backgroundImageView = UIImageView(frame: UIScreen.main.bounds)
backgroundImageView.image = UIImage(named: imageName)
backgroundImageView.contentMode = contentMode
backgroundImageView.translatesAutoresizingMaskIntoConstraints = false
addSubview(backgroundImageView)
sendSubviewToBack(backgroundImageView)
// adding NSLayoutConstraints
let leadingConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .leading, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1.0, constant: 0.0)
let trailingConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .trailing, relatedBy: .equal, toItem: self, attribute: .trailing, multiplier: 1.0, constant: 0.0)
let topConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1.0, constant: 0.0)
let bottomConstraint = NSLayoutConstraint(item: backgroundImageView, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1.0, constant: 0.0)
NSLayoutConstraint.activate([leadingConstraint, trailingConstraint, topConstraint, bottomConstraint])
请注意，此答案的更新是：
Swift 4 代码? 以编程方式添加- NSLayoutConstraints：这是因为在应用我之前的回答中提到的内容时，它适用于当前设备方向，但当应用程序不支持时不纵向/横向两种模式，如果设备方向已经改变，背景imageView的大小将相同（相同大小）并且不适应设备屏幕的新宽度/高度，因此添加约束应该可以解决这个问题。 添加默认参数：为了获得更大的灵活性，您可能 - 有时 - 想要更改默认图像甚至是背景的上下文模式：用法：
假设你想在viewDidLoad()中调用它：
override func viewDidLoad()
//...
// you can call 4 versions of addBackground() method
// 1- this will add it with the default imageName and default contextMode
view.addBackground()
// 2- this will add it with the edited imageName and default contextMode
view.addBackground(imageName: "NEW IMAGE NAME")
// 3- this will add it with the default imageName and edited contextMode
view.addBackground(contentMode: .scaleAspectFit)
// 4- this will add it with the default imageName and edited contextMode
view.addBackground(imageName: "NEW IMAGE NAME", contextMode: .scaleAspectFit)
【讨论】：
伟大的贡献！但是，有一个错误：内部名称应该是 contentMode 而不是 ContextMode。所以函数应该是这样的：func addBackground(imageName: String = "YOUR DEFAULT IMAGE NAME", contentMode: UIViewContentMode = .scaleToFill) 而之前你有这个：func addBackground(imageName: String = "YOUR DEFAULT IMAGE NAME", contextMode: UIViewContentMode = .scaleToFill)【参考方案4】：
这是您的缩放选项！
对于 .contentMode 属性：
缩放填充 这将缩放图像视图内的图像以填充图像视图的整个边界。
ScaleAspectFit 这将确保图像视图内的图像具有正确的纵横比并适合图像视图的边界。
ScaleAspectFill 这将确保图像视图内的图像具有正确的纵横比并填充图像视图的整个边界。 要使该值正常工作，请确保您已将 imageview 的 clipsToBounds 属性设置为 true。
class SecondViewController : UIViewController
let backgroundImage = UIImage(named: "centralPark")
var imageView: UIImageView!
override func viewDidLoad()
super.viewDidLoad()
self.thirdChoiceField.delegate = self
self.datePicker.minimumDate = NSDate()
imageView = UIImageView(frame: view.bounds)
imageView.contentMode = .ScaleAspectFill
imageView.clipsToBounds = true
imageView.image = backgroundImage
imageView.center = view.center
view.addSubview(imageView)
self.view.sendSubviewToBack(imageView)
【讨论】：
【参考方案5】：Swift 3.0 中的 Ahmad Fayyas 解决方案：
func addBackground()
let width = UIScreen.main.bounds.size.width
let height = UIScreen.main.bounds.size.height
let imageViewBackground = UIImageView(frame: CGRect(x:0, y:0, width: width, height: height))
imageViewBackground.image = UIImage(named: "YOUR IMAGE NAME GOES HERE")
// you can change the content mode:
imageViewBackground.contentMode = UIViewContentMode.scaleAspectFill
self.view.addSubview(imageViewBackground)
self.view.sendSubview(toBack: imageViewBackground)
【讨论】：
感谢您的努力！请检查我的improved answer :)【参考方案6】：我将我的答案显示为哪些代码行对我有帮助...
扩展文件代码....
extension UIView
func addBackground()
let width = UIScreen.main.bounds.size.width
let height = UIScreen.main.bounds.size.height
let imageViewBackground = UIImageView(frame: CGRect(x: 0, y: 0, width: width, height: height))
imageViewBackground.image = UIImage(named: "Your Background Image Name")
imageViewBackground.contentMode = .scaleAspectFill
self.addSubview(imageViewBackground)
self.sendSubviewToBack(imageViewBackground)
在视图控制器文件中......
override func viewDidLoad()
super.viewDidLoad()
view.addBackground()
谢谢你们！
【讨论】：
【参考方案7】：这使用PureLayout。您可以使用 AutoLayout 多几行。
UIImageView* imgView = UIImageView(image: myUIImage)
imgView.setTranslatesAutoresizingMaskIntoConstraints(false)
self.view.addSubview(imgView)
self.view.addConstraints(imgView.autoPinEdgesToSuperviewEdgesWithInsets(UIEdgeInsetsMake(0,0,0,0))
【讨论】：
仅供参考 - 您无需使用 PureLayout 调用addConstraints - 默认情况下会自动安装（激活）约束。上面的代码实际上会双重添加约束。
感谢您的信息！这使得 API 更加简洁。【参考方案8】：
我使用约束使图像“自动布局”。我做了一个视图来显示一个活动指示器（带有完整的背景图像），而 segue 上的视图正在加载。代码如下。
var containerView: UIView = UIView()
var actionIndicator: UIActivityIndicatorView = UIActivityIndicatorView()
private func showActivityIndicator()
///first I set the containerView and the background image
containerView.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(containerView)
adjustConstFullSize(containerView, parentView: self.view)
let backImage = UIImageView(image: UIImage(named: "AppBackImage"))
backImage.contentMode = UIViewContentMode.ScaleAspectFill
backImage.translatesAutoresizingMaskIntoConstraints = false
containerView.addSubview(backImage)
adjustConstFullSize(backImage, parentView: containerView)
////setting the spinner (activity indicator)
actionIndicator.frame = CGRectMake(0.0, 0.0, 40.0, 40.0)
actionIndicator.center = CGPointMake(containerView.bounds.size.width / 2, containerView.bounds.size.height / 2)
actionIndicator.hidesWhenStopped = true
actionIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.WhiteLarge
containerView.insertSubview(actionIndicator, aboveSubview: backImage)
///throw the container to the main view
view.addSubview(containerView)
actionIndicator.startAnimating()
这是“adjustConstFullSize”函数的代码。
func adjustConstFullSize(adjustedView: UIView!, parentView: UIView!)
let topConstraint = NSLayoutConstraint(item: adjustedView,
attribute: .Top,
relatedBy: .Equal,
toItem: parentView,
attribute: .Top,
multiplier: 1.0,
constant: 0.0)
let leftConstraint = NSLayoutConstraint(item: adjustedView,
attribute: .Leading,
relatedBy: .Equal,
toItem: parentView,
attribute: .Leading,
multiplier: 1.0,
constant: 0.0)
let rightConstraint = NSLayoutConstraint(item: adjustedView,
attribute: .Trailing,
relatedBy: .Equal,
toItem: parentView,
attribute: .Trailing,
multiplier: 1.0,
constant: 0.0)
let bottomConstraint = NSLayoutConstraint(item: adjustedView,
attribute: .Bottom,
relatedBy: .Equal,
toItem: parentView,
attribute: .Bottom,
multiplier: 1.0,
constant: 0.0)
parentView.addConstraints([topConstraint, leftConstraint, rightConstraint, bottomConstraint])
在上面显示的函数中，我将 containerView 约束“绑定”到主视图约束，使视图“全尺寸”。我对 UIImageView 做了同样的事情，并将 contentMode 设置为 AspectFill - 这很重要，因为我们希望图像在不拉伸的情况下填充内容。
要删除视图，延迟加载后，只需使用下面的代码。
private func hideActivityIndicator()
actionIndicator.stopAnimating()
containerView.removeFromSuperview()
【讨论】：
【参考方案9】：为此，我认为您需要创建一个固定到父视图顶部/底部/左侧/右侧的 UIImageView。这将使 UIImageView 始终与显示的大小相匹配。只需确保将图像视图上的内容模式设置为 AspectFit
var newImgThumb : UIImageView
newImgThumb = UIImageView(view.bounds)
newImgThumb.contentMode = .ScaleAspectFit
view.addSubview(newImgThumb)
//Don't forget this line
newImgThumb.setTranslatesAutoresizingMaskIntoConstraints(false)
NSDictionary *views =NSDictionaryOfVariableBindings(newImgThumb);
// imageview fills the width of its superview
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[newImgThumb]|" options:0 metrics:metrics views:views]];
// imageview fills the height of its superview
[self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[newImgThumb]|" options:0 metrics:metrics views:views]];
【讨论】：
【参考方案10】：`
CGRect screenRect = [[UIScreen mainScreen] bounds];
CGFloat screenWidth = screenRect.size.width;
CGFloat screenHeight = screenRect.size.height;
_imgBackGround.frame = CGRectMake(0, 0, screenWidth, screenHeight);`
【讨论】：
请解释一下你的答案以上是关于你如何让背景图像快速缩放到屏幕大小？的主要内容，如果未能解决你的问题，请参考以下文章