I feel like im overlooking something:
my image still shows up like a diamond shape. Im trying to get it to be circular.
class MenuViewController: UIViewController {
#IBOutlet var profileImageView: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
profileImageView.layer.cornerRadius = profileImageView.frame.size.width / 2;
profileImageView.clipsToBounds = true;
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
}
}
It is possible that the profileImageView is changing its size after the viewDidLoad and ending up smaller than it was when you set the corner radius. You can test this theory by moving your corner radius code to viewDidAppear.
It seems like you might need to change clipsToBounds = true to layer.masksToBounds = true, as the masking needs to happen on the layer, not on the image view itself. I have that same effect in my app, here's the code:
imageView.layer.cornerRadius = imageView.frame.size.width / 2.0
imageView.layer.borderColor = UIColor.whiteColor().CGColor
imageView.layer.borderWidth = 2.0
imageView.layer.masksToBounds = true
Hope that helps.
Related
So I'm following the the normal approach in Turing an image into circle :
image.layer.cornerRadius = image.frame.size.width/2.0f;
image.layer.borderColor = [UIColor blackColor].CGColor;
image.layer.borderWidth = 2;
image.clipsToBounds = YES ;
However when I used it in cells, first time it shows in Simi-perfect circle, but when I scroll to show new cells , all will be in perfect circle shape.
so my question is : why the first visible cells appear in a Simi-cirlce shape ?
This is how it looks like first time , but if I refresh or reload the page, everything is fine
Try to use this way
like in custom cell class
class ProfilePicCell: UITableViewCell {
#IBOutlet weak var image: UIImageView!
override func awakeFromNib() {
super.awakeFromNib()
image.layer.cornerRadius = image.frame.width / 2
image.layer.masksToBounds = true
}
}
in Objective C add this method in custom cell class
- (void)awakeFromNib
{
super.awakeFromNib()
image.layer.cornerRadius = image.frame.width / 2
}
Override layoutSubviews in the cell and after calling super.layoutSubviews update the image.layer.cornerRadius there. Then when the layout of the cell is updated after the cell gets visible, the corner radius will be updated accordingly.
So in swift, in your cell implementantion you would do something like:
override func layoutSubviews() {
super.layoutSubviews()
// now the frames were recalculated, and we can update cornerRadius
image.layer.cornerRadius = image.bounds.size.width / 2.0
}
I am trying to make a circular view which has an adaptive size based on auto layout, currently i set the constraints, then i attempt to round the image in the viewwilllayoutsubviews method.
This is resulting in oddly shaped views that are not circular, how can i resolve this?
init:
profilePic = UIImageView(frame: CGRect.zero)
profilePic.clipsToBounds = true
profilePic.contentMode = .scaleAspectFill
constrains:
profilePic.snp.makeConstraints { (make) -> Void in
make.centerX.equalTo(self).multipliedBy(0.80)
make.centerY.equalTo(self).multipliedBy(0.40)
make.size.equalTo(self).multipliedBy(0.22)
}
subviews:
override func viewWillLayoutSubviews() {
self.navigationMenuView.profilePic.layer.cornerRadius = self.navigationMenuView.profilePic.frame.size.width / 2.0
self.navigationMenuView.profilePic.layer.borderWidth = 2
self.navigationMenuView.profilePic.layer.borderColor = UIColor.white.cgColor
}
result:
I guess you want this (sorry for the plain autolayout, but I don't use snapkit):
profilePic.heightAnchor.constraint(equalTo: profilePic.widthAnchor).isActive = true
profilePic.widthAnchor.constraint(equalTo: self.view.widthAnchor, multiplier: 0.22).isActive = true
Instead of this:
make.size.equalTo(self).multipliedBy(0.22)
I had the same problem
This is my solution:
let profilePicHeight: CGFloat = 30.0
Add this line of code to your constrains:
profilePic.snp.makeConstraints { (make) -> Void in
make.height.width.equalTo(self.profilePicHeight)
...
}
then:
override func viewWillLayoutSubviews() {
self.navigationMenuView.profilePic.layer.cornerRadius = self.profilePicHeight / 2.0
...
}
My suggestion here is don't treat it like a circular view from the outside of it. Make the view itself conform to being a circle so that you can use it anywhere.
INSIDE the view give it constraints like...
widthAnchor.constraint(equalTo: heightAnchor).isActive = true
This will make it square (with undetermined size).
Then in the function layoutSubviews...
override func layoutSubviews() {
super.layoutSubviews()
layer.cornerRadius = bounds.size.width * 0.5
}
This will make the square into a circle.
I'm trying to make a circular image in Swift, I've searched around and watched a couple YouTube videos. The solutions proposed are extremely easy, but when I used them I get an image formed as an eye instead of a circle, below is my view controller and a picture of the UI
var experimentIdentifier: String = ""
#IBOutlet weak var foregroundImage: UIImageView!
override func viewDidLoad() {
super.viewDidLoad()
foregroundImage.layer.cornerRadius = (foregroundImage.frame.size.width) / 2
foregroundImage.layer.masksToBounds = true
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
It's because your image is not a square.
See this problem in action:
Set the image to a width : height = 2 : 1 rectangle in storyboard
then run, the image will look like
but if the image is a square, like this in storyboard
click run, it'll be like
Enjoy coding!
Try This ,
let profileImageView = UIImageView()
profileImageView.frame = CGRectMake(150, 150, 60, 60)
profileImageView.layer.borderWidth = 1
profileImageView.layer.borderColor = UIColor.grayColor().CGColor
profileImageView.backgroundColor = UIColor.yellowColor()
profileImageView.layer.cornerRadius = 60/2
let image = UIImage(named: "yourImageName")
profileImageView.layer.cornerRadius = profileImageView.frame.size.height/2
profileImageView.clipsToBounds = true
Your image is not a square i guess. To make it square you have to make sure that height and width of the image are equals and then also add these two properties as well
foregroundImage.layer.cornerRadius = 0.5 * your image height
foregroundImage.layer.masksToBounds = true
foregroundImage.clipsToBounds = true
I hope this will help
make sure the image is a square then add this code
foregroundImage.layer.cornerRadius = side/2
foregroundImage.layer.masksToBounds = true
I have a subclass of UIButton:
class ColorButton: UIButton {
override func awakeFromNib() {
self.layer.backgroundColor = UIColor.blackColor().CGColor
self.layer.cornerRadius = frame.size.width / 2
self.clipsToBounds = true
}
}
In interface builder, I set the button with 4 constraints: width = 100, height = 100, centerX, centerY.
The button disappears when I run my code on the simulator. However, if it set
self.layer.cornerRadius = 50
it works. I cannot figure it out. If anybody understand this problem, please tell me.
Add in awakeFromNib first line:
self.layoutIfNeeded()
Code:
class ColorButton: UIButton {
override func awakeFromNib() {
self.layoutIfNeeded()
self.layer.backgroundColor = UIColor.blackColor().CGColor
self.layer.cornerRadius = frame.size.width / 2
self.clipsToBounds = true
}
}
Your code works just fine in a fresh project so I suspect the problem is somewhere else. You forgot to call super.awakeFromNib() though. From Apple docs:
You must call the super implementation of awakeFromNib to give parent
classes the opportunity to perform any additional initialization they
require. Although the default implementation of this method does
nothing, many UIKit classes provide non-empty implementations. You may
call the super implementation at any point during your own
awakeFromNib method.
I'd like to call
[self.view setContentMode:UIViewContentModeScaleAspectFit | UIViewContentModeCenter];
where self is an instance of UIViewController. This doesn't seem to work; what are the direct alternatives, if any?
The contentMode is not a mask; you can't use | to combine values, you'll have to pick one. UIViewContentModeScaleAspectFit should center the content if it doesn't fit the view.
You will need to set contentMode once when the view loads and then center it in viewWillLayoutSubviews which is called upon device rotation.
override func viewDidLoad() {
super.viewDidLoad()
//additional code to instantiate and setup image
imageView.contentMode = .ScaleAspectFit
self.view.addSubview(profileImageView)
}
override func viewWillLayoutSubviews() {
imageView.center.x = view.center.x
//or imageView.center = view.center
//or imageView.center.y = view.center.y
}