Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Spannable芸 〜郵便番号編〜

Spannable芸 〜郵便番号編〜

2018/3/13
potatotips #49

Sample project
https://github.com/hiroyuki-seto/PostalCodeSample

Ad449f3f4e595ade283a30c4f66010be?s=128

HiroYUKI Seto

March 13, 2018
Tweet

Transcript

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

  2. 自己紹介 • 瀬戸優之 Seto HiroYUKI @seto_hi • Androidエンジニア & アプリデザイン

    • 株式会社ノハナ ◦ 一組でも多くの家族に笑顔を届ける ◦ 絶賛採用中 • Material Design大好き • 好きなAPIはCanvas#saveとViewGroup#layout
  3. 最高の 郵便番号入力欄を 作りたい

  4. 最高の郵便番号入力欄 要件 • 3桁目と4桁目の間にハイフンを表示したい • 3桁目を打ったらハイフンの後にカーソルが移動 ◦ ハイフンは入力させたくない ◦ アプリ側で入力したくもない

    ◦ inputType=numberでやりたい • 上3桁と下4桁をシームレスに移動したい ◦ カーソル、文字削除、ペースト
  5. 郵便番号入力欄問題 • EditText2つ ◦ 2つのEditText間のカーソル移動問題 ◦ 削除、ペースト問題 • EditText1つ ◦

    ハイフンが表示できない ◦ or ハイフンが文字として入力される • 恐らくクレカ番号入力欄でも同じ課題がある
  6. 簡単!写真1枚で 子どもの成長を届ける カレンダー付き ポストカードアプリ

  7. Spannableで解決

  8. Spannable • 文字列のデコレーションのinterface • SpannableStringBuilderなどが対応 • 文字(列)に対してSpanを設定する ◦ URLSpan, StyleSpan,

    TypefaceSpan, etc.. • 未確定文字列の色や下線もSpan
  9. ReplacementSpan

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

  11. 実装

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

  13. カスタムEditText+カスタムSpan • EditText ◦ 3文字目にカスタムSpanを設定 ◦ onDrawでハイフンを描画 • Span ◦

    ReplacementSpanを継承 ◦ getSizeで対象の文字の幅+ハイフンの幅を返す ◦ drawで対象の文字を描画
  14. 罠 • 0文字の際はReplacementSpanが効かない →仕様 • 未確定文字列の背景の描画 →サンプル見てね! • SurrogatePairを考慮したSpan →気合

     かなり地道に実装する必要がある
  15. Have a nice Spannable!