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
}
Related
I have a rectangular view that I want "perfectly" round borders on the ends. I'm rounding the corners like so:
contentView.layer.cornerRadius = 30; //arbitrary number
contentView.layer.borderWidth = 1.0
contentView.layer.borderColor = UIColor.white.cgColor
And this is my result:
And this is the result I'm aiming for:
I'd like to determine the cornerRadius for my view to achieve rounded ends dynamically. Any ideas? Thanks!
You’re on the right way. Somewhat conventional approach to do it looks like this:
contentView.layer.cornerRadius = contentView.bounds.height / 2
If your "contentView" is a class that inherits from a UIView then:
class CustomView: UIView
{
...
override func layoutSubviews()
{
super.layoutSubviews() //Don't want to change the default behavior of this func. Just want to add to it.
layer.cornerRadius = bounds.height / 2
}
...
}
If it's just a plain UIView in a UIViewController, then you can update it in the UIViewController's viewWillAppear(_ animated: Bool) method.
Round UIImage disappear in UITableViewCell only in Swift 3, in previous version its working fine, but i am not getting any best solution for it.
Here is my code:-
cell.imgView_User.layer.cornerRadius = cell.imgView_User.frame.width/2
cell. imgView_User.layer.masksToBounds = false
cell.imgView_User.clipsToBounds = true
cell.contentView.layoutIfNeeded()
In my case this working fine following is my working code :
let imageview = cell.viewWithTag(105) as! UIImageView
imageview.layer.cornerRadius = imageview.frame.width/2
imageview.clipsToBounds = true
imageview.layer.borderWidth = 1.0;
imageview.layer.borderColor = UIColor.black.cgColor
I have a set border color for identify the our result.
Set the cornerRadius manually fixed the problem for me.
For example:
imgView.layer.cornerRadius = 20.0;
Only use this if you know your image view's frame won't affected by auto layouts. i.e. a fiexed size.
in iOS 10 , all layer operation do in "viewDidLayoutSubviews" or "viewDidAppear" method for uiviewController.
For UITableViewCell or collectionViewCell , subClass your cell and write layer operation in "drawRect" method
for your case Ex:
override func draw(_ rect: CGRect) {
self.imgView_User.layer.cornerRadius = self.imgView_User.frame.width/2
self.imgView_User.layer.masksToBounds = false
self.imgView_User.clipsToBounds = true
}
I have a simple problem that I cannot find a solution to on google, the docs or here.
I have a Collectionview in my view controller. I have created a custom cell, DescriptionCell, that contains a UIImage. I want this image to have rounded corners. However, I don't know where to set the cornerradius on the UIImage layer. I have tried in the cells' awakeFromNib method, in the delegate method CellForRowAtIndexPath and overriden LayoutSubview in the cell but it does not work.
Where should I put the code to set the radius for the UIImage?
To specify, I know how to create rounded corners of a UIImage. But if it is a subview of a Collectionview cell, I do not know where to set the cornerradius.
Here is code for my descriptionCell
class DescriptionCell: UICollectionViewCell {
#IBOutlet weak var mImage: UIImageView!
override func awakeFromNib() {
//mImage.layer.cornerradius = 5
//Does not work, the image is still square in the cell
}
And in the cellforRowAtIndePath
func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
var cell = collectionView.dequeueReusableCellWithReuseIdentifier("descriptioncell", forIndexPath: indexPath) as! DescriptionCell
//cell.mImage.layer.cornerradius = 5
//Does not work, the image is still square in the cell
return cell
}
Thanks in advance!
Well you're using part of the code from the answer you said you were using.
the other part is imageView.clipsToBounds = true
Update your awakeFromNib like this:
override func awakeFromNib() {
mImage.layer.cornerRadius = 5
mimage.clipsToBounds = true
}
To make it a circle you need to set cornerRadius to half of the square height. In your cellForItemAtIndexPath add these lines:
cell.layoutIfNeeded()
cell.mImage.layer.cornerRadius = cell.mImage.frame.height/2
Update
To avoid layoutSubviews from being called twice, override layoutSubviews in your DescriptionCell class and put the code there:
override func layoutSubviews() {
super.layoutSubviews()
layoutIfNeeded()
mImage.layer.cornerRadius = mImage.frame.height/2
}
Have you tried placing it inside the custom UICollectionViewCell's init function?
override init(frame: CGRect) {
super.init(frame: frame)
image.layer.masksToBounds = true
image.layer.cornerRadius = 10
}
You can also create an extension like:
extension UIView {
func addBorder(color: UIColor, cornerRadius: CGFloat = 10, borderWidth: CGFloat = 1.0) {
layer.borderWidth = borderWidth;
layer.borderColor = color.cgColor
layer.cornerRadius = cornerRadius
layer.masksToBounds = true
}
}
Thanks in advance for the help.
I have a UITableView within a main view contoller. Within the prototype cell, I have a UIImageview. In the code below everything works until I add the 5 lines to apply a circular mask and border. Once I do that, the images will not load unless I scroll the cells. The mask and border do get applied perfectly however. Will be great when it works... but until then.
Certainly this has been seen before. I'm a swift/objective-C newbie.
Working in swift for this one.
Code below;
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("mixerCell", forIndexPath: indexPath) as! MixerTableViewCell
// set label background color to clear
cell.textLabel?.backgroundColor = UIColor.clearColor()
// set highlight selection to none
cell.selectionStyle = .None
// set image for cell
let imageView = cell.viewWithTag(1) as! UIImageView
// put circular mask and border. This is the problem code that causes initial load of the tableview images to show up blank.
imageView.layer.cornerRadius = imageView.frame.size.width / 2;
imageView.clipsToBounds = true;
let color1 = UIColor(white: 1.0, alpha: 0.5).CGColor as CGColorRef
imageView.layer.borderWidth = 2;
imageView.layer.borderColor = color1
// assign image
imageView.image = UIImage(named: mixerSounds[indexPath.row])
return cell
}
initial view load
after scroll
your code is perfectly working for me. Here i am using Xcode-7. i think you are using Xcode-6.3 or less version. just upgrade it to Xcode- 7. and if you are using the same then just check your heightforRowAtIndexpath or other delegates there should be some issue.
thanks
Try changing the below lines,
// replace this
let imageView = cell.viewWithTag(1) as! UIImageView
// to
let imageView = cell.yourImageViewName
/* yourImageViewName is the outlet
reference name you have given in the
MixerTableViewCell custom class.
*/
Edit 2: Just for debugging purposes,
hardcode the image name and check if the image appears on the all the cells.
imageView.image = UIImage(named: "first1.png")
override func tableView(tableView: UITableView!, cellForRowAtIndexPath indexPath: NSIndexPath!) -> UITableViewCell!
{
let cellIdentifier = "cell"
var cell : UITableViewCell = tableView.dequeueReusableCellWithIdentifier(cellIdentifier) as UITableViewCell
cell.image_View.image = UIImage(named: mixerSounds[indexPath.row])
println("The loaded image: \(image)")
cell.image_View.layer.masksToBounds = false
cell.image_View.layer.borderColor = UIColor.blackColor().CGColor
cell.image_View.layer.cornerRadius = image.frame.height/2
cell.image_View.clipsToBounds = true
return cell
}
Give imageview outlet to cell and not give imageview name because by default name is imageview so take diffrent name
It looks like the problem is using clipToBounds = true I am facing the same issue while making circular UIImageView inside UITableViewCell
I didn't find the exact solution but for now I found a way to do this
if (indexPath.row == indexPath.length && !isTableReloaded)
{
let dispatchTime: dispatch_time_t = dispatch_time(DISPATCH_TIME_NOW, Int64(0.000000001 * Double(NSEC_PER_SEC)))
dispatch_after(dispatchTime, dispatch_get_main_queue(), {
self.reloadTableView()
})
}
func reloadTableView()
{
isTableReloaded = true
self.tableViewContacts.reloadData()
}
Here isTableReloaded is a Bool type var which is initialized to false in viewDidLoad()
and the if condition is to be placed at the last of cellForRowAtIndexPath but before return statement
This will resolve our problem but do not rely on this as this is not the best approach.
Please post solution for this if any one found the better approach.
Here is a perfect and state away solution for circular image in UITableview Cell.
Simply modify your UITableviewCell (custom cell) class with below code.
override func awakeFromNib() {
super.awakeFromNib()
imgEvent.layer.frame = (imgEvent.layer.frame).insetBy(dx: 0, dy: 0)
imgEvent.layer.borderColor = UIColor.gray.cgColor
imgEvent.layer.cornerRadius = (imgEvent.frame.height)/2
imgEvent.layer.masksToBounds = false
imgEvent.clipsToBounds = true
imgEvent.layer.borderWidth = 0.5
imgEvent.contentMode = UIViewContentMode.scaleAspectFill
}
It will also helps to solve the problem of image circular only after scrolling table..(if any!)
let width = cell.frame.size.width
cell.img.layer.cornerRadius = width * 0.72 / 2
0.72 is the ratio of the cell width to image width, for eg. cellWidth = 125 and imageWidth = 90, so 125/90 would give 0.72. Do similar calculation for your image.
First: Images doesn't load until you scroll, because when cellForRowAtIndexPath methods called the constraints doesn't set for image until now, so when scrolling the constraints was added and the image appears, so if you set proportional width and height for imageView (width==height) in cell then
do that
let w = tableview.frame.width*(proportional value like 0.2)
imageView.layer.cornerRadius = w / 2
imageView.clipsToBounds = true;
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.