Question

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

以下是示例图片..（来自应用MyThings）

这是正常页面

enter image description here

如果您从下往上滑动，帮助视图将显示为..

enter image description here

这是我的疑惑：

哪一个最适合创建图像＆amp;此帮助视图中的文字？绘制图像＆amp;使用Core Graphics的文本或简单地将UIImageView与png图像放在一起？哪一个有效？
使用现成的png图像实现UIImageView没有问题。据我所知，这里的问题是图像文件大小和加载时间。如果我们考虑绘图方法，我会考虑以下问题。
绘制矩形非常简单。（Refer here）。但是绘制一个带有弯角的矩形呢？是否有任何可用的功能来处理这种情况？
然后箭头指向相应的组件。我们怎样才能找到应该指向的确切点？（直到iPhone 4S，我希望没有问题，iPhone 5有不同的高度）
如何从矩形中的特定位置绘制此指针？

有什么想法吗？

困惑!!

Answer 1

在你的情况下，我会参考可调整大小和可重复使用的图像。我的应用程序中也有很多覆盖屏幕，我最终为uilabel生成5 6个通用项目箭头，标签背景和矩形背景图像。

我知道绘制矩形很容易，但有时可能只是过载。

如果您想更改这些箭头的方向，可以将图层转换应用于UIImageview，如下所示

        arrowIamgeView.transform = CGAffineTransformMakeRotation(-M_PI / 20);

对于矩形的圆角我假设您可以使用具有特定背景颜色的文本字段并设置其图层的cornerradius属性。

Answer 2

绘制气泡＆amp; CG的箭头更好，恕我直言。即使您完全更改了应用程序（例如，如果您正确地指向按钮的中心，它也会工作）。对于图像，您需要为不同的显示分辨率和比例设置多个副本。此外，如果您更改了任何内容，则需要更新箭头。
我没有看到任何性能缺陷。两种方法都会非常快速地绘制气泡。另外，请考虑您可以缓存CG生成的图像以备将来使用。
请参阅以下问题以了解如何绘制气泡：
- How to draw a “speech bubble” on an iPhone?
- How to make a Thought Bubble using core graphic in iPhone
使用每个泡泡指向的按钮中心似乎合乎逻辑。您的绘图方法需要知道箭头和当前方向的指向（如果应用程序旋转）。它应该考虑其他气泡，以避免重叠。您可以在行和列中划分空格，并为每个气泡分配 free 空间。
为了获得更好的用户体验，这些气泡不应该消耗点击。如果在气泡可见时点击按钮，则应执行预期的操作（而不是仅隐藏气泡并需要再次点击）。

Answer 3

最后我做到了!!

从我一天的经历中，我发现有三种方法可以解决这种情况。

只需将所需图像创建为png文件，然后使用UIImageView即可显示。（但请记住，您应该使用不同分辨率的相同图像。这会增加您的应用尺寸。）
第二种方法是，通过使用箭头图像创建标签，文本字段等来显示气泡（或可能是矩形）。您可以简单地转换图像以更改箭头的指向位置。（正如Ilker Baltaci在之前的回答中所说）。
第三种方式是Core Graphics。你可以在这里画任何你想要的东西。据我所知，通过初始化/分配/保留标签来增加应用程序的大小或增加内存消耗。文本字段，我们可以通过Core Graphics尝试这个。

我想要实现此帮助屏幕工具的三个视图。对于三个屏幕，我可以使用这三种方法中的任何一种，因为如果我们将它用于很少需要的情况，那么与性能没有太大区别。但我尝试了第三种方式，因为，我真的对Core Graphics一无所知。所以它只是为了学习..

我遇到的问题：

箭头应指向按钮的中心（或按钮顶部）。因此找到这个确切的位置很复杂。我在我的应用程序中只在3页中使用过此功能。每个页面最多包含4个要描述的图标。所以我只是对这些值进行了硬编码（我的另一个好运是，应用程序不支持横向模式）。但是，如果你想在这么多页面中使用这个功能，你应该定义一些数组和一个方法，通过计算它的中心参考它们的原点，高度和放大来找到图标的中心。宽度，等等，等等......
另一个问题是，你应该确保气泡不会在任何地方重叠。在这里，我们还需要一个全局方法来查找每个气泡的位置。气泡的大小取决于要放在其中的文本大小。这是一个更复杂的问题，对于3个屏幕，我不会定义一个包含数百个计算的全局方法。所以我再次硬编码原点，高度和参考 self.view
最后但并非最不重要..箭头!!箭头的高度可能随着气泡的位置而变化。气泡的宽度也可随高度而变化。此外，你应该知道的一面＆amp;箭头指向按钮的气泡点。如果你已经在脑海中修复了气泡的位置，那对你来说根本不是问题......：P

现在让我们来编码部分，

- (void) createRect:(CGRect)rect xPoint:(float)x yPoint:(float)y ofHeight:(float)height ofWidth:(float)width toPointX:(float)toX toPointY:(float)toY withString:(NSString *)helpString inDirection:(NSString *)direction
{
    float distance = 5.0;
    float widthOfLine = 5.0;
    float arrowLength = 15.0;

    //Get current context

    CGContextRef context = UIGraphicsGetCurrentContext();

    //Set width of border & colors of bubble

    CGContextSetLineWidth(context, widthOfLine);
    CGContextSetStrokeColorWithColor(context, [[UIColor darkGrayColor] CGColor]);
    CGContextSetFillColorWithColor(context, [[UIColor colorWithRed:0 green:0 blue:0 alpha:0.9] CGColor]);

    CGContextBeginPath(context);
    CGContextMoveToPoint(context, x, y);

    CGContextAddLineToPoint(context, x+width, y);
    CGContextAddQuadCurveToPoint(context, x+width, y, x+width+distance, y+distance);

    CGContextAddLineToPoint(context, x+width+distance, y+distance+height);
    CGContextAddQuadCurveToPoint(context, x+width+distance, y+distance+height, x+width, y+distance+height+distance);

    CGContextAddLineToPoint(context, x, y+distance+height+distance);    
    CGContextAddQuadCurveToPoint(context, x, y+distance+height+distance, x-distance, y+distance+height);

    CGContextAddLineToPoint(context, x-distance, y+distance);
    CGContextAddQuadCurveToPoint(context, x-distance, y+distance, x, y);

    CGContextDrawPath(context, kCGPathFillStroke);

    //Draw curvely arrow from bubble to button (but without arrow mark)

    CGContextBeginPath(context);
    CGContextSetLineWidth(context, 5.0);
    CGContextSetStrokeColorWithColor(context, [[UIColor whiteColor] CGColor]);

    CGPoint startPoint = CGPointMake(x+(width/2.0), y+distance+distance+height);

    CGPoint endPoint = CGPointMake(toX, toY);

    CGContextMoveToPoint(context, startPoint.x, startPoint.y+5.0);

    if ([direction isEqualToString:@"left"])
    {
        CGContextAddCurveToPoint(context, startPoint.x, startPoint.y+5.0, endPoint.x, endPoint.y, toX-10, toY);
    }

    else
    {
        CGContextAddCurveToPoint(context, startPoint.x, startPoint.y+5.0, endPoint.x, endPoint.y, toX+10, toY);
    }

    CGContextStrokePath(context);

    //Draw the arrow mark

    CGContextBeginPath(context);
    CGContextSetLineWidth(context, 5.0);
    CGContextSetStrokeColorWithColor(context, [[UIColor whiteColor] CGColor]);

    if ([direction isEqualToString:@"left"])
    {
        CGContextMoveToPoint(context, toX-10.0, toY-arrowLength);

        CGContextAddLineToPoint(context, toX-10.0, toY);
        CGContextAddLineToPoint(context, toX-10.0+arrowLength, toY);
    }

    else
    {
        CGContextMoveToPoint(context, toX+10.0, toY-arrowLength);

        CGContextAddLineToPoint(context, toX+10.0, toY);
        CGContextAddLineToPoint(context, toX+10.0-arrowLength, toY);
    }

    CGContextStrokePath(context);

    .......
    .......
}

您可以通过drawRect:方法调用此方法，如下所示..

[self createRect:rect xPoint:30.0 yPoint:250.0 ofHeight:100.0 ofWidth:100.0 toPointX:48.0 toPointY:430.0 withString:@"xxxxxxx" inDirection:@"left"];

[self createRect:rect xPoint:160.0 yPoint:100.0 ofHeight:100.0 ofWidth:100.0 toPointX:260.0 toPointY:420.0 withString:@"yyyyyyy" inDirection:@"right"];

最终的图像将是这样的..

enter image description here

我跳过三角形箭头，因为此箭头类型会产生手写效果。

感谢@djromero和Ilker Baltaci的宝贵答案。

我的下一个困惑是关于绘制文本!!!!! ：P

如何创造泡沫＆amp;关于使用按钮的iPhone帮助页面中的箭头？

3 个答案: