如何实现像tumblr这样的标记功能

Question

我想实现像tumblr这样的标记功能。我尝试使用UITextfield并在textfield中为tags_name添加了UIButtons。

1. 如何在第一个背面选择标签并在第二个背面删除它？
2. 如何在UITextfield中的多行中添加标记？

请为此功能提供任何解决方案。 这是我在UItextfield中添加数组按钮的代码。

    for (count_value = 1; count_value<=[textfieldarray count]; count_value++)
    {
        UIButton *button_dish = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        [button_dish setTag:count_value];
        [button_dish.layer setOpacity:0.5];
        [button_dish.layer setCornerRadius:4.0f];
        [button_dish setUserInteractionEnabled:YES];
        [button_dish setShowsTouchWhenHighlighted:YES];
        [button_dish setContentMode:UIViewContentModeCenter];
        [button_dish setTitleEdgeInsets:UIEdgeInsetsMake(8, 8, 4, 8)];
        [button_dish.titleLabel setLineBreakMode:NSLineBreakByWordWrapping];
        [button_dish.titleLabel setFont:[UIFont fontWithName:@"Eau-SansBold" size:12]];
        [button_dish setContentVerticalAlignment:UIControlContentVerticalAlignmentCenter];
        [button_dish setContentHorizontalAlignment:UIControlContentHorizontalAlignmentCenter];
        [button_dish setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
        [button_dish setContentMode:UIViewContentModeScaleAspectFit];
        [button_dish setTitle:textfieldarray[count_value-1] forState:UIControlStateNormal];
        CGSize expected_Size1 = [textfieldarray[count_value-1] sizeWithFont:button_dish.titleLabel.font constrainedToSize:button_dish.frame.size lineBreakMode:NSLineBreakByWordWrapping];


        [button_dish addTarget:self action:@selector(buttonactionmethod:) forControlEvents:UIControlEventTouchUpInside];
        left_view_length1 = left_view_length1+expected_Size1.width+16+12;

        [iconview1 setFrame:CGRectMake(0, 10, left_view_length1, 24)];
        [button_dish setFrame:CGRectMake(x_cordinate1, 2, expected_Size1.width+16, 20)];
        x_cordinate1 = x_cordinate1+expected_Size1.width+16+12;

        [iconview1 addSubview:button_dish];
        [textfield1 setLeftView:iconview1];
    }

以下是tumblr标签的示例参考图像， 第一张图片显示第一个背面的按钮选择。 第二张图片显示多行标签。





请给我一些参考或提示。

Answer 1

这被称为“令牌字段”。它们首先出现在Mail.app中，最终成为AppKit框架的一部分。 Documentation here.

在Cocoa Touch中重现这种外观应该很容易。在Cocoa Touch中，每个视图都由Core Animation层支持，并且图层根据您的UI具有cornerRadius属性。将该属性设置为字段高度的一半以创建圆角末端。如果平坦的外观可以设置背景颜色，或者可以绘制细微的渐变以提供更凸的外观。

当然，如果你想要一个可以重复使用的视图，你只需要做所有这些，你可以设置文本等等。如果您只需要其中一些用于自定义按钮或其他东西，则可能更容易在您喜欢的绘图程序中绘制它们。

另一种可能性是使用第三方控件，例如：

• TITokenField

• JSTokenField

• RMStokenview

• COTokenField（COPeoplePickerViewController的一部分）

此SO答案的参考。