iOS - Layout UIImageView's subview on the scaleaspectfit UIImageView's image - ios

I have UITableView, where is a UIStackView with same views(different content only) on each cell.(The tableView's cell is shown below)
The view consists of UIImageView and UILabel above. The UIImageView's content is set to .scaleAspectFit, because of keeping ratio. I have a problem with adding a new image layer (subview) to imageView, which has to perfectly overlap current image, but I can't fit on image properly with autolayout, because I know only UIImageView's anchor, not image's anchor (it doesn't exists).
PS: I have tried to use imageview.image.size.width, to set width and height, but it's also useless.
Current code of adding subview using autolayout:
func addStripe(){
let stripeLayer = UIImageView(image: #imageLiteral(resourceName: "book_new"))
imageView.addSubview(stripeLayer)
stripeLayer.contentMode = .scaleToFill
stripeLayer.translatesAutoresizingMaskIntoConstraints = false
stripeLayer.topAnchor.constraint(equalTo: imageView.topAnchor).isActive = true
stripeLayer.leadingAnchor.constraint(equalTo: imageView.centerXAnchor).isActive = true
stripeLayer.trailingAnchor.constraint(equalTo: imageView.trailingAnchor).isActive = true
Aaaand there is a result of addStripe function (the wrong one)
Thanks everyone for your time!

I think you should set frame of your stripeLayer equal to imageView. You can do this with init method of UIImageView like this:
let stripeLayer = UIImageView(frame: imageView.frame)
stripeLayer.image = #imageLiteral(resourceName: "book_new")
imageView.addSubview(stripeLayer.image)
I hope it help you

#ReinhardManner's comment helped me and it works. This single line fix my problem
let sizeInView = AVMakeRect(aspectRatio: imgViewFake.image.size, insideRect: imgViewFake.bounds).size

Related

Swift issue when set an image as background programmatically

I'm trying to set an image as background to the whole controller so I've written the code which I enclosed below and works fine on iPhone 11 Pro Max.
But surprisingly that wouldn't work as expected on iPhone X and the image was cut off at the bottom of the screen so I tried to modify UIImageView contentMode but there was no result.
Please take a look at the screenshot to see the simulators:
Here is my code:
let img = UIImageView(frame: holderView.bounds)
img.image = UIImage(named: "step 2")
img.contentMode = .scaleToFill
holderView.addSubview(img)
The holderView was pinned in Interface Builder into the fourth edges of superview.
Any ideas to fix it but I don't want to use auto-layout here because this is a simple case to illustrate the issue and it would be a complex one.
You should set the contentMode to scaleToFill if you want to display the entire image irrespective of the displayed device. Also, constraint the UIImageView to it's superview UIView.
let img = UIImageView(frame: holderView.bounds)
img.contentMode = .scaleToFill
img.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
img.topAnchor.constraint(equalTo: view.topAnchor),
img.leadingAnchor.constraint(equalTo: view.leadingAnchor),
img.bottomAnchor.constraint(equalTo: view.bottomAnchor),
img.trailingAnchor.constraint(equalTo: view.trailingAnchor)
])

What do I need for masking a UIImageView and how do I do it in Swift 3?

I was wondering what I would need if I wanted to use a mask image to get my UIImageView in a specific shape. From what I understand, to create a mask, I need to have an image with the shape of the mask all black on top of a white background. Something like this, for example:
First of all, is this sufficient to shape an image view, and if so, how do I do it in Swift 3? I can only find masking code that is either outdated or written in Objective-C. I've tried simply assigning the image above to an UIImageView and then assign the image view to the mask property of the UIImageView I want to shape, like so:
self.defaultImageView.mask = self.maskImageView
This didn't do anything. It just made self.maskImageView disappear (both image view's added through the storyboard and connected using IBOutlet properties). I'm sure I'm forgetting to do something. It can't be this simple. I would appreciate it if someone could help me out. Like I said, I put both image views on the exact same spot, on top of each other, in the storyboard.
UPDATE:
My first attempt to set the mask programmatically after deleting it from my storyboard.
let layer:CALayer = CALayer()
let mask:UIImage = UIImage(named: "Black-Star-Photographic-Agency")!
layer.contents = mask
layer.frame = CGRect(x: 0, y: 0, width: ((self.defaultImageView.image?.size.width)!), height: (self.defaultImageView.image?.size.height)!)
self.defaultImageView.layer.mask = layer
self.defaultImageView.layer.masksToBounds = true
The result was that the image view had completely disappeared and wasn't visible anymore. Am I doing something, am I forgetting something or both?
You should use a png image, which supports transparency, unlike jpg.
In Photoshop your image should look similar to this:
It doesn't matter if your shape is black or white. What matters is transparency of each pixel. Opaque area (black in this case) will be visible and transparent area will get trimmed.
Edit:
You should not create mask view from storyboard if you do so. It is not going to be a part of your view hierarchy. Just add it programmatically like this:
let maskView = UIImageView()
override func viewDidLoad() {
super.viewDidLoad()
maskView.image = UIImage(named: "mask")
imageView.mask = maskView
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
maskView.frame = imageView.bounds
}
Output:
Here is a test project to show how it's working.
Also if you're using a custom frame/image and run into the mask not showing properly, try setting the content mode of the mask:
maskView.contentMode = .scaleAspectFit

not able to prepare circular imageview using swift 2 in ios app for iPad

I am trying to load a circular imageview in my ios app.
I have tried all the combinations that has been listed in stack-overflow, but i still get the same error. I tried every mentioned step over here
How to set imageView in circle like imageContacts in Swift correctly?
What I have done is this
I have created an image view in my storyboard - with height=300, width=300, view mode = aspect fit.
I defined constraint to place the image view at the horizontal and vertical center. Also defined trailing from top and right edge
The 4 constraint are as follows
i. ImageView.centerY = centreY
ii.ImageView.centerY = centreY
iii. ImageView.top = TopLayoutGUide.bottom + 103
iv. trailingMargin = ImageView.trailing + 125
In my controller file I have `declared and IBOutlet for imageview as
#IBOutlet var imageView: UIImageView!
In my controller file I have used the following piece of code to make it circular
func circularImage(photoImageView: UIImageView?)
{
photoImageView!.layer.frame = CGRectInset(photoImageView!.layer.frame, 0, 0)
photoImageView!.layer.borderColor = UIColor.grayColor().CGColor
photoImageView!.layer.cornerRadius = photoImageView!.frame.width/2
photoImageView!.layer.masksToBounds = false
photoImageView!.clipsToBounds = true
photoImageView!.layer.borderWidth = 0.5
photoImageView!.contentMode = UIViewContentMode.ScaleAspectFill
}
I am however, getting an oval shaped image view.
Try this:
#IBOutlet var imageView: UIImageView! {
didSet {
imageView.layer.borderColor = UIColor.grayColor().CGColor
imageView.layer.cornerRadius = imageView.frame.width/2
imageView.clipsToBounds = true
imageView.layer.borderWidth = 0.5
}
}
And if you want you can just set clipsToBounds in storyboard instead of using it here.
Depending on when you're calling that circularImage function you wrote, the frame on the image might not be right yet.
If this doesn't fix the issue, you probably have some constraint troubles - make sure height and width are high priority and consider deleting the top & right constraints if you're using center horizontal and vertical.

bounds of imageView are always 240

I have a probably simple mistake that drives me crazy.
I'm working with UIImageView within a UIScrollView. To fit the image in the view I want to get the width of the imageView to adjust the zoom scale.
But the code
imageView.bounds.width
always returns 240.0 no matter what size the actual image has.
In the Interface Builder the imageView is horizontally and verically centered in the view, clip subviews is true and Mode is aspect fit.
Any ideas?
The size of the UIImageView is not related to the size of the image it contains. The UIImageView is probably sized to 240.0 in the storyboard or wherever else you generate it. The image will scale down or up to fit the view based on the mode. To get the size of the actual image, try the following code:
let image = UIImage("my_image_file")
let imageHeight = image.size.height
let imageWidth = image.size.width
With the size of the image now know, you can set the size of the view appropriately.
I had the same problem. Now I check the bounds in the main_queue and everything works fine.
dispatch_async(dispatch_get_main_queue(), {
print(self.image.bounds.width)
})

PFLogInViewController logo flattened

When customizing (by subclassing) PFLogInViewController; I have a problem with the logo. I use a square picture which for some reason gets distorted, in fact flattened.
Here is the code:
UIImage *logoImage;
logoImage = [UIImage imageNamed:#"myLogo.png"]; // 152 x 152 pixels.
self.logInView.logo = [[UIImageView alloc] initWithImage:logoImage];
self.logInView.logo.layer.cornerRadius = 7.0;
self.logInView.logo.clipsToBounds = YES;
Am I doing something wrong? Or is the issue in a different place?
I ran into the same problem, and after viewing Dare's answer, I came up with a solution.
Override viewDidLoad:
override func viewDidLoad() {
super.viewDidLoad()
let logo = UIImageView(image: UIImage(named: "logo"))
logo.contentMode = .ScaleAspectFill
logInView!.logo = logo
}
This solved my scaling issue. However, depending on the size of your logo, it may possibly bleed out of the screen. A dirty workaround is overriding viewDidLayoutSubviews and hardcoding the logo object's origin:
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
logInView!.logo!.frame.origin.y += 200 //here I moved the logo down by 200 points
}
Setting the image property does not change the size of a UIImageView. Call sizeToFit to adjust the size of the view to match the image. You could also set its frame explicitly to 152x152 with self.logInView.logo.frame = CGRectMake(0,0,152,152); or something similar. The other thing to check out is the image view's content mode. Maybe UIViewContentModeCenter or UIViewContentModeScaleAspectFit.

Resources