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

HiroYUKI Seto

March 13, 2018
Tweet

More Decks by HiroYUKI Seto

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Spannableで解決

    View full-size slide

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

    View full-size slide

  9. ReplacementSpan

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

  14. Have a nice Spannable!

    View full-size slide