読者です 読者をやめる 読者になる 読者になる

tumblr

tumblr(タンブラー)は、メディアミックスブログサービス。ブログとミニブログ、そしてソーシャルブックマークを統合したマイクロブログサービスである。アメリカのDavidville.inc(現: Tumblr, Inc.)により2007年3月1日にサービスが開始された。

SwiftでMultiAutoCompleteTextViewみたいなのを作る

AndriodにはMultiAutoCompleteTextViewというViewがある。ワードの補完候補を表示してくれて、カンマ区切りで複数回候補表示してくれるやつ。 iPhoneにはそういうViewが無いし、オープンソースでもそういうTextFieldが無い。何故無いのか、そもそもソフトウェアキーボードの補完だけで事足りるのか、使いたい状況があまり無いのかはよく分からない。が、使いたかったので作った。

f:id:shim0mura:20160925233343g:plain

github.com

作ったと言っても、若干似たライブラリ(https://github.com/mnbayan/AutocompleteTextfieldSwift)はあったので、それを少し改造しただけ。

インストール

cocoapodに登録してあるので、他のライブラリと同じくPodfileに以下を追加

pod 'MultiAutoCompleteTextSwift'

またはcarthageを使ってCartfileに以下を追加

github "shim0mura/MultiAutoCompleteTextSwift"

使い方

TextFieldにMultiAutoCompleteTextFieldをClassとして設定して、autoCompleteStringsに候補ワードのArrayを設定

import MultiAutoCompleteTextSwift

@IBOutlet weak var textField: MultiAutoCompleteTextField!
override func viewDidLoad() {
    super.viewDidLoad()
    let words = [ "ruby", "rust", "mruby", "php", "perl", "python"]
    textField.autoCompleteStrings = words
}

そうすると上のgif画像みたいな感じで候補が出て来る。

ローマ字で候補表示

「スウィフト」という文字を入力したい場合、AndroidのMultiAutoCompleteTextViewはデフォルトでは「スウ」と入力しないと候補として「スウィフト」が表示されない。できればローマ字の段階、この例であれば「suwi」と入力した時とか、ひらがなで「すう」と入力した段階で「スウィフト」が出てきて欲しい。そういうときのために、内部で「suwifuto」とか「すうぃふと」を「スウィフト」と紐付けられるようにしてある。

let token = MultiAutoCompleteToken(top: "スウィフト", subTexts: "suwifuto", "すうぃふと", "swift")
textField. autoCompleteTokens.append(token)

StringじゃなくてMultiAutoCompleteTokenという独自のクラスを作ってそのインスタンスに出したい候補をもたせて、その候補ワードと入力文字列に一致するところがあるか片っ端から単純比較してるだけ。

UITableViewはいじる必要があるかも

候補ワードはUITableViewで表示している。ただ、TextFieldの下に何か別のViewがあるとTableViewとそのViewが重なるため、入力時はTextFieldと下のViewのconstraintをうまくいじってやる必要がある。onTextChangeとonSelectというコールバックがあるので、それをうまいこと使う。

textField.onTextChange = {[weak self] str in
                        self!.marginBetweenTextFieldBottomView.constant = 100
        }