在iOS中重现Tumblr标记效果

我完全难以理解如何去做。在iOS中重现Tumblr标记效果

首先，观点看起来是这样的：
Starting Image

接下来，在标签栏上点击（我想这是一个修改的UITextField有占位符图片）和标签栏动画播放至顶风景。正如下面的照片看到：
Tags Tapped Image

您可以通过键入一个单词或一系列单词，然后点击键盘上的回报添加标签。一旦你这样做了，一个气泡包含了标签，它也出现在标签栏上。

一旦你完成，你点击“完成”按钮和标签栏向下动画播放至原来的位置，在酒吧的标签一起，如下图所示：
Final Position Image

我有几个问题：

如何向下动画标签栏和标签领域，如何做向上动画标签字段（我假设有CoreAnimation - 但我与它没有任何经验，难道我组提出的意见做。这个，或者一个接一个地做）
如何在UITextView/Field中产生这种“标记效应”？

我的一个理论是将底部的两个视图组合在一起形成一个UIView，并将整体动画化。然后对于标记过程，不要做泡泡（我不知道如何做到这一点），但只允许单词标记并解析textview并手动将词语插入到栏中。我认为这可能会产生一些滞后影响。

来源

2013-05-09 pierceboggan

为什么在Mono Touch和Objecive-C上标记你的问题？（因为您试图复制他们的应用程序的一部分而不是用户的API，所以删除了Tumblr标记） – 2013-05-09 21:42:19

因为我对解决方案类型没有偏好。我个人使用Xamarin的工具，但我不介意Obj-C的答案。 – pierceboggan 2013-05-09 22:40:37

我刚刚完成创建一个非常灵活的类，应该做你需要的。你可以在这里找到它：RoleModel/RMSTokenView。

来源

2013-09-02 17:57:41

您可能想在此提及，它是MIT许可的。 – 2013-09-02 21:05:45

我将它添加到存储库README中。谢谢！ – 2013-09-02 22:42:39

只是看看这个！它可以满足我的需求。因为你有麻省理工学院的许可证，我还会为它创建一个Xamarin绑定（稍后链接）。 – pierceboggan 2013-09-03 00:05:59

从布局的外观上来看，包含标签的标签图形和设置按钮被安置在一个UIView的（我们称此为@property UIView* tagsView），再有就是有一个UITextView，在他们是一个特殊的视图放置具有圆角的特殊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-13 05:43:49

如果你正在寻找一个基础的UITextField的解决方案，这里是一个很好的开源组件JSTokenField可用

来源

2013-05-16 13:59:10 Amar

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

来源

2013-05-17 12:05:36

在iOS中重现Tumblr标记效果

回答

相关问题