CODEWITHSUNDEEP
iosiphoneswiftuitableview
Slavcho
Slavcho

Reputation: 2812

How to add shadow only at the bottom of section of UITableView?

I have a sectioned UITableView which has a header of height 10 and it has backgroundColor as clearColor just to show the sections more separated. Now I need to add a shadow only at the bottom of each section. I've tried adding shadow to the viewForHeaderInSection method, but the result is very bad. Any tips for achieving this?

func tableView(tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let shadowView = UIView()

    shadowView.layer.shadowColor = UIColor(red: 0, green: 0, blue: 0, alpha: 0.5).CGColor
    shadowView.layer.shadowOffset = CGSizeMake(0.0, 2.0)
    shadowView.layer.shadowOpacity = 1.0
    shadowView.layer.shadowRadius = 0.0
    shadowView.layer.masksToBounds = false

    return shadowView
}

func tableView(tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 2
}

Upvotes: 1

Views: 5780

Answers (1)

Rob
Rob

Reputation: 2660

I made these two example Swift 3. The first it's a classic shadow, I used CAGradientLayer. The second it's a shadow arc, I used UIBezierPath, CAShapeLayer and CAGradientLayer.

Classic Shadow:

func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let shadowView = UIView()




    let gradient = CAGradientLayer()
    gradient.frame.size = CGSize(width: myTab.bounds.width, height: 15)
    let stopColor = UIColor.gray.cgColor

    let startColor = UIColor.white.cgColor


    gradient.colors = [stopColor,startColor]


    gradient.locations = [0.0,0.8]

    shadowView.layer.addSublayer(gradient)


    return shadowView
}

This is the result:

enter image description here

Shadow Arc:

func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
let shadowView = UIView()

 let path = UIBezierPath()
        path.move(to: CGPoint.zero)
        path.addLine(to: (CGPoint(x: (myTab.bounds.maxX), y: 0.0)))
        path.addLine(to: (CGPoint(x: (myTab.bounds.maxX), y: 15)))
        path.addCurve(to: (CGPoint(x: 0.0, y: 15)), controlPoint1: (CGPoint(x: (myTab.bounds.midX), y: -10)), controlPoint2: (CGPoint(x: 0.0, y: 15)))
        path.addLine(to: CGPoint.zero)



        let shape = CAShapeLayer()
        shape.path = path.cgPath

        let gradient = CAGradientLayer()

        gradient.frame.size = CGSize(width: myTab.bounds.width, height: 15)
        let stopColor = UIColor.gray.cgColor

        let startColor = UIColor.white.cgColor


        gradient.colors = [stopColor,startColor]


        gradient.locations = [0.0,0.9]

        gradient.mask = shape

        shadowView.backgroundColor = UIColor.white
        shadowView.layer.addSublayer(gradient)




        return shadowView


}

This is the result:

enter image description here

Upvotes: 12

Related Questions