ios path按钮 apple path

转载

mob64ca140a8e67 2023-09-12 20:51:26

文章标签 ios path按钮 ios android python 数据可视化 文章分类 iOS 移动开发

ios path绘制形状

After reading an article on how to create a custom Android bottom-bar shape, I asked myself how to archive the same on iOS. Above is an image of the layout that I want to build.

阅读了有关如何创建自定义Android底部栏形状的文章后，我问自己如何在iOS上对其进行归档。上面是我要构建的布局的图像。

First of all, we need to create a custom IBDesignable UITabBar class and override the draw method. Here we need to insert a sublayer to the views layer. In the created layer, we define the inner color, the stroke color, and the path that we want to draw. Furthermore, I created a switch that is replacing the layer if it already exists. This way the layout also supports orientation changes.

首先，我们需要创建一个自定义的IBDesignable UITabBar类并重写draw方法。在这里，我们需要在视图层中插入一个子层。在创建的图层中，我们定义内部颜色，笔触颜色以及要绘制的路径。此外，我创建了一个开关来替换该层(如果已经存在)。这样，布局还支持方向更改。

Since the drawing of the path takes a little more code, I extracted it into a separate method.

由于绘制路径需要更多代码，因此我将其提取到单独的方法中。

The actual drawing of the custom TabBar is implemented in the createPath method. With the help of the UIBezierPath, we draw a line from the top left to the beginning of our indentation. Here it’s getting a little tricky (at least for me). I got the correct Bézier curves by trial and error, and this nice tool.

自定义TabBar的实际图形是在createPath方法中实现的。在UIBezierPath的帮助下，我们从左上角到缩进的开头画了一条线。在这里，它变得有些棘手(至少对我而言)。通过反复试验，我得到了正确的贝塞尔曲线，并且这个工具不错。

After finishing the curves, we simply need to connect the missing corners of the UIBezierPath.

完成曲线后，我们只需要连接UIBezierPath的缺失角UIBezierPath 。

As we set the class of the TabBar in the interface builder to our custom TabBar, we can already see a preview of the new layout.

当我们在界面构建器中将TabBar的类设置为自定义TabBar ，我们已经可以看到新布局的预览。

To add a button to the indentation, I simply created a button sized 70 x 70 in the two ViewControllers. For the layout, I used constraints, centering the button horizontally in the view and adding its vertical center to the bottom of the TabBar. To give the button rounded corners, I used the layer.cornerRadius key path and set it to 25. Also, don’t forget to enable “clip to bounds.”

为了向缩进添加按钮，我只是在两个ViewController创建了一个大小为70 x 70的按钮。对于布局，我使用了约束，将按钮在视图中水平居中并将其垂直中心添加到TabBar的底部。为了给按钮提供圆角，我使用了layer.cornerRadius关键路径并将其设置为25。此外，不要忘记启用“ clip to bounds”。

You maybe noticed that the icons are not really centered in relation to the indentation. I found no better solution than setting the key path of titlePositionAdjustment for the UITabBarItem. The left item is shifted by -20 and the right by 20.

您可能已经注意到，图标并不是相对于缩进真正居中。我发现没有比为UITabBarItem设置titlePositionAdjustment的关键路径更好的解决方案。左边的项目偏移-20，右边的偏移20。

By executing the project, you will end up with a UI that looks exactly like the requested layout, but there is one thing missing: the click area of the button.To avoid the TabBar receiving touch events by clicking the button in the lower areas, we need to override the point-inside method of the TabBar and return false if the button was clicked.

通过执行该项目，您最终将获得一个与所请求的布局完全相似的UI，但缺少一件事：按钮的单击区域。为避免TabBar通过单击下部区域的按钮来接收触摸事件，我们需要重写TabBar的point-inside方法，如果单击了按钮，则返回false 。

That's it!

而已！

If you do not like the Bézier curve, you can also go with a circle:

如果您不喜欢贝塞尔曲线，也可以绕一个圆：

You can find an example project on GitHub: https://github.com/Monntay/CustomTabBarShape.

您可以在GitHub上找到一个示例项目： https : //github.com/Monntay/CustomTabBarShape 。