How to Set UIImageView in circle Swift 5 - swift

This code is only working with fix height and width. How can Round UIImageView when we use multiplier?
Here, is the code that Circle my ImageView. Width and Height is 300.
class MusicViewController: UIViewController {
#IBOutlet weak var imgAlbum: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
imgAlbum.layer.borderWidth = 1
imgAlbum.layer.masksToBounds = false
imgAlbum.layer.borderColor = UIColor.black.cgColor
imgAlbum.layer.cornerRadius = imgAlbum.frame.height/2
imgAlbum.clipsToBounds = true
}
}
If I change my height and width to multiplier like. Now, the multiplier of Height 0.5 and width 0.8.
(Proportional height and width to SuperView)

As #RajaKishan and #aiwiguna both said that you can't get a square image with both proportional height and width constraint together because then you can not get a round circle with different height and width.
You can set width or height proportional to superview and set the aspect ratio to 1:1 then you can change the multiplier and get the circle properly. You can check to attached image for constraints
then set cornerRadius in viewDidLayoutSubviews(), not in viewDidLoad(). (viewDidLoad() is called before the layout constraints change the view height, and only once. viewDidLayoutSubviews() is called any time your view's geometry changes, so you should invoke any layout logic there.
override func viewDidLayoutSubviews() {
self.yourImageView.layer.cornerRadius = self.yourImageView.bounds.height/2
self.yourImageView.clipsToBounds = true
}

you will not get a square by using proportional width and proportional height constraint together like that, in different device it will have different height and width
my suggestion is to use only one proportional width or proportional height (which one you want) and use aspect ratio constraint 1:1 on the view

Related

NSGridView custom view intrinsic size

I'm building a simple NSGridView, and want to have a custom NSView as each element of the grid. Eventually, each NSView will be a xib based label (NSTextField) centered in the NSView.
The problem I am having is with the intrinsic size of the NSView. I want to define the size of the NSView and have auto layout work based on that. I added this code to the custom view (labelView):
override var intrinsicContentSize: NSSize {
return NSSize(width:100, height:100);
};
And it is indeed called; but apparently ignored. As a test, I have on the same row some other labels, and the height for the row is always set to the largest of the row text heights (including the label in the custom view); but the length is set to the longest of column text fields, ignoring the label in the custom view. And anyway, I want to arbitrarily make the NSView a certain height and length, as I tried (but failed) to do with the intrinsicContentSize.
NSStackview seems to do the right thing; but NSGridView does not.
I can force the width of a particular column with
grid.column(at:0).width = 400;
but want I really want to do is define the size of the NSView, and let autolayout use that as a building block.
This strikes me as a conceptual error on my part, so if someone could explain these NSGridView-autolayout-NSView subtleties, I think many might benefit.
I was having the exact same issue, tried to use custom NSView's inside a NSGridView and couldn't get them to draw correctly. What finally worked for me was setting the following:
let gridSize = 5
let cellSize: CGFloat = 50
gridView.xPlacement = .fill // this was key part of the solution
gridView.yPlacement = .fill
for i in 0 ..< gridSize {
gridView.row(at: i).height = cellSize
gridView.column(at: i).width = cellSize
}
Note that I'm setting the size of each cell with the row height and column width of the NSGridView, and not using the NSView size, but this is the only way I got it working.

Rotating a UICollectionView leads to error

When I rotate the device with a UICollectionView I get an error:
the item height must be less than the height of the UICollectionView minus the section insets top and bottom values, minus the content insets top and bottom values.
I think that this mistake is within my UICollectionViewDelegateFlowLayout where I try to set the height
if UIApplication.shared.statusBarOrientation.isLandscape {
height = min( Constants.screenWidth, Constants.screenHeight )
}
return CGSize(width: view.bounds.width, height: (height - 300) / 1 )
as you can see I've tried to alter the height for the orientation, but ultimately this does not change as I thought it should.
Complete code is in this GitHub link: https://github.com/stevencurtis/CollectionViewRotate
I want to stop getting this error, and ultimately because the height is incorrectly set when I rotate the device the image is larger than the bounds of the view.
How can I set up my flow layout so this doesn't happen.
The height of the screen is irrelevant. What you really care about is the height of the collectionView.
Use:
let height = collectionView.bounds.height
By using that value, the height will be correct when you rotate the phone without your having to check for it explicitly. You'll still want to adjust for insets if you have any.
You should also use collectionView.bounds.width for the width in place of view.bounds.width.

Constraint View Inside Content Of Image View Swift

I have an image view that gets a dynamic image, and uses aspect fit to determine the frame of the image itself. I am trying to constraint a view inside of the image view, but when the image dynamically resizes, the view inside of it doesn't also dynamically resize when my constraints are just set to the borders of the image view.
Is there any way to set the constraint to the content size that the image is after it resizes, inside interface builder?
Thank you!
When you set the image view’s frame, pick an initial height or width—not both. Then, get image.size and calculate the proportional other dimension. For example:
let width = 100
let height = width * image.size.width / image.size.height *
imageView.frame.size = CGSize(width: width, height: height)
imageView.contentMode = .scaleAspectFit
imageView.image = image
Now your imageView is exactly the size of your image. You can do the same thing with a fixed height by simply replacing “height” with “width” and vice versa in the code above.
Hope this is what you’re looking for.

Determine width of UIView in Swift

I have an autolayouted UIView and need to know the width of it. How do I find the width the easiest way in Swift?
You can find the width of any view by
let width = yourView.bounds.width
If you have applied a width constraint to the view and you have an outlet for that constraint then you can find it by.
let width = yourWidthConstraint.constant
The right place to get the UIScreen frame data is in viewDidLayoutSubviews as it is called after the subViews have been laid out in screen also it is called after every time your device changes orientation such as your width will be different when your user goes into landscape mode.This is called after viewWillAppear:
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
let viewWidth = self.myView.bounds.width
}
Inside implementation your view you can use
override func layoutSubviews() {
super.layoutSubviews()
// you can get width of view in this function
print(self.frame.size.width)
}

Making a UIButton a % of the screen size

I noticed certain button sizes look great on one the iPhone 5 simulator but do not look as good on the iPhone 6 simulator and this is because the heights or constraints that I place on the UIButtons end up leaving a lot of blank space down the bottom of my App Screen.
I would like to have a button that is 40% of the screen size regardless of what device I am simulating on.
Any ideas on how to make the size of the button stay 40% of the screen size regardless of the device?
Ctrl drag from button to superview and select Equal Widths
Open Size Inspector edit Equal Widths constraint and set multiplier to 0.4.
And you will see something like this:
Add missing constraints and update frames.
You can't set a constraint to be 40% of the screen height. However, if the button always has a 20px leading and trailing to the superview you could use that width and set an aspect ratio height.
Another way could be to use UIScreen.mainScreen().bounds.size.height * 0.4 for your button height.
A third way is to use the button's superview to set the height. Assuming that your button is a direct child of a UIViewController's view: view.bounds.size.height * 0.4.
There's probably a bunch of other ways to do this as well but none of them will involve setting the height to an actual percentage as far as I'm aware.
This function gives you the bounds of the screen
var bounds = UIScreen.mainScreen().bounds
And then you can set the button width multipliying 0.4 x bounds.size.width
Regards
Swift 4.2
In code it's really easy:
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(button)
button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
button.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
button.widthAnchor.constraint(equalToConstant: 100).isActive = true
button.heightAnchor.constraint(equalToConstant: UIScreen.main.bounds.height * 0.4).isActive = true
}
or use this instead of current heightAnchor:
button.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.4).isActive = true
hope this help :)