Question

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

sample image http://www.ccvonline.com/downloads/ios/example.png

我需要让输入控件与文本内联。这可以用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:方法只能返回一个矩形。如果你有多行，它将永远不会返回小于文本整个宽度的东西，这使得它的用处不那么有用。

<小时/> 这可能是最简单的可视化方法。另一种方法是使其更有效，特别是在滚动时（通过剪切三个标签中的一个）是在字符串中添加一堆空格并在整个屏幕上有一个标签。您可能需要一种方法来计算文本字段构成特定宽度的空白数，然后根据需要调整x坐标。如果你想尝试的话，我会把它留给你。

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);
}

这产生了这个：

enter image description here

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

创建笔记视图的最佳方法

3 个答案: