你如何做一个背景图像缩放到迅速的屏幕大小?
我试图使用模式图像快速地为我的背景制作一个UIView图像。 我的代码运行良好,除了我希望图像占据整个屏幕的事实。 我的代码如下所示: self.view.backgroundColor = UIColor(patternImage: UIImage(named: "backgroundImage")!)
有谁知道如何使背景成为一个图像,将占用整个屏幕,并会出现在不同的iPhone屏幕尺寸时缩放?
注意:
我从我的旧帐户(这是我弃用,我不能再访问它)发布这个答案,这是我改进的答案 。
您可以通过编程来完成,而不是在每个视图中创build一个IBOutlet。 只需创build一个UIView 扩展名 (文件 – >新build – >文件 – > Swift文件 – >命名它任何你想要的),并添加:
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() }
只需添加你的UIImageView定位中心和所有的边缘alignment边缘。 把它留在那里,点击右下angular,如下所示,现在继续,向上,下,左,右边添加4个约束。
现在,只需select您的图像视图,并使用IB检查员select你想要的图像:填充或适合,你可以看到如下:
这是我以前的更新的答案。
作为我以前的答案相同的方法,您可以创buildUIView的扩展,并添加addBackground()
方法,如下所示:
请记住:如果您将其添加到新的.swift文件中,请记住添加import UIKit
extension UIView { func addBackground(imageName: String = "YOUR DEFAULT IMAGE NAME", contextMode: UIViewContentMode = .scaleToFill) { // setup the UIImageView let backgroundImageView = UIImageView(frame: UIScreen.main.bounds) backgroundImageView.image = UIImage(named: imageName) backgroundImageView.contentMode = contentMode backgroundImageView.translatesAutoresizingMaskIntoConstraints = false addSubview(backgroundImageView) sendSubview(toBack: 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 3代码:)
- 添加-programatically-NSLayoutConstraints :这是因为当应用我以前的答案中提到的东西时,它适用于当前的设备方向,但不是当应用程序支持纵向/横向模式,如果设备的方向已经改变,背景图像尺寸将是相同的(相同尺寸),并且不适应设备屏幕的新宽度/高度,因此添加约束条件应该解决这个问题。
- 添加默认参数:为了获得更大的灵活性,您可能(有时)需要为您更改默认图像甚至背景模式:
用法:
假设你想在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(contextMode: .scaleAspectFit) // 4- this will add it with the default imageName and edited contextMode view.addBackground(imageName: "NEW IMAGE NAME", contextMode: .scaleAspectFit) }
这使用PureLayout 。 您可以使用AutoLayout几行。
UIImageView* imgView = UIImageView(image: myUIImage) imgView.setTranslatesAutoresizingMaskIntoConstraints(false) self.view.addSubview(imgView) self.view.addConstraints(imgView.autoPinEdgesToSuperviewEdgesWithInsets(UIEdgeInsetsMake(0,0,0,0))
对于这一点,我认为你需要创build一个UIImageView的固定到父视图顶部/底部/左/右。 这将使UIImageView总是匹配显示的大小。 只要确保您将imageview上的内容模式设置为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]];
这里是你的select缩放!
对于.contentMode属性:
ScaleToFill这将缩放图像视图内的图像以填充图像视图的整个边界。
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)
我使用约束来使图像“autoLayout”。 我提出了一个视图来显示活动指示器(具有完整的背景图像),而关于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() }
`
CGRect screenRect = [[UIScreen mainScreen] bounds]; CGFloat screenWidth = screenRect.size.width; CGFloat screenHeight = screenRect.size.height; _imgBackGround.frame = CGRectMake(0, 0, screenWidth, screenHeight);`
艾哈迈德Fayyas解决scheme在Swift 3.0 :
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) }