ios - 有没有办法在图层边缘实现边框图像(如CSS边框图像)？

Question

我想用 Swift4.2 实现一个具有边框图像模式的图层，例如 CSS，但我不知道该怎么做。

我看到一个名为“PriPara”的应用 https://itunes.apple.com/sg/app/pripara/id1039257927?mt=8在香港App Store发布，它有一个UITabBar和一个UINavigationBar，它们有复杂的轮廓和一些图像图案。如下:

Whole screen , UITabBar , UINavigationBar

UITabBar 的边框上有一个类似花边的图像图案。UINavigationBar 的边框上有一个类似珠宝的图像。

我已经知道我可以通过修改 CAShapeLayer 类的“path”属性来更改图层轮廓的形状，如网站所述 https://medium.com/@philipp307/draw-a-custom-ios-tabbar-shape-27d298a7f4fa .

但是，至于边框图像，我没有任何线索。虽然看起来 CSS 具有 border-image 属性，如页面所示 https://css-generator.net/border-image/ ， swift 没有。我是否必须使用一些外部库，或者没有办法实现这一点？

Answer 1

我已经基本解决了这个问题。

我选择了使用 DonMag 所说的简单图像的方式。也许这太简单了，但这就是我所能做的。

它使用CAShapeLayer、UIBezierPath。

在原来的UITabBarController子类中，执行以下代码:

let shapeLayer = CAShapeLayer()

//Get CGPath.Original Layer will be expanded lengthwise.
shapeLayer.path = self.createLengthExpandShape()

//Set image
shapeLayer.fillColor = UIColor.init(patternImage: UIImage.init(named: "MyImage.png")!).cgColor

//Set layer
self.tabBar.layer.insertSublayer(shapeLayer, at: 0)

最棘手的一点是 UIImage.init(colorPattern:)。您可以使用此函数将图像设置到 CAShapeLayer 中。图像文件在运行时颠倒使用。所以你得提前用油漆软什么的把它翻过来。另外，请注意图像是从原始(扩展之前)图层的左上角放置的。如果您更改了CAShapeLayer的扩展方式，您还应该调整图像文件上的内容。

图像文件:https://i.imgur.com/BYnkuXQ

对于整个项目，请参阅https://github.com/Satoru-PriChan/ChangeUITabBarAppearance

如果您喜欢，请在 GitHub 项目中点击 Star。