iphone - 如何在 iPhone 帮助页面中创建有关使用按钮的气泡和箭头？

Question

当今大多数应用程序都提供教程，教用户如何使用应用程序中的按钮。此帮助页面通常为黑色，带有一点 alpha 值(因此只有背景半可见)，带有气泡框，其中包含用于定义控件的文本和指向相应组件的箭头。

这是示例图像..(来自应用程序MyThings)

这是正常页面

如果您从下到上滑动，帮助 View 将显示为..

这是我的疑问:

• 哪一个最适合在此帮助 View 中创建图像和文本？使用 Core Graphics 绘制图像和文本，还是简单地将 UIImageView 与 png 图像放在一起？哪一个效率高？

• 用现成的png图片实现UIImageView是没有问题的。据我所知，这里的问题是图像文件大小和加载时间。如果我们考虑绘图方法，我会想到以下问题。

• 绘制矩形是如此简单。 (Refer here)。但是画一个有弧角的矩形怎么样？有没有可用的函数来处理这种情况？

• 然后是箭头，指向相应的组件。如何才能找到应该指向的确切点呢？ (直到iPhone 4S，我希望没有问题，iPhone 5有不同的高度)

• 如何从矩形中的特定位置绘制该指针？

有什么想法吗？

很困惑!!

Answer 1

• 用 CG 绘制气泡和箭头更好，恕我直言。即使您完全更改应用程序(例如，如果您正确地将它们绘制为指向按钮的中心)，它也将起作用。对于图像，您需要为不同的显示分辨率和比例准备多个副本。此外，如果您进行任何更改，则需要更新箭头。

• 我没有发现任何性能缺陷。两种方法都会非常快地绘制气泡。另外，认为您可以缓存 CG 生成的图像以供将来使用。

• 请参阅这些问题以了解如何绘制气泡:

  • How to draw a “speech bubble” on an iPhone?
  • How to make a Thought Bubble using core graphic in iPhone

• 使用每个气泡点的按钮中心似乎是合乎逻辑的。您的绘图方法需要知道箭头指向何处以及当前方向(如果应用程序旋转)。应考虑其他气泡，以避免重叠。您可以将空间划分为行和列，并为每个气泡分配可用空间。

• 为了获得更好的用户体验，这些气泡不应消耗点击。如果在气泡可见时点击按钮，则应执行预期操作(而不是仅仅隐藏气泡并需要第二次点击)。