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.3k
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
400
MDCの内部実装から学ぶ 表現力の高いViewの作り方
seto_hi
5
1.8k
CoordinatorLayoutのBehaviorを使い倒す
seto_hi
1
380
Jetpack Compose
seto_hi
2
750
UI改善に繋がるエンジニアの立ち回り
seto_hi
2
4.6k
MDCのButtonのCorner Family
seto_hi
1
170
MDCのBottomAppBarのShadowの実現方法
seto_hi
0
950
Other Decks in Programming
See All in Programming
Day0 初心者向けワークショップ実践!ソフトウェアテストの第一歩
satohiroyuki
0
410
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
560
OUPC2024 Day 1 解説
kowerkoint
0
400
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
940
エンジニア未経験が最短で戦力になるためのTips
gokana
0
210
アーキテクトと美学 / Architecture and Aesthetics
nrslib
12
3.1k
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.3k
Devin , 正しい付き合い方と使い方 / Living and Working with Devin
yukinagae
1
530
Preact、HooksとSignalsの両立 / Preact: Harmonizing Hooks and Signals
ssssota
1
700
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
120
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
110
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
570
Featured
See All Featured
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.4k
How GitHub (no longer) Works
holman
314
140k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
25k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
A Tale of Four Properties
chriscoyier
158
23k
We Have a Design System, Now What?
morganepeng
51
7.5k
Raft: Consensus for Rubyists
vanstee
137
6.8k
A Philosophy of Restraint
colly
203
16k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
8
700
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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!