還記得在介面設計時，快速記帳的畫面嗎？

我們在快速記帳時，需要一個「標籤」的輸入框。

標籤輸入的優點就是可以快速輸入「關鍵字」，比方說要記錄一筆早餐的帳，我們不用在意什麼大分類、小分類、備註，只需要很直覺地思考花費什麼，例如：「早餐」、「拉亞漢堡」、「蛋餅」，三個關鍵字，直接輸入變成該筆帳的標籤。

我們可以再舉幾個範例：

• 買飲料想記帳時：「飲料」、「茶魔」、「梅子綠」
• 買衣服想記帳時：「衣服」、「Uniqlo」、「休閒褲」
• 逛夜市想記帳時：「大東夜市」、「滷味」

以此類推，有了標籤輸入，我們在記錄一筆帳時，就可以很快速記錄下該筆帳的「特點」，有效地幫助我們稍後回想起這筆帳。

「標籤輸入」介面範例

以下兩種介面都是類似標籤輸入的界面：

來源：https://github.com/whitesmith/WSTagsField

來源：https://github.com/rsattar/CLTokenInputView

網路上搜尋實作方式

在投入實作之前，先搜索一下網路上已有的套件，統整一下可能的實作方式。

WSTagsField

GitHub：https://github.com/whitesmith/WSTagsField

這個套件實作方式是在 UIScrollView 裡面畫出標籤，然後在最後加上一個 UITextField，透過監聽 UITextField 的 Backward 事件來做刪除的動作。

CLTokenInputView

GitHub：https://github.com/rsattar/CLTokenInputView

這個做法也是很類似，在一個 UIView 裡面塞進一堆標籤，然後在最後加上一個 UITextField，透過監聽 UITextField 的 Backward 事件來做刪除的動作。

不同的是，這個套件的做法是把 UIView 不斷拉大，也就是隨著 Tag 的數量增長，整個 UIView 的高度也會增加。

iOS Messages

iOS 內建的 Messages 比較不一樣，因為游標是可以落在任意 Tag 的前後，而不是只能在「最後」。

操作方式如上圖，只是這種做法如果在 Tag 很多的時候，View 會長太高，iOS 的做法是讓他成長碰到鍵盤時，就變成可以捲動的 View，可是往回捲之後就不能再往下捲，而且 Tag 太多的時候，輸入文字的時候 View 就會不斷跳動，我也看不到我正在輸入的文字了~~，Apple 品質，堅若磐石~~。

目前我想到能模擬這種效果的做法，是用 UITextView 然後使用 AttributedText 模擬標籤的效果，然後再針對使用者操作游標、點擊的事件，做不同的處理，說得不對請用力鞭。

評估最終實作方式

心目中理想的方式，是一次可以顯示兩到三行標籤的畫面，多餘的部分允許上下捲動，然後每個標籤旁邊都會帶個小叉叉，方便使用者任意刪除標籤，最後就是使用者可以在最後面有一個輸入框，可以讓使用者輸入完文字後，按下 Return 按鍵就可以新增一個標籤。

大致畫面如下（身為工程師，不會用 Sketch 也是很正常的，只是想大概展示一下心目中的畫面）：

預估需要一個 UICollectionView 顯示標籤，並在最後一個標籤後面塞入 UITextField 當作最後一個 Cell，使用者觸碰 UICollectionView 時，就會讓最後那個 UITextField 進入輸入模式（顯示鍵盤），而使用者觸碰標籤旁邊的小叉叉就會刪除該標籤。

比起前面在網路上找到的套件，我認為 UICollectionView 的實作方式，會比使用 UIScrollView 自己計算位置還簡單，我們只需要提供標籤的寬度，UICollectionView 就可以幫我們計算什麼時候該換行、提供捲動功能、捲動到特定標籤的功能等等。

下一篇我們就會開始實作這個標籤的功能。