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.
Related
I have a UIImageView whose user interaction is true and to which I have given a tap gesture recognizer, whose action handler is as follows:
#IBAction func tap(_ sender:UITapGestureRecognizer) {
let iv = sender.view as! UIImageView
let im = iv.image!
let im2 = UIGraphicsImageRenderer(size:im.size).image { _ in
UIColor.red.setFill()
UIBezierPath(rect: CGRect(origin:.zero, size:im.size)).fill()
}
iv.image = im2
}
I expect the image displayed, when I tap the image view, to be replaced by a solid red image. This works fine on my High Sierra machine running Xcode 9.4. But on my Sierra MacBook running Xcode 9.2, nothing visibly happens.
It's weird. By pausing in the debugger, I can see that the new image is being constructed correctly:
The image is being replaced, but the image view isn't being redrawn. Adding calls like setNeedsDisplay does nothing.
Moreover, if I then proceed to replace the image view's image with a different image, I see the red image!
iv.image = im2
delay(0.5) {
iv.image = im // causes im2 to appear!
}
Some sort of behind-the-scenes caching is evidently causing the image view to get behind in its display by one image.
Can anyone shed light on this? It's presumably a bug in iOS itself, and perhaps in 9.2 specifically; how would one work around it? (Obviously one could substitute another image view wholesale, but that wouldn't tell us what's going on with the caching.)
This seems to be a workaround:
iv.image = im2
delay(0.05) {
iv.image = nil
iv.image = im2
}
But what a horror... Omitting any of those assignments, or reducing the delay to zero (e.g. by calling DispatchQueue.main.async instead), causes the workaround to fail.
Encountered this problem in Xcode 13. Set the contentModel to center in the xib file
or
iv.contentMode = .center
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
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
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.
A layer's borderWidth and borderColor properties draw a border inside the view. Remykits pointed this out here.
A layer's shadow... properties cannot be used to create a border that both appears on all four sides and is opaque for reasons I showed here.
What I failed to specify in that question (and the reason I've opened a new one) is that I want the border to be outside the view. Increasing the frame of the view to compensate for the space lost, as has been suggested, doesn't work; I'm using a UIImageView, so even if the frame is increased, the image is still cropped.
Another suggestion was to change the contentMode of the UIImageView to .Center, in combination with changing the size of the view, but this doesn't work as the view then isn't the proper size.
The solution I first thought of was to create another UIView "behind" this UIImageView, and give it a backgroundColor to mimic the effect of a border. I also thought of creating a custom subclass of UImageView. Both courses of action, however, involve making calculations based on the frame of the view. I've had many problems with the frame not being set by AutoLayout at the proper time, etc.
Other things that come to mind are digitally adding a border to the image or positioning the image in a specific part of the UIImageView. (My attempt at the latter was imageView.layer.contentsRect = CGRectInset(imageView.bounds, 4, 4), which resulted in a strangely pixellated image.)
To be clear, what I'm looking for is this:
It really feels like there should be a simpler way to do this than creating a new class or view. Any help appreciated.
Aha! Stitching together aykutt's comment about resizing the image and changing the conentMode, Paul Lynch's answer about resizing images, and rene's (life-saving) answer about what to do your subviews actually aren't laid out in viewDidLayoutSubviews:
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
self.myContainer.setNeedsLayout()
self.myContainer.layoutIfNeeded()
var width: CGFloat = 4 //the same width used for the border of the imageView
var rect = CGRectInset(imageView.bounds, width, width)
var size = CGSizeMake(rect.width, rect.height)
UIGraphicsBeginImageContextWithOptions(size, false, 0.0)
image.drawInRect(CGRectMake(0, 0, size.width, size.height))
var new = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
self.imageView.contentMode = .Center
self.imageView.image = new
}