Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Spannable芸 〜郵便番号編〜
Search
HiroYUKI Seto
March 13, 2018
Programming
4
2.4k
Spannable芸 〜郵便番号編〜
2018/3/13
potatotips #49
Sample project
https://github.com/hiroyuki-seto/PostalCodeSample
HiroYUKI Seto
March 13, 2018
Tweet
Share
More Decks by HiroYUKI Seto
See All by HiroYUKI Seto
Androidアプリの 安全なリファクタリングを行うパターン集
seto_hi
2
4.9k
UI TestやVisual Regression Testを コスパ良くやる
seto_hi
3
1.8k
事業支援というお仕事
seto_hi
0
410
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
390
Jetpack Compose
seto_hi
2
780
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.7k
MDCのButtonのCorner Family
seto_hi
1
190
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
970
Other Decks in Programming
See All in Programming
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
3
580
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
AIともっと楽するE2Eテスト
myohei
8
3k
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
470
レトロゲームから学ぶ通信技術の歴史
kimkim0106
0
110
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
0
120
ソフトウェア設計とAI技術の活用
masuda220
PRO
17
3.8k
テスト駆動Kaggle
isax1015
1
620
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
Goで作る、開発・CI環境
sin392
0
260
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
Hack Claude Code with Claude Code
choplin
7
2.6k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Done Done
chrislema
184
16k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
520
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
830
Side Projects
sachag
455
42k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
990
Transcript
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 ハイフンが文字として入力される • 恐らくクレカ番号入力欄でも同じ課題がある
簡単!写真1枚で 子どもの成長を届ける カレンダー付き ポストカードアプリ
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!