有没有办法在图层边缘实现边框图像（如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。图像文件在运行时颠倒使用。所以你必须事先用油漆或其他东西将它颠倒过来。此外，请注意图像是从ORIGINAL（展开前）图层的左上角放置的。如果您更改了展开CAShapeLayer的方式，则还应调整图像文件中的内容。

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

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

如果您喜欢它，请单击GitHub项目中的Star。