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
}
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 have a UIView and a shadow around it. The problem is that the shadow looks good in the simulator but not on a real device. Both simulator and my iPhone have the iOS version.
My code: I use it inside a UITableViewCell class.
override func awakeFromNib() {
super.awakeFromNib()
let shadowFrame: CGRect = cellView.layer.bounds
let shadowPath: CGPath = UIBezierPath(rect: shadowFrame).cgPath
cellView.layer.shadowOffset = CGSize(width: 0, height: 1)
cellView.layer.shadowColor = UIColor.gray.cgColor
cellView.layer.shadowRadius = 1
cellView.layer.shadowOpacity = 0.6
cellView.clipsToBounds = false
cellView.layer.shadowPath = shadowPath
}
The simulator, 2. my iPhone:
EDIT
The iPhone 7 simulator shows the same shadow as my iPhone 6.
Only the iPhone 7plus Simulator can display the shadow right. Is that a Xcode bug?
This code will work fine when the dimensions of the view are the same as your nib. However, awakeFromNib is likely to be called before the autolayout engine has completed its layout passes, meaning cellView.layer.bounds will not be set to the dimensions that rendered on screen. You should try moving the setting of your shadow path to layoutSubviews in your UITableViewCell subclass or cellForRowAtIndexPath in your UITableViewDataSource
Update
You can also try to just observe when your table view cell's frame is set and update the shadow path then.
class MyTableViewCell: UITableViewCell
{
var cellView: UIView?
override var frame: CGRect
{
didSet
{
guard let cellView = self.cellView, self.frame != oldValue else { return }
cellView.layer.shadowPath = UIBezierPath(rect: cellView.bounds).cgPath
}
}
}
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.
I'm trying to create a search bar like this:
But I'm noticing that I'm probably going to have to replace the search bar with my own image because the search bar corners comes out wrong when I set:
self.searchController.searchBar.layer.cornerRadius = 50 // I've tried other numbers besides this too with no luck
self.searchController.searchBar.clipsToBounds = true
If I set this:
self.searchController.searchBar.layer.cornerRadius = self.searchController.searchBar.bounds.height/2
The search bar comes out like this:
Which still isn't exact like in the image.
Is there a way to replace the left and right side of the textfield with an image that way I can use the rounded corners from my custom search bar?
I am using this code UISearchBar but you can use this code with UISearchController.
let searchBar = UISearchBar()
searchBar.sizeToFit()
searchBar.placeholder = "Search"
navigationItem.titleView = searchBar
if let textfield = searchBar.value(forKey: "searchField") as? UITextField {
textfield.textColor = UIColor.blue
if let backgroundview = textfield.subviews.first {
// Background color
backgroundview.backgroundColor = UIColor.white
// Rounded corner
backgroundview.layer.cornerRadius = 14;
backgroundview.clipsToBounds = true;
}
}
You should change the radius of searchTextField inside UISearchBar .
you can do that like this :
searchBar.searchTextField.layer.cornerRadius = 20
searchBar.searchTextField.layer.masksToBounds = true
* searchBar is an outlet of UISearchBar from storyBoard
The issue here is you are setting the corner radius on the UISearchBar, not the UITextField inside it. You can do some sort of hack to get the UITextField, but that's not really recommended.
As you mentioned in your question, you'll need to use custom images and the methods shown here: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UISearchBar_Class/#//apple_ref/doc/uid/TP40007529-CH3-SW40
This IS working for me in swift 3 iOS 10:
searchController.searchBar.layer.cornerRadius = 20
searchController.searchBar.clipsToBounds = true
ez way for searchbarview
for subview & POPUPs [Swift 5]
override func layoutSublayers(of layer: CALayer) {
searchBarPopup.clipsToBounds = true
searchBarPopup.layer.cornerRadius = 10
searchBarPopup.layer.maskedCorners = [ .layerMaxXMinYCorner, .layerMinXMinYCorner]
}