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.9k
事業支援というお仕事
seto_hi
0
420
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
400
Jetpack Compose
seto_hi
2
790
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.7k
MDCのButtonのCorner Family
seto_hi
1
200
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
980
Other Decks in Programming
See All in Programming
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
print("Hello, World")
eddie
2
530
Kiroで始めるAI-DLC
kaonash
2
630
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
270
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
250
AIでLINEスタンプを作ってみた
eycjur
1
230
機能追加とリーダー業務の類似性
rinchoku
2
1.3k
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
1
450
MCPでVibe Working。そして、結局はContext Eng(略)/ Working with Vibe on MCP And Context Eng
rkaga
5
2.3k
個人軟體時代
ethanhuang13
0
330
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
170
Featured
See All Featured
How to Ace a Technical Interview
jacobian
279
23k
A better future with KSS
kneath
239
17k
The Cult of Friendly URLs
andyhume
79
6.6k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Site-Speed That Sticks
csswizardry
10
820
Code Review Best Practice
trishagee
71
19k
How to train your dragon (web standard)
notwaldorf
96
6.2k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
GitHub's CSS Performance
jonrohan
1032
460k
Facilitating Awesome Meetings
lara
55
6.5k
Agile that works and the tools we love
rasmusluckow
330
21k
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!