Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Multiline TextField Like Native iOS Token View #14

Open
basilmariano opened this issue Mar 14, 2017 · 4 comments
Open

Multiline TextField Like Native iOS Token View #14

basilmariano opened this issue Mar 14, 2017 · 4 comments

Comments

@basilmariano
Copy link

basilmariano commented Mar 14, 2017

Can we use textView instead on textField to support multi line?
This library is more beautiful than the others.

oh +100 fir this feature.

Thanks

@basilmariano basilmariano changed the title Multiline TextField Multiline TextField Like Native iOS Token View Mar 15, 2017
@bcylin
Copy link
Collaborator

bcylin commented Mar 15, 2017

Thanks for the feedback. I believe the original design didn’t involve multiline layout in order to keep it simple, hence the horizontal scrolling.

It definitely requires some design updates to build multiline support on top of the current behaviour. Any good ideas?

@trisix
Copy link
Member

trisix commented Mar 15, 2017

Hi, I designed the UI and UI interaction for this component. And with @bcylin 's great talents, we make this library.

Some Random Thoughts About This Issue In Chinese

(Not Actually A Native Speaker So Thinking And Typing In Chinese Is Faster For Me)

大致上想像是:

  1. 現有的token 其實不太需要動,會要動的是token的layout方式

  2. 如果要相容現有的,可能需要某種 maxNumberOfLines ? (如果是1 ,那應該行為就跟目前一樣,如果大於1, 就變成類系統Mail,或是Facebook發文時的權限控制那邊的那種多行直向滑動的)

或是一個bool ?(isMultipleLinesEnabled 之類的)去判斷是否是單行橫向滑動模式(bool 是因為,可能沒有要限制到底內容有多少行,可能是要可以一直打,所以差別只有是不是單行),但這只是很單純粗淺的想法,真的要實作的話也許有更好的方式

  1. 同時多行除了內容多行,另一部分要確定的會是,那要顯示的會是幾行?可能需要某種 maxVisibleNumberOfLines ?這也會影響其他部分的高度增長

舉例來說:上面提到的Facebook 的大致上是可以顯示到2行,但實際內容應該沒有限制,所以token還能顯示在一行內的時候,高度就只有1行的高度,到了得用兩行才放得下的時候,高度就對應變成2行,但當內容到了得超過兩行才放得下的時候,高度就還是2行的高度

但iOS 自己的Mail或是Gmail的收件人那欄,就是一直增長高度的那種,但是一但focus離開那個欄位,就會縮到一行的高度,而且變成概述的文字

但上述兩種的目的和用途不太一樣,如果要說的話,會覺得以延續之前一開始的設計和用途的話,會比較像是前面的Facebook那種,因為主要用途不是打很多,而是比較像是提供一些filter的options

但這個issue的標題應該是比較想像Mail那種?

但不管是哪種,其實主要變動會是Layout的方式,單行橫向當然還是跟現在一樣,但當不是單行的時候,就會變成要看scrollview的width來決定token的擺放的位置要不要換行

  1. 因為前面有個可自定的icon,所以看要做到怎麼樣,也許相對簡單的會是行數增加高度增高的時候,第二行的最左邊其實是對齊第一行的最左邊的
(icon)  [tokenInLine1]...
        [tokenInLine2]...

Facebook的會是上面講的那種,但因為他最多只顯示兩行(剩下要滑動才看得到),所以左側icon下方的留白不會太多

iOS 的Mail會是跟收件人那個欄位標註對齊,

(icon) [tokenInLine1]....
[tokenInLine2]...

這種的排列方式有可能就會動到現有比較多東西

@bcylin
Copy link
Collaborator

bcylin commented Mar 19, 2017

Perhaps it'd go through less trouble if the multiline layout could be achieved using a separate class? It's also easier to maintain code-wise.

@trisix
Copy link
Member

trisix commented Mar 19, 2017

Yes, I think so.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants