Spannable芸 〜郵便番号編〜 potatotips #49 株式会社ノハナ 瀬戸優之 @seto_hi

自己紹介 ● 瀬戸優之 Seto HiroYUKI @seto_hi ● Androidエンジニア & アプリデザイン ● 株式会社ノハナ ○ 一組でも多くの家族に笑顔を届ける ○ 絶賛採用中 ● Material Design大好き ● 好きなAPIはCanvas#saveとViewGroup#layout

最高の 郵便番号入力欄を 作りたい

最高の郵便番号入力欄 要件 ● 3桁目と4桁目の間にハイフンを表示したい ● 3桁目を打ったらハイフンの後にカーソルが移動 ○ ハイフンは入力させたくない ○ アプリ側で入力したくもない ○ inputType=numberでやりたい ● 上3桁と下4桁をシームレスに移動したい ○ カーソル、文字削除、ペースト

郵便番号入力欄問題 ● EditText2つ ○ 2つのEditText間のカーソル移動問題 ○ 削除、ペースト問題 ● EditText1つ ○ ハイフンが表示できない ○ or ハイフンが文字として入力される ● 恐らくクレカ番号入力欄でも同じ課題がある

簡単！写真１枚で 子どもの成長を届ける カレンダー付き ポストカードアプリ

Spannableで解決

Spannable ● 文字列のデコレーションのinterface ● SpannableStringBuilderなどが対応 ● 文字(列)に対してSpanを設定する ○ URLSpan, StyleSpan, TypefaceSpan, etc.. ● 未確定文字列の色や下線もSpan

ReplacementSpan

ReplacementSpan ● TextViewの文字列を置換するSpan ● 独自絵文字やデコ絵文字などに使われている ● 文字列の描画幅を任意に変更できる ● 文字列と描画を異なるものにできる

実装

サンプル https://github.com/hiroyuki-seto/PostalCodeSample

カスタムEditText＋カスタムSpan ● EditText ○ 3文字目にカスタムSpanを設定 ○ onDrawでハイフンを描画 ● Span ○ ReplacementSpanを継承 ○ getSizeで対象の文字の幅+ハイフンの幅を返す ○ drawで対象の文字を描画

罠

罠 ● 0文字の際はReplacementSpanが効かない →仕様 ● 未確定文字列の背景の描画 →サンプル見てね！ ● SurrogatePairを考慮したSpan →気合 　かなり地道に実装する必要がある

Have a nice Spannable!