Лучший способ создать представление для заметок

Question

Я пишу приложение для iPhone / iPad, которое позволит пользователю заполнять поля для заметок.Примечания будут отличаться каждую неделю.Я вижу загрузку заметок в формате XML с нашего веб-сервера.То, с чем я борюсь, это как динамически создать представление, которое может выровнять текст и поля ввода, как в примере ниже.контролирует в соответствии с текстом.Можно ли это сделать с помощью 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];

С помощью некоторой простой арифметики вы теперь знаете местоположение правого конца первой метки.Затем вы можете добавить в текстовое поле.Возможно, вам придется поработать с фреймом, чтобы он правильно выстроился в линию - если вы хотите хороший интерфейс, не пропустите этот шаг!

// 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

Пример кода будет сложным, если не считать требований, кроме этого скриншота, который, по-видимому, не очень хорошо организован с самого начала.

Самый простой способ - просто получить текст, разбить его на словаа затем расположите их в свободном месте.Будь то ограничивающий взгляд или что-то еще.Вы также захотите иметь данные заметок, чтобы определить, где будет пустое пространство.Это может быть просто индекс (т. Е. Если его слово 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);
}

Этопроизводит это:

1011 * 1014 * проект простой вид, я создал UIView в качестве опорного кадра, на который связан текст, и UITextField, что ядвигаться на место.Вы можете дублировать более одного такого предложения на экране.Пробел - это просто заполнитель для упрощения циклической обработки, индекс - это то, что определяет, где отображается поле.

Answer 3

Если у вас есть начальный и конечный тексты, вы можете попробовать использовать -sizeWithFont:constrainedToSize: или -sizeWithFont:constrainedToSize:lineBreakMode: NSString.Кроме того, вы можете добавить параметр в ваш XML-файл, который дает необходимую ширину каждого элемента.