I have subclassed UITableViewCell class to add shadow below my cell. The shadow is added correctly, when TableView appears on screen. But, when I scroll tableview down, and cell with shadow hides above the screen, the shadow disappears.
- (void)layoutSubviews {
[super layoutSubviews];
if (self.shouldAddShadow) {
self.layer.shadowOpacity = 0.5;
self.layer.shadowRadius = 1.5;
self.layer.shadowOffset = CGSizeMake(0, 3);
self.layer.shadowColor = [[[UIColor appDarkDividerColor] colorWithAlphaComponent:0.9] CGColor];
[self setClipsToBounds:NO];
[self.layer setMasksToBounds:NO];
CGRect shadowFrame = self.layer.bounds;
CGPathRef shadowPath = [UIBezierPath bezierPathWithRect:shadowFrame].CGPath;
self.layer.shadowPath = shadowPath;
}
}
forgot to mention, that i have tableview with static cells; so prepareForReuse isn't called. I have outlets for my cells, so that i've also tried to set the shadow to my cell in scrollViewDidScroll: method. Even this din't help me
I just encountered this problem. Finally I find the way to make it work.
It doesn't disappear(removed), it was just been hidden.
There we use a property zPosition of cell's layer.
From Apple docs:
The default value of this property is 0. Changing the value of this property changes the the front-to-back ordering of layers onscreen. This can affect the visibility of layers whose frame rectangles overlap.
The value of this property is measured in points.
The default value is 0. This leads top cell hides the bottom cell (say shadow). It means if you set shadow for a view to make it show in both sides and the margin before two cell is zero, only bottom shadow of the top cell will show up, the top shadow of the bottom shadow will be hidden.
When the cell goes out of the screen and then back, though the zPosition of each cell is still 0, for those cells, bottom cell hides top cell now. The hide direction is opposite to your scroll direction. This is exactly the situation you met.
So,
cell.layer.zPosition = <#value you want#>
For example, I want to show shadow of the siblings, I can set zPosition of this cell's layer to -1, then shadow of both side will appear.
zPosition of a layer decide which cell can show in the front, and which shows in the back. Like z-index in CSS.
So the solution is change the zPosition property to make it work as you expected.
In addition, you should not set cell's clipsToBounds to YES. (default value is NO)
Related
I have a collection view with rounded and shadow-dropped cells. The shadow of the cell suddenly disappears, instead of smoothly moving out of the view, when the cell is about to be covered by the navigation bar. Below is the code:
contentView.layer.cornerRadius = 20
contentView.layer.masksToBounds = true
layer.shadowColor = UIColor.black.cgColor
layer.shadowOpacity = 0.1
layer.shadowOffset = CGSize(width: 0, height: 5.0)
layer.shadowRadius = 5.0
layer.shadowPath = UIBezierPath(roundedRect: bounds, cornerRadius: contentView.layer.cornerRadius - 3).cgPath
layer.shouldRasterize = true
layer.rasterizationScale = UIScreen.main.scale
Here is the gif showing the problem. Focus on the shadow at the bottom of the cell. The navigation bar is white. Any help would be appreciated. Thank you!
Instead of setting shadow of contentView embed all your content in a UIView and set shadow of that view instead. Then you have to increase the height of your cell about 20 points or as much your shadow height. That should work I guess.
I believe it's simply because the cell does really get removed from the view, thus it's shadow goes with it. At that point the frame of the cell is out of the view, while shadow is still visible (shadow is around the frame) - but when the frame goes out of view, the collectionView removes the cell. And so the shadow disappears abruptly.
What I would do about it is very simple. I would refactor the code to wrap the current cell contents into a new UIView - lets call it wrapper, that will drop the shadow. Then put this wrapper into the cell's contentView so that the wrapper along with its shadow will fit inside of the contentView. Then the shadow will become a part of the contentView frame, which means that the shadow will disappear from the screen only when the whole cell is hidden.
Of course, you will have to modify the collectionView's size for cell, because now the cells will be bigger to contain also the shadow.
I'm changing the background colour of the labels dynamically, the width of the cell seems to be static and is working properly in case of 6s only, the background colour fades if the size of the display increases
cell.container.layer.backgroundColor = GetColor().randomColor(indexPath.row).colorWithAlphaComponent(0.5).CGColor
cell.title.layer.backgroundColor = GetColor().randomColor(indexPath.row).colorWithAlphaComponent(0.8).CGColor
New Code// after changing the opacity
// cell.container.layer.backgroundColor = UIColor.blackColor().colorWithAlphaComponent(0.85).CGColor
cell.title.backgroundColor = GetColor().randomColor(indexPath.row).colorWithAlphaComponent(0.5)
Mohit Arya,
I beilieve you have applied Autolayout constraint on the label inside the cell :) If yes please verify if its the same as I have shown below if not please add autolayout constraints properly,
As you are setting the color of the label itself and want it to cover the whole cell setting all the four constraint to 0 is necessary
EDIT:
Now as per your comment, if constraints are same as I have given below your label must be covering the whole cell :)
Then all you have to do is to
[cell.label setBackgroundColor: GetColor().randomColor(indexPath.row).colorWithAlphaComponent(1.0)]
cell.label.opaque = YES;
Check background color (and background color alpha value) for all views in your cell view hierarchy. For example, issue like this can appear if your cell's contentView have background color with alpha < 1, and your label (which size don't fit contentView) have same background color. Thats all what we can say by information you provided.
So, use different colors, or use alpha = 1, or use clear color in label.
I found the solution..the following code was interfering with the UI, I still don't know why the container.bounds is not returning the actual width
container.layer.shadowColor = UIColor.lightGrayColor().CGColor
container.layer.shadowOpacity = 1
container.layer.shadowOffset = CGSizeMake(0, 1);
container.layer.shadowRadius = 2
container.layer.shadowPath = UIBezierPath(rect: container.bounds).CGPath
I am trying to draw a custom separator in my custom UITableViewCell.
CALayer *border = [CALayer layer];
border.frame = CGRectMake(0, 60, 320, 1.0f);
border.backgroundColor = [UIColor blackColor].CGColor;
[self.layer addSublayer:border];
My custom UITableViewCell height is 60.
For some reason, when I scroll to the bottom of my table view, all the separators appears normally, but as I scroll back up the table, the table cells at the top do not show my separator.
I can potentially set my separator with y of 59:
CALayer *border = [CALayer layer];
border.frame = CGRectMake(0, 59, 320, 1.0f);
border.backgroundColor = [UIColor blackColor].CGColor;
[self.layer addSublayer:border];
But this behavior is not desired because when I select a row, I want the separator on the previous cell to disappear, this only happens when y is 60, which is the height of my cell.
If your cell height is 60pts, then setting the y position of a UIView to 60pts and 1pt heigh is going to draw it outside of the bounds of the cell.
This might work initially because of the order the cells are added to the tableView.. I.e The top cell is added after the second cell down so the 1pt separator as been drawn on top of the second cell... However when you scroll back up, the cells are added back to the tableView in a different order causing the separator to be hidden as the cell below it is drawn on top.
To get around this, you have to draw the separator inside the bounds of the cell.
I don't really understand why you want the separator on the previous cell (i presume you mean the last selected cell) to disappear but could you achieve this by overriding setHighlighted:animated: and setSelected:animated: on a custom UITableViewCell subclass?
I have a custom UICollectionViewCell, I have few views in its contentView.
I have an UIImageView with image (1 pixel colored) and I use it to fill my view.
I also cut the corners like this -
self.myBackground.layer.cornerRadius = 8.0;
self.myBackground.layer.masksToBounds = YES;
Color of my view and all collectionViewCells and their contentViews is [UIColor whiteColor]
But I am getting weird grey line below it. I am not setting it anywhere and I don't need it.
How can I remove it?
I have found the answer, it is separator. After setting separator view to nil it disappeared.
I want to display a double bordered like following image...
The border has a dark color (magenta) and a light color (white) (not the actual colors).
I have created a custom .xib file and a custom class extending UITableViewCell for my table view cells.
self.tableView.separatorColor = [UIColor whiteColor];
Then in the custom table view class, I did this...
- (void)awakeFromNib
{
[super awakeFromNib];
UIView *cellBottom = [[UIView alloc] initWithFrame:CGRectMake(0, self.bounds.size.height, self.bounds.size.width, 1.0f)];
cellBottom.backgroundColor = [UIColor magentaColor]; //
[self addSubview:cellBottomView];
// ... other code
}
I got the following result... there seems to be some gap between backgroundColor and separatorColor.
Why is this happening? The height of UIView has been set to 1 and is positioned at the bottom of UIView as well.
If there is some better solution to this could somebody throw some light on that?
Michal Zygar is partially correct.
Make sure your -(NSInteger)tableView:(UITableView*) heightForRowAtIndexPath:(NSIndexPath*) is correctly set to the height of the view. It doesn't automatically do that for you.
The other tip I would suggest as I do it myself, is to NOT use separators. Set your separator to none, and then add in two 1px-heigh views at the top and bottom of the cell in the XIB file.
Make sure to set the autosizing for the bottom two to stick only to the bottom edge, just in case you want to change the cell's height!