3

我完全不知道该怎么做。

首先，视图看起来像这样：
起始图像

接下来，点击标签栏（我假设它是一个带有占位符图像的修改 UITextField），标签栏动画到视图的顶部。如下图所示：
标签点击图像

您可以通过键入一个单词或一系列单词并单击键盘上的返回来添加标签。完成此操作后，一个气泡会包围标签，并且它也会显示在标签栏上。

完成后，单击“完成”按钮，标签栏向下动画到其原始位置，以及栏中的标签，如下所示：
最终位置图像

我有几个问题：

  1. 如何向下动画标签栏和标签字段，以及如何向上动画标签字段（我假设使用 CoreAnimation - 但我没有经验。我是将视图组合在一起执行此操作，还是单独执行 -一个）
  2. 我将如何在 UITextView/Field 中产生这种“标记效果”？

我的一个理论是将底部的两个视图组合为一个 UIView，并将其作为一个整体进行动画处理。然后对于标记过程，不要做气泡（我不知道如何做），而只允许单个单词标签并解析文本视图并将单词手动插入到栏中。我认为这可能会产生一些滞后影响。

4

4 回答 4

2

我刚刚创建了一个非常通用的类，它应该可以满足您的需求。你可以在这里找到它：RoleModel/RMSTokenView。

于 2013-09-02T17:57:41.433 回答
2

@property UIView* tagsView从他们的布局来看，标签图形和包含标签的设置按钮被放置在一个 UIView中（我们称之为圆角（可能通过 Quartz 提供的 .cornerRadius 设置），其中包含每个接受标签的文本（让我们为此调用容器@property UIView* tagsEditorView）。

然后，要回答有关向上动画标签栏和标签字段以添加/编辑标签（或按下完成时向下）的问题，最简单的方法是使用 UIView 类方法进行动画。

    CGFlot keyboardTop = y; // calculate keyboard top here.
    newTagsFrame = CGFrameMake(0, 0, _tagsView.size.width, _tagsView.size.height);
    newTagsEditorFrame = CGFrameMake(0, _tagsView.size.height, _tagsView.size.width, keyboardTop);

    [UIView animateWithDuration:0.5 animations:^{
                        _tagsView.frame = newTagsFrame;
                        _tagsEditorView.frame = newTagsEditorFrame;
                     }];

回答第二个问题，对于形状，如上所述，如果您#import <QuartzCore/QuarzCore.h>，您可以设置cornerRadius 并根据需要调整项目形状。对于项目本身，您应该能够将它们添加为UIButton对象（或UILabel您喜欢的对象）作为 tagsEditorView 的子视图，按您认为合适的方式定位。

#import <QuartzCore/QuartzCore.h>

// ...

    // at the point at which it is determined that a tag is valid, non-duplicated, etc.
    UILabel* tagLabel = [[UILabel alloc] init];
    // set the label text, background color, text color, borders, frame size, etc
    // at the point at which it is determined that a tag is valid, non-duplicated, etc.
    tagLabel.layer.cornerRadius = (tagButton.frame.size.height / 2);

    _tagsArray = [_tagsArray.mutableCopy append:tagLabel];

    [_tagsEditorView addSubview:tagLabel];

// ...

    // at the point of ultimate display
    for (UILabel* tagLabel in _tagsArray)
    {
        // the following will give an initial rect to work with based on label contents,
        // and the font can be changed if desired by changing the minFontSize: argument
        CGRect tagLabelRect
          = [tagLabel.text sizeWithFont:[myFont fontWithSize:_myFontSize]
                            minFontSize:_myFontSize
                         actualFontSize:&actualFontSize
                               forWidth:_tagsEditorView.frame.size.width
                          lineBreakMode:NSLineBreakByWordWrapping];

        // calculate tagLabel.frame based on individual tag and on preceding
        // number of edited tags (filling/wrapping left as an exercise to reader)
    }

定位标签本身只是基于您认为可接受的视图中标签布局的数学。

于 2013-05-13T05:43:49.097 回答
1

If you are looking for a UITextfield based solution, here is a nice open source component JSTokenField available

于 2013-05-16T13:59:10.780 回答
1

看看这个开源项目TURecipientBar。它看起来像 Apple Mail 收件人视图。我没有测试该解决方案，但它看起来干净且方便。

于 2013-05-17T12:05:36.590 回答