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
文字拡大されても怖くない レイアウト作りのコツ
Search
Tiphaine
July 14, 2023
Technology
5
3k
文字拡大されても怖くない レイアウト作りのコツ
Shibuya.apk #43
https://shibuya-apk.connpass.com/event/288211/
Tiphaine
July 14, 2023
Tweet
Share
More Decks by Tiphaine
See All by Tiphaine
既存デザインを変更せずにタップ領域を広げる方法
tahia910
1
300
Lottieアニメーションをカスタマイズしてみた
tahia910
0
220
Customize your Lottie animations
tahia910
0
140
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
960
Navigation Focus Support in 2024: Support Keyboard Navigation with Compose!
tahia910
0
140
Handling focus in 2024
tahia910
0
1.4k
Matomoを使ってみた
tahia910
0
2.3k
社内でできるアクセシビリティのはじめかた
tahia910
3
720
Raise accessibility awareness at work as an Android developer
tahia910
1
180
Other Decks in Technology
See All in Technology
AWS DDoS攻撃防御の最前線
ryutakondo
1
160
相互運用可能な学修歴クレデンシャルに向けた標準技術と国際動向
fujie
0
250
React Server ComponentsでAPI不要の開発体験
polidog
PRO
0
270
【CEDEC2025】『Shadowverse: Worlds Beyond』二度目のDCG開発でゲームをリデザインする~遊びやすさと競技性の両立~
cygames
PRO
1
370
生成AI導入の効果を最大化する データ活用戦略
ham0215
0
160
ファッションコーディネートアプリ「WEAR」における、Vertex AI Vector Searchを利用したレコメンド機能の開発・運用で得られたノウハウの紹介
zozotech
PRO
0
350
Claude Codeは仕様駆動の夢を見ない
gotalab555
23
6.6k
AI時代の経営、Bet AI Vision #BetAIDay
layerx
PRO
1
2k
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
220
Amazon Q と『音楽』-ゲーム音楽もAmazonQで作成してみた感想-
senseofunity129
0
140
Findy Freelance 利用シーン別AI活用例
ness
0
500
S3 Glacier のデータを Athena からクエリしようとしたらどうなるのか/try-to-query-s3-glacier-from-athena
emiki
0
220
Featured
See All Featured
Thoughts on Productivity
jonyablonski
69
4.8k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
RailsConf 2023
tenderlove
30
1.2k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Adopting Sorbet at Scale
ufuk
77
9.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Language of Interfaces
destraynor
158
25k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Embracing the Ebb and Flow
colly
86
4.8k
Visualization
eitanlees
146
16k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Transcript
Shibuya.apk#43ɹ2023.7.14ɹTiphaineɹ จࣈ֦େ͞Εͯා͘ͳ͍ ϨΠΞτ࡞Γͷίπ
ࣗݾհ ✤ Tiphaine(ςΟϑΣϯ) ✤ AndroidΤϯδχΞ ✤ϝυϐΞגࣜձࣾ
จࣈ֦େʁ ✤ Ϣʔβʔิॿػೳ ✤ ϑΥϯτͱදࣔ྆ํͱ ✤ ʹΑͬͯσϑΥϧτͷ ઃఆͰ͋Δ͔
·͊ɺSPΛ͑ ͳΜͱ͔ͳΔͰ͠ΐ͏ …ͦͷͣͩͬͨ
STORY TIME
ʮܾఆϘλϯ͕ग़ͯͳ͍ Ͱ͚͢Ͳʔʯ
None
None
จࣈ֦େΛ͢Δͱ Ϙλϯ͕ݟ͑ͳ͍
͔͠ ͜ͷը໘͚ͩ͡Όͳ͍
😇
࠶ൃࢭରࡦͷͨΊʹ ࢀߟ͕ཉ͍͠
“ WCAG ୡج४1.4.4ɹςΩετͷαΠζมߋ (…)ςΩετɺ ίϯςϯπຢػೳΛଛͳ͏͜ͱͳ͘ɺ ࢧԉٕज़ͳ͠Ͱ200%·ͰαΠζมߋͰ͖Δɻ
➤ શͯͷςΩετΛ֦େͰ͖Δ ➤ શͯͷςΩετ͕ಡΊΔ ➤ શͯͷػೳ͕͑Δ ඪ
͍ͭಉ͡ʹͳΔ ࡞Δ࣌ʹରࡦͰ͖Δ
ؾΛ͚ͭΔ͖ϙΠϯτ 1⃣ εΫϩʔϧ 2⃣ Margin/Padding 3⃣ লུͱվߦ
1⃣ εΫϩʔϧ ✤ ΧελϜϨΠΞτɺ·ͨComposeΛ͏ͳΒɺ શମεΫϩʔϧग़དྷΔΑ͏ʹ͠Α͏ AμΠΞϩάʹ͍ͭͯ εΫϩʔϧͰ͖ͳ͍ ➡︎
1⃣ εΫϩʔϧ ✤ AlertDialog͍ςΩετΛsetTitleͰઃఆ͠ͳ͍ AμΠΞϩάʹ͍ͭͯ AlertDialog.Builder(this) .setTitle(“λΠτϧʹඇৗʹ…”) .setPositiveButton("ܾఆ", /*…*/) .setNegativeButton("Ωϟϯηϧ",
/*…*/) .show() ̎ߦͰলུ͞Εͯ͠·͏ ➡︎
AlertDialog.Builder(this) .setTitle(“λΠτϧʹඇৗʹ…”) .setPositiveButton("ܾఆ", /*…*/) .setNegativeButton("Ωϟϯηϧ", /*…*/) .show() AlertDialog.Builder(this) .setTitle(“λΠτϧʹඇৗʹ…”) .setMessage(“λΠτϧʹඇৗʹ…”)
.setPositiveButton("ܾఆ", /*…*/) .setNegativeButton("Ωϟϯηϧ", /*…*/) .show() 1⃣ εΫϩʔϧ ➡ setMessageΛ͓͏ AμΠΞϩάʹ͍ͭͯ
✤ ϢʔβʔͷखؒΛݮΒͨ͢Ίɺॏࢹ͍ͨ͠෦͚ͩΛ εΫϩʔϧൣғ͔Β֎ͦ͏ 1⃣ εΫϩʔϧ A෦తʹݻఆ͢Δ
A෦తʹݻఆ͢Δ 1⃣ εΫϩʔϧ ݻఆ෦ εΫϩʔϧ Մೳ෦
✤ εΫϩʔϧͰ͖ΔࣄΛ໌֬ʹ͍͔ͨ͠Βɺ Πϯδέʔλʔফ͑ͳ͍Α͏ʹ͢Δ ✤ Compose·ͩͰ͖ͳ͍😣 1⃣ εΫϩʔϧ AΠϯδέʔλʔΛදࣔ͢Δ android:fadeScrollbars="false" android:scrollbarAlwaysDrawVerticalTrack="true"
android:scrollbarSize="4dp" android:scrollbarThumbVertical=“@color/…” android:scrollbars="vertical"
1⃣ εΫϩʔϧ AΠϯδέʔλʔΛදࣔ͢Δ
2⃣ MARGIN / PADDING ✤ ࠨӈͷmarginΛΕͳ͍
2⃣ MARGIN / PADDING ✤ ࠨӈ/্ԼpaddingΕͳ͍ʢಛʹΧελϜϏϡʔʣ
✤ padding͕ޮ͘Α͏ʹɺඞͣ minHeight/minWidthΛ͓͏ 3⃣ লུͱվߦ AαΠζΛݻఆ͠ͳ͍ Modifier.defaultMinSize(minHeight = …) android:layout_height="wrap_content"
android:minHeight=“@dimen/…”
✤ λοϓͯ͠ଓ͖͕ಡΊΔจষܥͳΒ🆗 ✤ ΞΫγϣϯΛى͜͢Ϙλϯܥ🆖 ❌ ✅ ✅ ✅ ELLIPSISͷ͍ํ 3⃣
লུͱվߦ
✤ Horizontal LinearLayoutɺ·ͨComposeͷRow ෯ͷweightͳͲΛࢦఆ͠Α͏ ROWܥཁҙ ӈͷཁૉ͕֎ԡ͞Εͯ͠·͏ ⬆︎ 3⃣ লུͱվߦ
✤ ςΩετೖྗܥग़དྷΔ͚ͩϚϧνϥΠϯՄೳʹ͢Δ ✦ ʢจࣈ੍ݶͷӨڹͰແཧ͔😥ʣ ✦ ʢώϯτͷ͞ʹ߹Θͤͯվߦ͞Εͳ͍͔😭ʣ 3⃣ লུͱվߦ AςΩετೖྗʹ͍ͭͯ
⚠ ANDROID STUDIOͷϓϨϏϡʔ ✤ ࣮ػͱൺͯ෯͕͗͢Δ
ݕূʹ͋Εແఢɿ Β͘Β͘εϚʔτϑΥϯ
·ͱΊ ✤ ϑϨʔϜϫʔΫΛ৴༻͗͢͠ͳ͍ ✤ ͻͨ͢ΒεΫϩʔϧΛೖΕΔ ✤ εΫϩʔϧͰ͖Δ͜ͱΛ໌֬ʹ͢Δ ✤ EllipsisΛਖ਼͘͠͏ ✤
Ͱ͖Δ͚ͩϚϧνϥΠϯՄೳʹ͢Δ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ @tahia910ɹ