文字拡大されても怖くない レイアウト作りのコツ

Shibuya.apk #43
https://shibuya-apk.connpass.com/event/288211/

Transcript

1. Shibuya.apk#43ɹ2023.7.14ɹTiphaineɹ จࣈ֦େ͞Εͯ΋ා͘ͳ͍ ϨΠΞ΢τ࡞Γͷίπ
2. ࣗݾ঺հ ✤ Tiphaine(ςΟϑΣϯ) ✤ AndroidΤϯδχΞ ✤ϝυϐΞגࣜձࣾ
3. จࣈ֦େʁ ✤ Ϣʔβʔิॿػೳ ✤ ϑΥϯτͱදࣔ྆ํͱ΋ ✤ ୺຤ʹΑͬͯσϑΥϧτͷ ઃఆͰ͋Δ͔΋
4. ·͊ɺSPΛ࢖͑͹ ͳΜͱ͔ͳΔͰ͠ΐ͏ …ͦͷ͸ͣͩͬͨ
5. STORY TIME
6. ʮܾఆϘλϯ͕ग़ͯͳ͍ Ͱ͚͢Ͳʔʯ
9. จࣈ֦େΛ͢Δͱ Ϙλϯ͕ݟ͑ͳ͍
10. ͔͠΋ ͜ͷը໘͚ͩ͡Όͳ͍
11. 😇
12. ࠶ൃ๷ࢭରࡦͷͨΊʹ ࢀߟ͕ཉ͍͠
13. “ WCAG ୡ੒ج४1.4.4ɹςΩετͷαΠζมߋ (…)ςΩετ͸ɺ ίϯςϯπຢ͸ػೳΛଛͳ͏͜ͱͳ͘ɺ ࢧԉٕज़ͳ͠Ͱ200%·ͰαΠζมߋͰ͖Δɻ
14. ➤ શͯͷςΩετΛ֦େͰ͖Δ ➤ શͯͷςΩετ͕ಡΊΔ ➤ શͯͷػೳ͕࢖͑Δ ໨ඪ
15. ͍ͭ΋ಉ͡໰୊ʹͳΔ ࡞Δ࣌ʹରࡦͰ͖Δ
16. ؾΛ͚ͭΔ΂͖ϙΠϯτ 1⃣ εΫϩʔϧ 2⃣ Margin/Padding 3⃣ লུͱվߦ
17. 1⃣ εΫϩʔϧ ✤ ΧελϜϨΠΞ΢τɺ·ͨ͸ComposeΛ࢖͏ͳΒɺ શମεΫϩʔϧग़དྷΔΑ͏ʹ͠Α͏ AμΠΞϩάʹ͍ͭͯ εΫϩʔϧͰ͖ͳ͍ ➡︎
18. 1⃣ εΫϩʔϧ ✤ AlertDialog͸௕͍ςΩετΛsetTitleͰઃఆ͠ͳ͍ AμΠΞϩάʹ͍ͭͯ AlertDialog.Builder(this) .setTitle(“λΠτϧʹඇৗʹ…”) .setPositiveButton("ܾఆ", /*…*/) .setNegativeButton("Ωϟϯηϧ", /*…*/) .show() ̎ߦͰলུ͞Εͯ͠·͏ ➡︎
19. AlertDialog.Builder(this) .setTitle(“λΠτϧʹඇৗʹ…”) .setPositiveButton("ܾఆ", /*…*/) .setNegativeButton("Ωϟϯηϧ", /*…*/) .show() AlertDialog.Builder(this) .setTitle(“λΠτϧʹඇৗʹ…”) .setMessage(“λΠτϧʹඇৗʹ…”) .setPositiveButton("ܾఆ", /*…*/) .setNegativeButton("Ωϟϯηϧ", /*…*/) .show() 1⃣ εΫϩʔϧ ➡ setMessageΛ࢖͓͏ AμΠΞϩάʹ͍ͭͯ
20. ✤ ϢʔβʔͷखؒΛݮΒͨ͢Ίɺॏࢹ͍ͨ͠෦෼͚ͩΛ εΫϩʔϧൣғ͔Β֎ͦ͏ 1⃣ εΫϩʔϧ A෦෼తʹݻఆ͢Δ
21. A෦෼తʹݻఆ͢Δ 1⃣ εΫϩʔϧ ݻఆ෦෼ εΫϩʔϧ Մೳ෦෼
22. ✤ εΫϩʔϧͰ͖ΔࣄΛ໌֬ʹ͍͔ͨ͠Βɺ Πϯδέʔλʔ͸ফ͑ͳ͍Α͏ʹ͢Δ ✤ Compose͸·ͩͰ͖ͳ͍😣 1⃣ εΫϩʔϧ AΠϯδέʔλʔΛදࣔ͢Δ android:fadeScrollbars="false" android:scrollbarAlwaysDrawVerticalTrack="true" android:scrollbarSize="4dp" android:scrollbarThumbVertical=“@color/…” android:scrollbars="vertical"
23. 1⃣ εΫϩʔϧ AΠϯδέʔλʔΛදࣔ͢Δ
24. 2⃣ MARGIN / PADDING ✤ ࠨӈͷmarginΛ๨Εͳ͍
25. 2⃣ MARGIN / PADDING ✤ ࠨӈ/্Լpadding΋๨Εͳ͍ʢಛʹΧελϜϏϡʔʣ
26. ✤ padding͕ޮ͘Α͏ʹɺඞͣ minHeight/minWidthΛ࢖͓͏ 3⃣ লུͱվߦ AαΠζΛݻఆ͠ͳ͍ Modifier.defaultMinSize(minHeight = …) android:layout_height="wrap_content" android:minHeight=“@dimen/…”
27. ✤ λοϓͯ͠ଓ͖͕ಡΊΔจষܥͳΒ🆗 ✤ ΞΫγϣϯΛى͜͢Ϙλϯܥ͸🆖 ❌ ✅ ✅ ✅ ELLIPSISͷ࢖͍ํ 3⃣ লུͱվߦ
28. ✤ Horizontal LinearLayoutɺ·ͨ͸ComposeͷRow͸ ෯ͷweightͳͲΛࢦఆ͠Α͏ ROWܥ͸ཁ஫ҙ ӈͷཁૉ͕֎΁ԡ͞Εͯ͠·͏ ⬆︎ 3⃣ লུͱվߦ
29. ✤ ςΩετೖྗܥ͸ग़དྷΔ͚ͩϚϧνϥΠϯՄೳʹ͢Δ ✦ ʢจࣈ਺੍ݶͷӨڹͰແཧ͔΋😥ʣ ✦ ʢώϯτͷ௕͞ʹ߹Θͤͯվߦ͞Εͳ͍͔΋😭ʣ 3⃣ লུͱվߦ AςΩετೖྗʹ͍ͭͯ
30. ⚠ ANDROID STUDIOͷϓϨϏϡʔ ✤ ࣮ػͱൺ΂ͯ෯͕޿͗͢Δ
31. ݕূ୺຤ʹ͋Ε͹ແఢɿ Β͘Β͘εϚʔτϑΥϯ
32. ·ͱΊ ✤ ϑϨʔϜϫʔΫΛ৴༻͗͢͠ͳ͍ ✤ ͻͨ͢ΒεΫϩʔϧΛೖΕΔ ✤ εΫϩʔϧͰ͖Δ͜ͱΛ໌֬ʹ͢Δ ✤ EllipsisΛਖ਼͘͠࢖͏ ✤ Ͱ͖Δ͚ͩϚϧνϥΠϯՄೳʹ͢Δ
33. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ @tahia910ɹ