Ben Benradi
Ben Benradi

Reputation: 1

add shadow to the UIView

I want to add shadow to the every cell of this image for that i added a UIView,but how can I customize,and where to write the code to customize it,the UIView is in a cellView of a tableView

the code

let profil = ["Eric","Eric","Eric","Eric","Eric","Eric"]

public func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int
{
    return(profil.count)
}


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

    cell.profilName.text = profil[indexPath.row]

    return(cell)

}

public func tableView(_ tableView: UITableView, willDisplay cell: UITableViewCell, forRowAt indexPath: IndexPath) {

    cell.backgroundColor = .clear
    cell.contentView.backgroundColor = .white
    cell.contentView.layer.cornerRadius = 10.0


}

I connected the UIView like that the other cocoa touch class

    @IBOutlet weak var backgroundCardView: UIView!

but i don't know how to use it

EDIT

the new image I need to have some space between the cells to as to have something like this image

Upvotes: 0

Views: 647

Answers (3)

Manish Mahajan
Manish Mahajan

Reputation: 2082

I have create function for view shadow:-

func addShadow(view: UIView, corner: CGFloat) {
    view.layer.shadowColor = UIColor.gray.cgColor
    view.layer.shadowOpacity = 0.5
    view.layer.shadowRadius = 2
    view.layer.shadowOffset = CGSize(width: 1, height: 1)
    view.layer.masksToBounds = false
    view.layer.cornerRadius = corner
}

Upvotes: 0

iOS Geek
iOS Geek

Reputation: 4855

My UIView Extension - That Add Border and Shadow Effect

extension UIView
{
    func roundCornerWithBorderForTableView()
    {
        self.layer.borderWidth = 1
        self.layer.borderColor = UIColor(red:0/255, green:96/255, blue:114/255, alpha: 1).cgColor
        self.layer.cornerRadius = 10        
        self.layer.masksToBounds = true
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.masksToBounds = false
        self.clipsToBounds = false
        self.layer.shadowOpacity = 0.5
        self.layer.shadowOffset = CGSize(width: -1, height: 1)
        self.layer.shadowRadius = 5
    }
}

Usage For the Extension:

class tableCell: UITableViewCell {

    @IBOutlet weak var baseView: UIView!{
        didSet{
            baseView.roundCornerWithBorderForTableView()
        }
    }
    @IBOutlet weak var textValue: UILabel!
    override func awakeFromNib() {
        super.awakeFromNib()
        // Initialization code
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        super.setSelected(selected, animated: animated)

        // Configure the view for the selected state
    }

}

Just Need to add a new View as Subview in The main Content View Using StoryBoard as Like

View Hierarchy : enter image description here

BaseView Constraints : View which will be used to create Shadow Effect and Border enter image description here

Constraints:

enter image description here

Sample Code - https://drive.google.com/file/d/13VhiFYf9QC-ToJ6Wk6FYPM5tPthdXaFC/view?usp=sharing

Output ScreenShot enter image description here

Upvotes: 0

Sergey Hleb
Sergey Hleb

Reputation: 172

Use like this:
here example code of cell's Class

class MyTableViewCell: UITableViewCell {

    @IBOutlet weak var label: UILabel!

    func setText(text: String) {
        self.layer.shadowOffset = CGSize.init(width: 0, height: 0)
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowRadius = 5
        self.layer.shadowOpacity = 0.8
        self.layer.masksToBounds = false;
        self.clipsToBounds = false;
        label.text = text
    }
}   

And here result:
Screenshot

You can changes this values like you need for achieve some result.
Update
1. add this method to your ListOffersViewControllerTableViewCell Class

func setShadows() {
            self.layer.shadowOffset = CGSize.init(width: 0, height: 0)
            self.layer.shadowColor = UIColor.black.cgColor
            self.layer.shadowRadius = 5
            self.layer.shadowOpacity = 0.8
            self.layer.masksToBounds = false;
            self.clipsToBounds = false;
        }   

2. edit your tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell method like this:

public func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell
{
 let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! ListOffersViewControllerTableViewCell
    cell.setShadows()
    cell.profilName.text = profil[indexPath.row]
    return(cell)

} 

Update

do this simple steps:
1. on your storyBoard add subView to your cell.
2. put all of your content on this subView.
3. height of this subView must be, for example, less than cell's height by 10.
4. connect IBOutlet property of this view to your cell's Class.
5. edit setShadows method like this:

func setShadows() {
                self.myView.layer.shadowOffset = CGSize.init(width: 0, height: 0)
                self.myView.layer.shadowColor = UIColor.black.cgColor
                self.myView.layer.shadowRadius = 5
                self.myView.layer.shadowOpacity = 0.8
                self.myView.layer.masksToBounds = false;
                self.myView.clipsToBounds = false;
            }    

where myView - UIView, which you added on storyboard and connected to your cell's Class.
And here result:
Screenshot2

Upvotes: 1

Related Questions