CODEWITHSUNDEEP
iosswiftautolayoutimageview
Ömer Baş
Ömer Baş

Reputation: 98

Fixed width, variable height image view ios layout

I want an imageview which has fixed width but variable height. I want to refresh view if the image that I get from the website is heighter than the imageview in storyboard,

This is the view when I use "Scale to Fill".

postimg.org/image/6l1ol2pvz

And this is when I use "Aspect Fill"

postimg.org/image/9duw53q8f/

I want the image to be like in "Aspect Fill" but I can't place the bottom correctly.

Thank you all!

Solution:

I gave my image width and height constraints. Then I changed it programmatically. This is the view I wanted and I made it work!

https://i.sstatic.net/PCgHw.png

let imageData = NSData(contentsOfURL: imgUrl)
let myImage = UIImage(data: imageData!)
let aspectRatio = (myImage?.size.height)! / (myImage?.size.width)!

self.postCombineImageViewHeight.constant = UIScreen.mainScreen().bounds.size.width * aspectRatio
self.postCombineImageViewWidth.constant = UIScreen.mainScreen().bounds.size.width

Thank you all for your help!

Upvotes: 0

Views: 8577

Answers (5)

Simon K. Gerges
Simon K. Gerges

Reputation: 3147

You can do it programmatically using NSLayoutConstraint

self.addConstraint(NSLayoutConstraint(
        item: myButton,
        attribute: .Width,
        relatedBy: .Equal,
        toItem: nil,
        attribute: .NotAnAttribute,
        multiplier: 1.0,
        constant: 200))

And for the height you add the variable height

Upvotes: 1

G.Abhisek
G.Abhisek

Reputation: 1094

My solution -

1) Provide a height and width constraint for your image.

2) Import AVFoundation kit.

3) Generate a new rect for your image by the following code(fitting it via aspect ratio) - 

  let boundingRect =  CGRect(x: 0, y: 0, width: width, height: CGFloat(MAXFLOAT))//width is your fixed width for your image eg. - if your image covers width of your superview. It can be - self.view.frame.width

          let rect  = AVMakeRectWithAspectRatioInsideRect(photo.image.size, boundingRect)

So now you got your rect -

Now you can change your height constraint by having something like this - 

imageHeightConstraint.constant = rect.size.height

Upvotes: 0

Rob
Rob

Reputation: 437402

You should select "clip subviews" in the "Attributes inspector" of this image view in IB (or programmatically set the clipToBounds property of the image view).

For example, this is a landscape image shown in a square image view with a content model of "aspect fill", but with "clip subviews" unchecked (i.e. with clipToBounds set to false):

enter image description here

(I've added a red CAShapeLayer to show where the frame of the UIImageView is.)

This is the same image view, but with "clip subviews" checked (i.e. clipToBounds property is true):

enter image description here

Alternatively, you could choose "aspect fit", rather than "aspect fill", in which case the whole image will be visible and not distorted, but you may end up with blank space on the edges of the photo:

enter image description here

Upvotes: 4

Felipe Ferri
Felipe Ferri

Reputation: 3588

Are you using storyboards? And auto layout?

Try this: place a "vertical distance" constraint between the bottom of the photo and the top of the view that is on the bottom.

Then click the added constraint and on the Attributes Inspector change the relation to "Greater Than or Equal".

This way, the imageView height will adapt to the image content; but if the image's height grows too large, it will stop growing when it reaches the bottom view.

Upvotes: 0

Svetoslav Bramchev
Svetoslav Bramchev

Reputation: 433

You can make height constraint in storyboard then drag and drop constraint IBOutlet in viewcontroller and change his constant when get imageview from website

Upvotes: 2

Related Questions