如何添加顶部和底部弯曲的左绿色边框？

Question

如图所示如何添加左侧绿色边框？

我想将这种类型的边框添加到UIview。我尝试将这种类型的图像放入视图中，但这在我的情况下不起作用，因为它无法管理单元格的动态高度。

所以请给我一个正确的解决方案来向视图添加图层。

Answer 1

您可以使用 ressizedImage 来完成此操作。

我们将从这张图片开始（从您发布的图片中剪下）：

它是

11 x 32

（像素）。

我们可以使用

func resizableImage(withCapInsets capInsets: UIEdgeInsets) -> UIImage

(docs) 使其“可拉伸”，如下所示：

.resizableImage(withCapInsets: .init(top: 12.0, left: 0.0, bottom: 12.0, right: 0.0))

现在顶部 12 像素和底部 12 像素将不会拉伸...只有中间部分会：

示例代码：

class StretchTestVC: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground
        
        guard let img = UIImage(named: "stretch1") else {
            fatalError("Could not load image!!!")
        }
        
        // create a resizable version
        let stretchImg = img.resizableImage(withCapInsets: .init(top: 12.0, left: 0.0, bottom: 12.0, right: 0.0))
        
        // now let's add 8 image views with increasing heights
        var x: CGFloat = 40.0
        var h: CGFloat = 60.0
        
        for _ in 1...8 {
            let imgView = UIImageView()
            imgView.image = stretchImg
            imgView.frame = .init(x: x, y: 100.0, width: 11.0, height: h)
            view.addSubview(imgView)
            
            x += 30.0
            h += 50.0
        }
    }
    
}