创建笔记视图的最佳方法

Question

我正在编写一个 iPhone/iPad 应用程序，允许用户填写笔记的空白。每周的笔记都会有所不同。我看到从我们的网络服务器下载 XML 格式的笔记。我正在努力解决的是如何动态构建一个可以对齐文本和输入字段的视图，类似于下面的示例。

示例图片 http://www.ccvonline.com/downloads/ios/example.png< /a>

我需要让输入控件与文本内联。这可以用 Core Text 来完成吗？有示例代码吗？现在我正在考虑使用 UIWebView 并用 HTML/CSS 构建它。但这感觉有点像作弊。有人有其他想法吗？

Answer 1

从当前行的 NSString 的 sizeWithFont: 方法开始。下载笔记时，确保每个笔记分为两部分，文本字段之前的部分和文本字段之后的部分。

CGSize textSize = [displayStringPart1 sizeWithFont:[UIFont systemFontOfSize:14.0]];

创建该大小的标签并将其添加到视图层次结构中。

UILabel *textLabel = [[UILabel alloc] initWithFrame:CGRectMake(22.0, 22.0, textSize.width, textSize.height)];
textLabel.text = displayStringPart1;
// Configure label (shadow, etc.)
[self.view addSubview:textLabel];
[textLabel release];

通过一些简单的算术，您现在知道第一个标签右端的位置。然后您可以添加到文本字段中。您可能需要摆弄框架才能使其正确对齐 - 如果您想要一个好的 UI，请不要忽略这一步！

// Put text field 5 pixels to the right of the end of the label
// How are you getting the width of the text field? I'm making it 50 here
// Default height for standard text field is 31 pixels
UITextField *answerField = [[UITextField alloc] initWithFrame:CGRectMake((22.0 + textSize.width + 5.0), 18.0, 50.0, 31.0)];
// Configure text field
[self.view addSubview:answerField];
[answerField release];

然后，通过更多的数学运算，您可以创建第二个标签来显示第二部分。该代码与第一段代码类似，不同之处在于要计算 x 位置，您需要执行 22.0 + textSize.width + 5.0 + 50.0 + 5.0 来考虑所有现有的元素。

支持换行会很困难。您可能必须在换行符处手动剪切字符串才能使其适合。上面的代码只处理一行，因为 sizeWithFont: 方法只能返回单个矩形。如果您有多于一行，它永远不会返回小于文本整个宽度的内容，从而使其不太有用。

---

This is probably the easiest method to visualize. An alternative method which would make it more efficient especially while scrolling (by cutting out one of three labels) is to add a bunch of blank space in the string and have one label go across the whole screen. You'd probably want a method that calculates the number of blank spaces to make up a certain width for the text field, and then adjust your x-coordinates as necessary. I leave that up to you, if you'd like to try that.

Answer 2

如果您有开始和结束文本，您可以尝试使用 NSString 的 -sizeWithFont:constrainedToSize: 或 -sizeWithFont:constrainedToSize:lineBreakMode: 。此外，您还可以在 XML 文件中添加一个参数，该参数给出每个元素所需的宽度。

Answer 3

考虑到除了该屏幕截图之外没有任何要求，示例代码将很困难，该屏幕截图一开始似乎安排得不太好。

最简单的方法可能就是获取文本，将其分解为单词，然后将它们排列在可用的空间中。这是一种限制性的观点，还是其他什么。您还需要注释数据来确定空白区域的位置。这可能只是一个索引（即，如果它是单词 4, 4）。

只需子类化视图并使用核心图形即可。

初级版本：

- (void) awakeFromNib
{
    self.words = [NSArray arrayWithObjects:@"It ", @"has ", @"to ", @"be ", @"_", @"before ", @"it ", @"can ", @"multiply.", nil];
    blank = 4;

}

- (void) drawRect:(CGRect)theRect
{
    CGRect rect = self.textView.frame; // reference view

    CGContextRef context = UIGraphicsGetCurrentContext();
    if(context == nil)
        return;

    CGContextSelectFont(context, "Helvetica", 20, kCGEncodingMacRoman);
    CGContextSetTextMatrix(context, CGAffineTransformMakeScale(1.0, -1.0));
    CGContextSetRGBFillColor(context, 1, 1, 1, 1);
    CGContextSetRGBStrokeColor(context, 1, 1, 1, 1);

    float x = rect.origin.x;
    float y = rect.origin.y + 20;  // since text is flipped adjust our y (based on font size)
    float width = rect.size.width;
    CGContextSetTextPosition(context, x, y);

    int index = 0;
    for(NSString * word in self.words)
    {
        CGPoint startPos = CGContextGetTextPosition(context);
        if(index == blank)
        {
            CGRect box = self.textField.frame;
            box.origin = startPos;
            box.origin.y -= 22; // since text is flipped adjust our y (based on font size)
            self.textField.frame = box;
            CGContextSetTextPosition(context, x + box.size.width + 35, y); // + arbitrary space
            index++;
            continue;
        }

        CGContextSetTextDrawingMode(context, kCGTextInvisible);
        CGContextShowText(context, [word UTF8String], [word length]);
        CGPoint endPos = CGContextGetTextPosition(context);

        x = startPos.x;
        if(endPos.x > width)
        {
            // next line
            x = rect.origin.x;
            y += 22;
        }

        CGContextSetTextDrawingMode(context, kCGTextFillStroke);
        CGContextShowTextAtPoint(context, x, y, [word UTF8String], [word length]);

        index++;
    }

    CGContextRelease(context);
}

这会产生以下结果：

该项目是一个简单的视图，我设置了一个 UIView 作为文本绑定的参考框架，以及我移动到位的 UITextField。您可以在屏幕上复制多个这样的句子。空白只是一个填充符，以简化循环处理，索引决定了框的显示位置。