The app will always be in portrait mode, and I want to set an image as the background using an Image View. The entire width of the image needs to fit the width of the screen, and the aspect ratio should stay the same. The top and bottom of the image can "bleed over" and not be visible. "Aspect Fit" doesn't help me because the top and bottom are fully shown, causing the image width not fit the screen width.
Have you tried Autolayout in your storyboard? Add an UIImageView and select Pin. Here you can choose your values of the positioning.
Or you can use code
let width = UIScreen.mainScreen().bounds.size.width
let height = UIScreen.mainScreen().bounds.size.height
let imageView = UIImageView(frame: CGRectMake(0, 0, width, height))
imageView.image = UIImage(named: "YOUR IMAGE NAME")
imageView.contentMode = UIViewContentMode.ScaleAspectFill
self.view.addSubview(imageView)
Related
I currently have a ScrollView and inside the ScrollView i have a UIImageView.
I get different image sizes from my server and most images are larger than the bounds of my screen.
I would like to scroll through the image if it is bigger than my screen.
Something like this....
This is what i have tried so far.
let image = UIImage(named: "myImg")
let heightInPoints = image?.size.height
let heightInPixels = heightInPoints ?? 0 * image!.scale
let widthInPoints = image?.size.width
let widthInPixels = widthInPoints ?? 0 * image!.scale
self.imageView.frame = CGRect(x: 0, y: 0, width: widthInPixels, height: heightInPixels) //= image
self.imageView.image = image
scrollView.contentSize = CGSize(width: imageView.frame.width, height: imageView.frame.height)
But it doesn't seem to work. Either it only scrolls vertically or horizontally or it never scrolls.
What am I doing wrong. Or is there a better approach to get this effect ?
Solution 1. Updating Frames
Firstly, make sure the views hierarchy is correctly setup (the imageView is added to the scrollView):
scrollView.addSubview(imageView)
Then I'd suggest rewriting this code as something like:
let image = UIImage(named: "myImg")
imageView.image = image // setup image to imageView
imageView.frame.size = image?.size ?? .zero // setup image size or zero to imageView
scrollView.contentSize = image.size ?? .zero // setup image size or zero as a content size
Solution 2. Using constraints
There is also another solution using constraints instead of manually setting up the sizes. This takes a bit more code but doesn't require sizes recomputing when you change the image.
scrollView.addSubview(imageView) // Setup the views hierarchy
imageView.translatesAutoresizingMaskIntoConstraints = false // Make sure constraints won't interfere with autoresizing mask
NSLayoutConstraint.activate(
[
imageView.leftAnchor.constraint(equalTo: scrollView.leftAnchor), // attaching to the left
imageView.topAnchor.constraint(equalTo: scrollView.topAnchor), // attaching to the top
imageView.rightAnchor.constraint(equalTo: scrollView.rightAnchor), // attaching to the right
imageView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor) // attaching to the bottom
]
)
Then we replace existing image with a new one like this:
imageView.image = UIImage(named: "myImg")
Both approaches work for me in Playground. So, if these still won't work for you, please share more information about how you set up the hierarchy and additional parameters of the scroll view.
I'm rendering a 16:9 pixel image programatically and then use UIImageView with kCAFilterNearest filter and .ScaleAspectFill content mode to display it as a background image. The result I get is this:
On the picture you can see that, for whatever reason, it scales the picture exactly right but slightly moves it up (like, half a scaled pixel) and leaves a line at the bottom, which belongs to the UIImageView that the image is displayed on (it's the only view on this UIViewController and its background color is "navy").
What might be the reason behind this, considering that I use UIScreen.mainScreen().bounds rectangle for the UIImageView?
P.S. ScaleToFill content mode gives kind of the same result (the line at the bottom remains)
I use a function to resize the image to fit on the screen
fnc imageResize (imageObj:UIImage, sizeChange:CGSize)-> UIImage{
let hasAlpha = false
let scale: CGFloat = 0.0 // Automatically use scale factor of main screen
UIGraphicsBeginImageCOntextWithOptions(sizeChange, !hasAlpha, scale)
imageObj.drawInRect(CGRect(origin: CGPointZero, size : sizeChange))
let scaledImage = UIGraphicsGetImageFromCurrentImageContext()
retunr scaledImage
}
and to call
let mainScreenSize: CGRect = UIScreen.mainScreen().bounds
let image: UIImage! = self.imageResize(UIImage(named: "IMAGE_NAME")!, sizeChange: CGSizeMake(mainScreenSize.width, mainScreenSize.height))
the initial image that I used was 16:9 ratio as well
My background image is set with UIView extension.
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: "index_clear")
// you can change the content mode:
imageViewBackground.contentMode = UIViewContentMode.ScaleAspectFill
self.addSubview(imageViewBackground)
self.sendSubviewToBack(imageViewBackground)
}}
For segue animation the view moves from left to right. The background image is way larger than the screen, what is visible while the animation.
How can I cut the background image to perfectly fit into the view?
.ScaleAspectFit does the job, but since it's a picture it looks bad.
Help is very appreciated.
You can use .ScaleAspectFill to crop the image rather than scale it to fit. This won't distort your image, but obviously you won't be able to see the whole thing.
You need to ensure that you set clipsToBounds=true on the UIImageView so that the cropped area isn't visible
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: "index_clear")
// you can change the content mode:
imageViewBackground.contentMode = UIViewContentMode.ScaleAspectFill
imageViewBackground.clipsToBounds=true
self.addSubview(imageViewBackground)
self.sendSubviewToBack(imageViewBackground)
}
I have a UIImageView with a fixed width and height. I don't want to change the frame of the UIImageView. I want to have it hold an image where I keep the aspect ratio and I fit the width and let the image be either too tall, or too short for the UIImageView's frame. Like this:
The red is the UIImageView's frame. The gray is the actual image as it's displayed.
I think the best way to do it is to play with the mode of your imageView (Aspect Fill, Aspect Width, etc) and this is based on the ratio between the width and height of the image
if image.width > image.height {
imageView.contentMode = UIViewContentModeScaleAspectFit
//since the width > height we may fit it and we'll have bands on top/bottom
} else {
imageView.contentMode = UIViewContentModeScaleAspectFill
//width < height we fill it until width is taken up and clipped on top/bottom
}
UIViewContentModeScaleAspectFit
Scales the content to fit the size of the view by maintaining the
aspect ratio. Any remaining area of the view’s bounds is transparent.
UIViewContentModeScaleAspectFill
Scales the content to fill the size of the view. Some portion of the
content may be clipped to fill the view’s bounds.
I haven't tested it but off the top of my head this seems right
I think you need to compare the image aspect ratio to the aspect ratio of the UIImageView itself:
private func updateUI() {
guard let image = image else { return }
let viewAspectRatio = self.bounds.width / self.bounds.height
let imageAspectRatio = image.size.width / image.size.height
if viewAspectRatio > imageAspectRatio {
self.contentMode = .scaleAspectFill
} else {
self.contentMode = .scaleAspectFit
}
}
override var image: UIImage? { didSet { updateUI() }}
override func layoutSubviews() {
super.layoutSubviews()
updateUI()
}
Note: this is aspect fit width
Swift 5.1 iOS 13
Because mine was on the header cell on a collection view this is what worked for me:
if headerCell!.imageView.frame.width > headerCell!.imageView.frame.height {
headerCell!.imageView.contentMode = .scaleAspectFit
//since the width > height we may fit it and we'll have bands on top/bottom
} else {
headerCell!.imageView.contentMode = .scaleAspectFill
//width < height we fill it until width is taken up and clipped on top/bottom
}
For my case solution was to set UIImageView's contentMode based on if ratio of image's height and width is bigger than of imageView's.
func setupImageViewContentMode() {
if let image = imageView.image, image.size.height / image.size.width > imageView.frame.height / imageView.frame.width {
imageView.contentMode = .scaleAspectFit
} else {
imageView.contentMode = .scaleAspectFill
}
}
Also, note that you have to setup this according to current layout, so calling this method e.g. in layoutSubviews(), in viewDidLayoutSubviews(), after image is loaded from backend or wherever you need it does the job.
I'm trying add UIImageViews to the ScrollView to get horizontaly pagging effect.
let pagesScrollViewSize = scrollView.frame.size
scrollView.contentSize = CGSizeMake(pagesScrollViewSize.width * CGFloat(pageImages.count), pagesScrollViewSize.height)
for var index = 0; index < 3; ++index {
var frame = containerView.bounds
frame.origin.x = frame.size.width * CGFloat(index)
frame.origin.y = 0.0
let newPageView = UIImageView(image: pageImages[index])
newPageView.frame = frame
newPageView.contentMode = .ScaleAspectFit
scrollView.addSubview(newPageView)
}
Here is my layout:
But on phone/emulator image is scaled to ScrollView height. I want scale image to scrollview width, so on one page will be one image.
To scale image to scrollview width you need to resize (scale image to width) + crop image first. Setting content mode to ScaleAspectFit will only "...scale the content to fit the size of the view by maintaining the aspect ratio. Any remaining area of the view’s bounds is transparent".
The problem was that I was using autolayout in my Storyboard but I was adding new view's without adding constrains. So I've added this photos manualy in storyboard like was shown here: UIScrollView Paging Autolayout & Storyboard