iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 4
0

還記得在介面設計時,快速記帳的畫面嗎?

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

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

我們可以再舉幾個範例:

  • 買飲料想記帳時:「飲料」、「茶魔」、「梅子綠」
  • 買衣服想記帳時:「衣服」、「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 就可以幫我們計算什麼時候該換行、提供捲動功能、捲動到特定標籤的功能等等。

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


上一篇
Money Mom - 實做調色盤
下一篇
Money Mom - 實作標籤輸入 Part 1
系列文
iOS 三十天上架記帳 APP30

1 則留言

0
Don
iT邦新手 5 級 ‧ 2017-12-23 16:36:49

素晴らしい~

我要留言

立即登入留言