How to add shadow to sections in TableView

Question

Please refer this screenshot for the design

  //Top Left Right Corners
    var maskPathTop = UIBezierPath.FromRoundedRect(cell.Bounds, UIRectCorner.TopLeft | UIRectCorner.TopRight, new CoreGraphics.CGSize(8, 8));
    var shapeLayerTop = new CAShapeLayer();
    shapeLayerTop.Frame = cell.Bounds;
            shapeLayerTop.Path = maskPathTop.CGPath;

            //Bottom Left Right Corners
            var maskPathBottom = UIBezierPath.FromRoundedRect(cell.Bounds, UIRectCorner.BottomLeft | UIRectCorner.BottomRight, new CoreGraphics.CGSize(8, 8));
    var shapeLayerBottom = new CAShapeLayer();
    shapeLayerBottom.Frame = cell.Bounds;
            shapeLayerBottom.Path = maskPathBottom.CGPath;

            //All Corners
            var maskPathAll = UIBezierPath.FromRoundedRect(cell.Bounds, UIRectCorner.BottomLeft | UIRectCorner.BottomRight | UIRectCorner.TopLeft | UIRectCorner.TopRight, new CoreGraphics.CGSize(8, 8));
    var shapeLayerAll = new CAShapeLayer();
    shapeLayerAll.Frame = cell.Bounds;
            shapeLayerAll.Path = maskPathAll.CGPath;

            if (indexPath.Row == 0 && indexPath.Row == tableView.NumberOfRowsInSection(indexPath.Section) - 1)
            {
                cell.Layer.Mask = shapeLayerAll;
            }
            else if (indexPath.Row == 0)
            {
                cell.Layer.Mask = shapeLayerTop;

            }

            else if (indexPath.Row == tableView.NumberOfRowsInSection(indexPath.Section) - 1)
            {
                cell.Layer.Mask = shapeLayerBottom;
            }

I've tried this for getting Rounded corners for each section but in this I wasn't able to add shadows to each section . Can anyone suggest in C# since I am beginner to Xamarin iOS. Thanks in advance!

score 0 · Answer 1 · answered Sep 01 '20 at 07:28

0

Create a new shadowView and shadowView.AddSubview(cell);, here is the code example:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();
    // Perform any additional setup after loading the view, typically from a nib.

    UILabel cell = new UILabel();
    cell.BackgroundColor = UIColor.Blue;
    cell.Text = "test";

    UIView shadowView = new UIView(new CoreGraphics.CGRect(100, 100, 200, 100));
    shadowView.Layer.ShadowColor = UIColor.Black.CGColor;
    shadowView.Layer.ShadowRadius = 8.0f;
    shadowView.Layer.ShadowOffset = new CGSize(13.0, 13.0);
    shadowView.Layer.ShadowOpacity = 0.5f;

    cell.Frame = shadowView.Bounds;

    //Top Left Right Corners
    var maskPathTop = UIBezierPath.FromRoundedRect(cell.Bounds, UIRectCorner.TopLeft | UIRectCorner.TopRight, new CoreGraphics.CGSize(8, 8));
    var shapeLayerTop = new CAShapeLayer();
    shapeLayerTop.Frame = cell.Bounds;
    //shapeLayerTop.BorderWidth = 3;
    //shapeLayerTop.BorderColor = VM.RedColor.ToNativeColor().CGColor;
    shapeLayerTop.Path = maskPathTop.CGPath;

    //Bottom Left Right Corners
    var maskPathBottom = UIBezierPath.FromRoundedRect(cell.Bounds, UIRectCorner.BottomLeft | UIRectCorner.BottomRight, new CoreGraphics.CGSize(8, 8));
    var shapeLayerBottom = new CAShapeLayer();
    shapeLayerBottom.Frame = cell.Bounds;
    //shapeLayerBottom.BorderColor = VM.RedColor.ToNativeColor().CGColor;
    //shapeLayerBottom.BorderWidth = 3;
    shapeLayerBottom.Path = maskPathBottom.CGPath;

    //All Corners
    var maskPathAll = UIBezierPath.FromRoundedRect(cell.Bounds, UIRectCorner.BottomLeft | UIRectCorner.BottomRight | UIRectCorner.TopLeft | UIRectCorner.TopRight, new CoreGraphics.CGSize(8, 8));
    var shapeLayerAll = new CAShapeLayer();
    shapeLayerAll.Frame = cell.Bounds;
    //shapeLayerAll.BorderWidth = 3;
    //shapeLayerAll.BorderColor = VM.RedColor.ToNativeColor().CGColor;
    shapeLayerAll.Path = maskPathAll.CGPath;

    cell.Layer.Mask = shapeLayerAll;

    shadowView.AddSubview(cell);
    View.Add(shadowView);

}

Refer: UIView with rounded corners and drop shadow?

answered Sep 01 '20 at 07:28

nevermore

15,432
1
12
30

Thanks! but this doesn't give shadow around sections in my tableView. Please refer the screenshot which I posted for more info.@Jack Hua - MSFT – Infinite Sep 01 '20 at 12:05
I uploaded my test sample [here](https://github.com/XfHua/iOS-Shadow) and please follow my code. – nevermore Sep 02 '20 at 01:39
Hi , please see this screenshot of my requirement [https://i.stack.imgur.com/ptLr8.png] what u suggested works fine for UIView but it doesn't work for shadows for separate **SECTIONS** in a ** TABLEVIEW**. @Jack Hua - MSFT – Infinite Sep 02 '20 at 04:30
You SECTIONS actually is a View. So put the View(Cell) with shadows into your sections and you will get it. – nevermore Sep 02 '20 at 05:19
Thanks :) but I am getting shadow for all the sides of the cell with u r implementation which does not satisfy my requirement. Please refer the screenshot attached (https://i.stack.imgur.com/ptLr8.png]) @Jack Hua- MSFT – Infinite Sep 02 '20 at 08:17
Can you please share me a Minimal, Reproducible Example? – nevermore Sep 02 '20 at 08:41
It will be more helpful if you could show using a TableView in your sample project. Thanks in Advance! @Jack Hua MSFT – Infinite Sep 28 '20 at 14:54
Hi what u implemented is working fine for UIView only but it looks crooked and weird for separate TableView sections.Please refer the screenshot. [https://i.stack.imgur.com/jvsUu.png] when there are two sections in the TableView and each section has one cell in it the shadow is going towards bottom and spikes are shown at the top . It is looking more weird when there are different number of cells in each sections. @Jack Hua MSFT – Infinite Sep 28 '20 at 15:25
I wrote a new [sample](https://github.com/XfHua/iOS-TableView-Section-Shadow) and please check. If you need more cells in the section, you should just make sure the first cell and last cell in the section has the right corner:). – nevermore Sep 29 '20 at 06:11
@Infinite Does my solution work for you? If yes, can you please accept it (click the ☑️ in the upper left corner of this answer ) so that we can help more people with same problem:). – nevermore Oct 07 '20 at 05:46

How to add shadow to sections in TableView

1 Answers1