在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標記效果

回答

相關問題