给 UIView 添加阴影

Posted

技术标签:

【中文标题】给 UIView 添加阴影【英文标题】:add shadow to the UIView 【发布时间】:2018-04-14 22:37:33 【问题描述】:

我想给this image的每个单元格添加阴影 为此我添加了一个 UIView,但是如何自定义,以及在哪里编写代码来自定义它,UIView 位于 tableView 的 cellView 中

代码

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



我像其他可可触摸类一样连接 UIView

    @IBOutlet weak var backgroundCardView: UIView!

但是不知道怎么用

编辑

新的image 我需要在单元格之间留出一些空间才能有这样的东西image

【问题讨论】:

您需要在单元格代码中添加阴影。添加一些 ListOffersViewControllerTableViewCell 的代码 您需要为面部图像添加阴影吗?椭圆形框架? 对不起@SergeyHleb 我没有让你明白 我添加了 UIView 以便在每个单元格的角落都有这种阴影效果 如何在单元格代码中添加代码?我想我应该声明一个与 UIView 名称相关的变量,因为当我尝试编写 backgroundCardView.layer.cornerRadius = 3.0 时,他们无法识别 backgroundCardView 【参考方案1】:

这样使用: 这里是单元格类的示例代码

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
    
   

这里的结果是:

您可以根据需要更改此值以获得某些结果。更新 1. 将此方法添加到您的 ListOffersViewControllerTableViewCell 类中

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。编辑您的 tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 方法,如下所示:

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)

 

更新

执行以下简单步骤: 1. 在您的故事板上将子视图添加到您的单元格。 2. 把你所有的内容放在这个子视图上。 3.此子视图的高度必须比单元格的高度小10。 4. 将此视图的 IBOutlet 属性连接到您的单元格的类。 5. 像这样编辑 setShadows 方法:

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;
                

其中 myView - UIView,您在情节提要上添加并连接到您的单元格的类。 结果如下:

【讨论】:

有些View不需要,可以给cell设置阴影 我不知道怎么做,我试过cell.contentView.backgroundColor = UIColor.clear cell.contentView.layer.shadowColor = UIColor.darkGray.cgColor cell.contentView.layer.shadowOffset = CGSize(width: 2.0, height: 2.0) cell.contentView.layer.shadowOpacity = 1.0 cell.contentView.layer.shadowRadius = 2但它被应用于单元格内的内容而不是单元格 我添加了 2 个步骤。检查并写下结果 它有效,但我的单元格之间没有空格,我该如何添加它?如果你愿意,我可以上传应用程序的屏幕截图 把它上传到你的问题【参考方案2】:

我的 UIView 扩展 - 添加边框和阴影效果

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
    

扩展的用法:

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
    


只需要使用 StoryBoard 在主内容视图中添加一个新视图作为子视图 像这样

查看层次结构:

BaseView 约束:将用于创建阴影效果和边框的视图

约束:

示例代码 - https://drive.google.com/file/d/13VhiFYf9QC-ToJ6Wk6FYPM5tPthdXaFC/view?usp=sharing

输出截图

【讨论】:

我只有 Xcode 8,所以文件无法打开,问题是我无法在视图中添加约束,我不知道为什么?我已经放了边框和单元格代码中的阴影代码不是第一个答案中显示的视图,你现在能帮我吗? 您如何以编程方式添加表格视图?我会建议你下载 Xcode 9 你的 Xcode 8 StoryBoard 中有没有像我一样的选项使用 AutoLayout 约束!screen shot 2018-04-19 at 9 45 29 am【参考方案3】:

我有创建视图阴影的功能:-

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

【讨论】:

以上是关于给 UIView 添加阴影的主要内容,如果未能解决你的问题,请参考以下文章

在 UIView 上添加两个不同颜色的阴影?

为选定的边缘 UIView 添加阴影

iOS Swift如何为透明的UIView添加阴影

向使用 SnapKit 定位的 UIView 添加阴影

向我的 UIView 添加阴影的最佳方法是啥

使用 UIBezierPath 向 UIView 添加阴影