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
320
Lottieアニメーションをカスタマイズしてみた
tahia910
0
230
Customize your Lottie animations
tahia910
0
140
2024年のナビゲーション・フォーカス対応:Composeでキーボード・ナビゲーションをサポートしよう
tahia910
0
1k
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.4k
社内でできるアクセシビリティのはじめかた
tahia910
3
730
Raise accessibility awareness at work as an Android developer
tahia910
1
180
Other Decks in Technology
See All in Technology
💡Ruby 川辺で灯すPicoRubyからの光
bash0c7
0
110
S3アクセス制御の設計ポイント
tommy0124
3
200
Terraformで構築する セルフサービス型データプラットフォーム / terraform-self-service-data-platform
pei0804
1
170
Agile PBL at New Grads Trainings
kawaguti
PRO
1
430
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
260
サンドボックス技術でAI利活用を促進する
koh_naga
0
200
2025年になってもまだMySQLが好き
yoku0825
8
4.7k
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
120
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
160
[ JAWS-UG 東京 CommunityBuilders Night #2 ]SlackとAmazon Q Developerで 運用効率化を模索する
sh_fk2
3
410
研究開発と製品開発、両利きのロボティクス
youtalk
1
520
テストを軸にした生き残り術
kworkdev
PRO
0
200
Featured
See All Featured
Being A Developer After 40
akosma
90
590k
Statistics for Hackers
jakevdp
799
220k
A better future with KSS
kneath
239
17k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Agile that works and the tools we love
rasmusluckow
330
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Six Lessons from altMBA
skipperchong
28
4k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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ɹ