Circular image is square on first table refresh


Circular image is square on first table refresh



I have a search bar connected to my UITableView.


UITableView



Here is my code so far:


func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = SongPicker.dequeueReusableCell(withIdentifier: "cell")!

// Image
cell.imageView?.image = songHandler.songItems[indexPath.row].songImage?.cropToBounds()
cell.imageView?.layer.cornerRadius = cell.imageView!.frame.width / 2
cell.imageView?.layer.masksToBounds = true
cell.imageView?.layer.borderWidth = 3
cell.imageView?.layer.borderColor = UIColor.lightGray.cgColor

// Song name
cell.textLabel?.text = songHandler.songItems[indexPath.row].songName

// Artist name
cell.detailTextLabel?.text = songHandler.songItems[indexPath.row].songArtist

return cell
}



(SongPicker is my table)


SongPicker



By printing out the result of cell.imageView?.layer, I can see that when the images first load, they do not have the cornerRadius property set within the instance. After they reload properly, the property is set.


cell.imageView?.layer


cornerRadius



However, when the cells move out of view or updated via getting new information (.reloadData() does nothing), the images in the cells are circular.


.reloadData()



There are other question about this, but everyone repeats that you need to set the cornerRadius property and the masksToBounds. This, in no way, would help solve my problem as those properties are clearly set.


cornerRadius


masksToBounds



I have tried making an extension to a UITableViewCell with the image layer code as well, but it has the exact same results.


UITableViewCell



Why are my images starting off square, and how can I easily fix this?



enter image description here



If you have any question please ask





Did you try setting your cornerRadius in the Storyboard (setting layer.cornerRadius of type Number in the User Dedined Runtime Attributes)? Also, don't use dequeueReusableCell(withIdentifier:) as it could return nil and crash your app due to the forced unwrapping. Use dequeueReusableCell(withIdentifier:, for:) which ensures an actual UITableViewCell.
– Alejandro Iván
Jun 29 at 19:25



cornerRadius


layer.cornerRadius


Number


dequeueReusableCell(withIdentifier:)


nil


dequeueReusableCell(withIdentifier:, for:)


UITableViewCell




1 Answer
1



Actually the imageView's frame is .zero at the moment when you are setting the cornerRadius of its layer. If you have fix size for the imageView then you can set cornerRadius as half of the width and it will work fine. Something as below,


imageView's frame


.zero


cornerRadius


imageView


cornerRadius


width


cell.imageView?.layer.cornerRadius = 50 //If width&height is 100 fix.



Second option is to set the correct cornerRadius by overriding the layoutSubviews method because this method ensures that your cell has laid out its size and you will get correct frame for subViews


cornerRadius


overriding


layoutSubviews


cell


frame


subViews


class MyTableViewCell: UITableViewCell {

override func layoutSubviews() {
super.layoutSubviews()

self.imageView?.layer.cornerRadius = self.imageView!.frame.width / 2
self.imageView?.layer.masksToBounds = true
self.imageView?.layer.borderWidth = 3
}
}





Also, just to note, I did the second option
– George_E_2
Jun 29 at 19:46





Yes, that is more cleaner as you are putting cell specific code in its own class.
– Kamran
Jun 29 at 19:48






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

Opening a url is failing in Swift

Opening a url is failing in Swift breakpointing inside the callback and logging success shows false. I added itms-apps to my plist: LSApplicationQueriesSchemes and put this in my app delegate: func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool { return true } func moreTapped() { let url = NSURL(string: "itms-apps://itunes.com/developer/quantum-productions/id979315877") if #available(iOS 10.0, *) { UIApplication.shared.open(url! as URL, options: [:], completionHandler: {(success: Bool) in }) } else { UIApplication.shared.openURL(url! as URL) } } Are you testing on a real device? – rmaddy Jun 21 at 23:57 I try on a device, get "Cannot Connect to App Store". Device is online ...
Read more

Exoplayer HLS doesn't show subtitle

Exoplayer HLS doesn't show subtitle I am developing a streaming app. I used for this purpose exoplayer2. I am using HLS streaming protocol. I need to show subtitle when streaming my videos. Everything goes well except subtitle. My player doesn't show the sample subtitle. My code is as following: uri = Uri.parse(url); videoSource = new HlsMediaSource.Factory(DATA_SOURCE_FACTORY).createMediaSource(uri); Uri uri1 = Uri.parse("https://bitdash-a.akamaihd.net/content/sintel/hls/subtitles_en.vtt"); Format subtitleFormat = Format.createTextSampleFormat( null, // An identifier for the track. May be null. MimeTypes.APPLICATION_SUBRIP, // The mime type. Must be set correctly. Format.NO_VALUE, // Selection flags for the track. "en"); DefaultBandwidthMeter bandwidthMeter2 = new DefaultBandwidthMeter(); DefaultDataSourceFactory dataSourceFactory = new DefaultDataSourceFactory(this, U...
Read more

Export result set on Dbeaver to CSV

Export result set on Dbeaver to CSV Normally I use Dbeaver for windows and always export my result set like this: run my query --> select the result --> export the result set --> select export to clipboard --> done This step by step puts my result set in my clipboard and I can paste it wherever I want to work with it. The problem is that now I am using dbeaver for mac and this guide is not working. I can go on until the moment that I select my result set like in the image below: exporting data set But once I go further in the process, in the last step I get: no query Note that in "source" it was suppose to show the query that originated the result set, but instead it says just "select. As a result it does't select my result or anything (besides being "successful"). Normally my query would show up there automatically and I couldn't find any option that corrects this problem in the menus. Please help me! Thanks. Aft...
Read more