如何创建具有边距、圆角和阴影的 UITableView？

Posted 2023-02-27

【中文标题】如何创建具有边距、圆角和阴影的 UITableView？

【英文标题】：How to create a UITableView with margins, rounded corners and shadow?

【发布时间】：2018-08-21 09:44:49

【问题描述】：

我正在用 Swift 开发一个应用程序。 在我的故事板中，我有一个 UITableViewController。我想为我的表格应用左右边距以及第一个/最后一个单元格上的圆角以及表格视图周围的阴影。

我尝试了很多选项，但找不到合适的解决方案。现在，我正在使用 UITableViewCell 的子类，我在其中覆盖框架以使其更窄。我可以有圆角，但我不能有阴影。

这是我的子类代码：

class NarrowTableCell: UITableViewCell 

  override var frame: CGRect 
      get 
          return super.frame
      
      set (newFrame) 
          var f = newFrame
          f.origin.x = 10
          if let w = superview?.frame.size.width 
              f.size.width = w - 20
           else 
              f.size.width = newFrame.size.width - 20
          
          super.frame = f
          super.layer.masksToBounds = true
      
  

  func applyNoCorners() 
      round(corners: [.topLeft, .topRight, .bottomLeft, .bottomRight], radius: 0)
  

  func applyCorners() 
      round(corners: [.topLeft, .topRight, .bottomLeft, .bottomRight], radius: 5)
  

  func applyTopCorners() 
      round(corners: [.topLeft, .topRight], radius: 5)
  

  func applyBottomCorners() 
      round(corners: [ .bottomLeft, .bottomRight], radius: 5)
  

我的大部分应用都是在 Storyboard 中完成的，我希望能够为动态和静态表格视图实现相同的结果。

我遇到的另一个问题是，当单元格框架更改时，我里面的标签没有正确更新。也就是说，它的内容被截断了。

这是我想做的：

【问题讨论】：

试试这个 > ***.com/questions/37645408/…

看这个->***.com/questions/3316424/…

【参考方案1】：

我使用 UIView 的扩展来管理圆角和阴影。由于变量是@IBInspectable，所以一切都可以直接在storyboard中设置！

import UIKit

extension UIView 

    @IBInspectable var shadow: Bool 
        get 
            return layer.shadowOpacity > 0.0
        
        set 
            if newValue == true 
                self.addShadow()
            
        
    

    @IBInspectable var cornerRadius: CGFloat 
        get 
            return self.layer.cornerRadius
        
        set 
            self.layer.cornerRadius = newValue

            // Don't touch the masksToBound property if a shadow is needed in addition to the cornerRadius
            if shadow == false 
                self.layer.masksToBounds = true
            
        
    


    func addShadow(shadowColor: CGColor = UIColor.black.cgColor,
               shadowOffset: CGSize = CGSize(width: 1.0, height: 2.0),
               shadowOpacity: Float = 0.4,
               shadowRadius: CGFloat = 3.0) 
        layer.shadowColor = shadowColor
        layer.shadowOffset = shadowOffset
        layer.shadowOpacity = shadowOpacity
        layer.shadowRadius = shadowRadius
    

从故事板上您可以打开或关闭阴影效果并提供角半径以供查看。您可以提供任何视图阴影或半径。

【讨论】：

嗨。感谢您的代码。我试过了，但它没有做我想要的。如果您查看我的屏幕截图，我需要将第一个单元格的顶角和最后一个单元格的底角四舍五入。如果我将cornerRadius 设置为UITableView，我什么也看不到。阴影也一样。

extension UIView func roundCorners(_corners: UIRectCorner, radius: CGFloat) let path = UIBezierPath(roundedRect: self.bounds, byRoundingCorners: corners,cornerRadii: CGSize(width: radius, height: radius )) let mask = CAShapeLayer() mask.path = path.cgPath self.layer.mask = mask

像这样使用它我已经使用它来使我的图像从单元格 cell.homeCellImg.roundCorners([.bottomLeft, .topLeft], radius: 10.0) 的顶部 ldft 或左下角开始圆角/跨度>