UITableViewCells bottom edge flickering when app enters foreground - ios

I've build an app which contains an UITableView with a bunch of cells. Inside the cells I've got a view, which fill the whole cell. I've configured the tableview like this:
tableView.separatorStyle = .none
tableView.backgroundColor = UIColor(red: 24/255.0, green: 34/255.0, blue: 41/255.0, alpha: 100)
tableView.separatorColor = UIColor(red: 26/255.0, green: 34/255.0, blue: 40/255.0, alpha: 100)
Whenever the app enters the foreground, I got those little lines flickering for 0.5 seconds or so. To be clear, I don't want those.
And this is how it looks like when the app fully entered the foreground, and how it is supposed to look like:
Any ideas how to get rid of them?
EDIT 1:
I'm starting to doubt that the flickering is related to the separators, because it is only happening between cells in a section, not between the section-cell and the first cell in a section. I've grabbed some screenshots of the view hierarchy and the constraints related to the view (Foreground view) I show in the cell.
EDIT 2:
If I set the top and bottom constraint to -2 instead of 0, there's no flickering at all, however it's not as I want it visually. So the flickering is not related to the separators at all.

Trick for removing the cell separators.
Objective-C
- (void)viewDidLoad {
[super viewDidLoad];
self.tableView.tableFooterView = [UIView new];
}
Swift
override func viewDidLoad() {
super.viewDidLoad()
tableView.tableFooterView = UIView()
}

Usually flickering happens when you're returning a wrong heightForRowAtIndexPath.
In your case, you're returning a little smaller than your cell's actual height I guess.
So try to set "clipToBounds" of your cell to "true" and check if it works.

Try setting "Renders with edge antialiasing" to YES in your info.plist.

I think here your issue with UITableViewStyle. Right now you are using UITableViewStyle Grouped. So, line between cell isn't UITableViewCellSeparator it's Group Table 1 pixel header and footer space. So,
I have two solutions:
Either use UITableView background color same as cell background color.
Change UITableView style to Plain
GroupTable SS
or
PlainTable SS
I hope it'll help you. And solve your issue :)

I think it's not related to the separator, because the separator doesn't cover the whole screen, it must be related to your constraints, try changing the background color of the BackgroundContainerView, the DepartureCell and the TableView, one of these 3 views should have the dark grey color as a background color.

Would it be possible that the tableview is inherited from another one and seperatorStyle could be set different in the super class? Then, you need override it.

Set this in viewDidLoad()
tableView.separatorStyle = .none

You can do it as per follows, from your storyboard to avoid that separator from UITableView.

If you set
tableView.separatorStyle = .none
on viewDidLoad(), it will flicker
you need to it before like in viewWillAppear() or in the storyboard

Try setting the tableview separator color with full transparency it might help
tableView.separatorColor = UIColor(red: 26/255.0, green: 34/255.0, blue: 40/255.0, alpha: 0)
Do this in viewWillAppear
If that will not help check the view hierarchy maybe there is an issue with the cell rendering in
func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath)
Check this post and its swift 4 update
or try adding this extension to your ViewController
extension UITableViewCell {
func removeCellSeparators() {
for subview in subviews {
if subview != contentView && subview.frame.width == frame.width {
subview.removeFromSuperview()
}
}
}
}
then try calling it in just before you return the cell
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "YourCellIdentifier", for: indexPath)
cell.removeSeparators()
return cell
}
if this doesn't help then please post more information about your setup, code or maybe host a minimal version of your app with the tableView having the issue on gitHub so that I can help.
EDIT 1:
Try setting the rowHeight / cellHeight to 15 pixels more than what it currently is if that will solve your problem than the cellHeight is what needs tweaking could be that it only needs to be 2-4 pixels higher. Probably as the app is entering the foreground autolayout is trying to do what it can do show everything as you want however some constraints are ambiguous therefore whilst entering from the background there is the view appearing animation from the system for about half a second and there is your flickering as well.

Can you use Xcode "Debug View Hierarchy" to find question View , and use "KVC" remove that view.
ps. my english is poor , i hope i can help you

From storyboard select table view separator to None.
In Separator Inset select custom and remove left value make it from 15 to 0.
Build and run it again now check.

Make tableView's backgroundColor and separatorColor exactly the same as in:
tableView.backgroundColor = UIColor(red: 24/255.0, green: 34/255.0, blue: 41/255.0, alpha: 100)
tableView.separatorColor = UIColor(red: 24/255.0, green: 34/255.0, blue: 41/255.0, alpha: 100)

Related

How to set UITableView cell separator to 'None' when selected

I am working on a UITableView with customized cells from a .xib. I have added a blue border to the top and bottom of the .xib to give a customized spacing between the cells. I don't want a separator between the cells so I set the Separator to None in the storyboard. This is the look that it gives me.
This works great until I select a cell, at which point I am seeing this (notice the white separators above and below the selected cell):
I am using this code in the cellForRowAt function to set the color of the selected cell to white, but this also seems to force the separator to be white:
let selectedView = UIView()
selectedView.backgroundColor = .white
cell.selectedBackgroundView = selectedView
I am trying to figure out how to remove the separator lines when the cell is selected. I have tried several things on the storyboard and in code, but haven't found anything that works.For example:
I can't use cell.selectionStyle = .none because I want the cell background to turn white when selected.
This doesn't change anything when called from viewDidAppear: tableView.separatorColor = UIColor.clear
I tried the answer here Hide separator line on one UITableViewCell by Avinash but it didn't do anything.
Any ideas?
I found that this solution worked for me.
I changed my code in the cellForRowAt function to the clear color:
let selectedView = UIView()
selectedView.backgroundColor = .clear
cell.selectedBackgroundView = selectedView
try change the tableView.separatorColor = tableView.backgroundColor
and set you table style to grouped

Adding an overlay view to UICollectionViewCell - keeps overlaying

I'm trying to add a 50% black alpha view on every collection view cell. The collection view cells have a background photograph and text on top. Would like the overlay view to be in between the two.
In my cellForItemAt method, I use the following:
let overlayView = UIView()
overlayView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
overlayView.frame = cell.bounds
cell.addSubview(overlayView)
The problem is as i scroll down, then up, the overlay keeps adding, making the alpha much darker than 50%. Additionally, the overlayView is being added on top of my text (I need it below the text.)
How can I prevent the overlay from adding multiple times, and adding it in between the correct layers of the cell?
UITableView has a method of reusing cells to make it more efficient (keeping only the required cells in memory). Because of this the reused cell may already have this subview, so calling addSubview again causes another view to be added on top of it.
Here is how to solve this:
Move addSubview(overlayView) to the layoutSubviews() method inside your cell subclass.
override func layoutSubviews() {
super.layoutSubviews()
addSubview(overlayView)
}
Remove the overlay view in the prepareForReuse() method inside your cell subclass.
override func prepareForReuse() {
super.prepareForReuse()
overlayView.removeFromSuperview()
}
Note that this requires you to define the overlay view in the cell's subclass (which you should probably do since the cell itself should be responsible for its own subviews).
This happens because your cells are dequeued and reused multiple times, therefore, you are adding multiple layers.
Put this code inside your cell's class
override func awakeFromNib() {
super.awakeFromNib()
let overlayView = UIView()
overlayView.backgroundColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5)
overlayView.frame = self.bounds
self.addSubview(overlayView)
}
Or if you want to achieve the same result you can set black backgroundColor and set imageView's alpha to 50%
cell.backgroundColor = .black
cell.imageView.alpha = 0.5
Avoid adding this in cellForItem. The cells are reused, hence if you keep adding the view it would add one top of another. On reusing the cell the previously added view is not removed. Instead you can add the view in Prototype cell or XIB and set its alpha to whatever you want. Or if you are creating the cell programatically you can it in awakeFromNib()

Updating UITableViewCell subview constraints on orientation change

I have a UITableView with 3 cells, which will eventually serve as a dashboard. I am trying to configure the top cell with a circular progress view using KDCircularProgress - I have a UIView which I position with constraints, and then programmatically add the circular progress object.
However, when I rotate the device to landscape, the progress view shifts (see first image). I have tried various combinations of setNeedsLayout(), layoutSubviews and layoutIfNeeded() but no luck.
I also tried reloadData() in willAnimateRotation(to toInterfaceOrientation: UIInterfaceOrientation, duration: TimeInterval), which gets me slightly further in that the view is correctly resized (see second image), however it has created a duplicate. Extract from cellForRowAt method below:
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
switch indexPath.row {
case 0:
let topCell = tableView.dequeueReusableCell(withIdentifier: "topCell", for: indexPath) as! DashboardTopTableViewCell
//Progress config
topCell.progressBar = KDCircularProgress(frame: CGRect(origin: CGPoint.zero, size: CGSize(width: topCell.circularProgressContainer.frame.width, height: topCell.circularProgressContainer.frame.height)))
let colorForProgress: UIColor = UIColor(red: 69.0/255.0, green: 110.0/255.0, blue: 178.0/255.0, alpha: 0.8)
topCell.progressBar?.progressColors = [colorForProgress]
let progressAsAngle = ((percentageComplete/100)*360)
topCell.progressBar?.animate(toAngle: progressAsAngle, duration: 2.0, completion: nil)
topCell.circularProgressContainer.addSubview(topCell.progressBar!)
return topCell
So I am a bit stuck - any suggestions?
Avoid using addSubview in cellForRow. As the cell is reused, this extra added view will not get removed and on reloading cell, the views would be overlapped. You will not see the impact when overlapping is of same size and position, but as in your case you are rotating, you are able to see it. Add the views statically in XIb or view wherever you want but not in cellForRowAt.
However you can change the properties of the subviews in cellForRow.
If you add subviews in cellForRowAt you will feel the jerk while scrolling tableView.

Unable to make UITableViewCell have clear color

This is very straightforward. I've tried this a couple of times, in both tableView:willDisplayCell:forRowAtIndexPath: and tableView:CellForRow:atIndexPath:.
Here is my code:
cell.alpha = 0.0
cell.backgroundView?.alpha = 0.0
cell.contentView.alpha = 0.0
cell.backgroundView?.backgroundColor = UIColor.clear
cell.backgroundColor = UIColor.clear
cell.contentView.backgroundColor = UIColor.clear
I'm pretty sure this should be overkill, but I'm having a really hard time making this work. The cells are being modified inside an if statement because this only applies to certain cells. Yes, I've checked, and the if statement is working as expected. Any ideas?
I am using Xcode version 8.2 beta
You should set:
cell.backgroundColor = .clear
and also you should provide clear color for whole tableView:
tableView.backgroundColor = .clear
I've tested in sample project. I create UIViewController with UITableView. Set the .red color for view of UIViewController. Create UITableView, apply .clear color for cell and tableView. You should see the red colored background - so the cells and tableView are transparent.
Here are example screen(The label is added to .view of UIViewController to make sure that tableView is transparent):

Label Background Colour removed when row selected in Swift

I'm experiencing a weird issue with my Swift app. I'm trying to create a UITableViewCell using a custom cell that I have created.
I have an empty label and a text label in the cell. The empty label is simply colored by setting the backgroundColor against some R, G, B colors.
However, when I select and deselect rows in my table, the background color of the label disappears. This happens until I scroll the cell out of view and back into view again, at which it shows me the color again.
Here's a few screenshot to illustrate what's happening:
This is what it looks like before selecting a color
This is what it looks like when I have a color selected - it seems to change the label background color to transparent. It shouldn't do this
This is what it looks like when I have selected a different color - the color remains transparent/white
Of course, I don't want this to happen. The intention was for the label color to remain the same.
Here's my code for cellForRowAtIndexPath
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! ScenesTableCell
cell.sceneNameLabel.text = scenesArr[indexPath.row].sceneName
let red = scenesArr[indexPath.row].sceneCol[0]
let green = scenesArr[indexPath.row].sceneCol[1]
let blue = scenesArr[indexPath.row].sceneCol[2]
let brightness = scenesArr[indexPath.row].sceneBrightnessMultiplier
cell.colourIndicatorLabel.layer.backgroundColor = UIColor(red: CGFloat(red), green: CGFloat(green), blue: CGFloat(blue), alpha: CGFloat(brightness)).CGColor
cell.colourIndicatorLabel.layer.cornerRadius = 5
cell.colourIndicatorLabel.layer.borderWidth = 1
cell.colourIndicatorLabel.layer.borderColor = UIColor(red: 77.0/255.0, green: 146.0/255.0, blue: 203.0/255.0, alpha: 1.0).CGColor
}
Please note that I have tried the following line of code to change the backgroundColor too, however the same thing happens, but it fills outside of the rounded borders:
cell.colourIndicatorLabel.backgroundColor = UIColor(red: CGFloat(red), green: CGFloat(green), blue: CGFloat(blue), alpha: CGFloat(brightness))
I really appreciate some help here! I know I'm not very good at asking questions on SO, so if you have any questions, please ask! ;)
iOS clears the background colour of all cell subviews when a cell is selected. You can avoid this by overriding the setSelected method on your UITableViewCell subclass:
extension ScenesTableCell {
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
self.colourIndicatorLabel.backgroundColor = .blue // Set with the color you need
}
}
In order to use rounded corners and UIView.backgroundColor without overflow, you can set cell.colourIndicatorLabel.clipsToBounds = true when you dequeue the cell or in the cell subclass.

Resources