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
290
Lottieアニメーションをカスタマイズしてみた
tahia910
0
210
Customize your Lottie animations
tahia910
0
130
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
910
Navigation Focus Support in 2024: Support Keyboard Navigation with Compose!
tahia910
0
130
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
本当にわかりやすいAIエージェント入門
segavvy
10
5.9k
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
11
4.2k
Wasmで社内ツールを作って配布しよう
askua
0
120
P2P通信の標準化 WebRTCを知ろう
faithandbrave
6
2.3k
少人数でも回る! DevinとPlaybookで支える運用改善
ishikawa_pro
1
240
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
230
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
21
5.8k
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.5k
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
220
MCPと認可まわりの話 / mcp_and_authorization
convto
1
140
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
140
MCPに潜むセキュリティリスクを考えてみる
milix_m
1
720
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Side Projects
sachag
455
43k
Rails Girls Zürich Keynote
gr2m
95
14k
Statistics for Hackers
jakevdp
799
220k
How to train your dragon (web standard)
notwaldorf
96
6.1k
How to Ace a Technical Interview
jacobian
278
23k
How STYLIGHT went responsive
nonsquared
100
5.6k
Typedesign – Prime Four
hannesfritz
42
2.7k
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ɹ