Upgrade to Pro — share decks privately, control downloads, hide ads and more …

今更「dp」を考える / Let's think about "dp" now

今更「dp」を考える / Let's think about "dp" now

2020年も12月になってAndroidのデザイン要素である「dp」について考えたお話です。社内用のものから修正が加わっています。

0f50b010cc99988fba8a73008b21f353?s=128

Yoshihiro WADA

December 14, 2020
Tweet

Transcript

  1. ࠓߋʮEQʯΛߟ͑Δ FEPLVQ

  2. :PTIJIJSP8BEBͲ͘ͽʔ !FEPLVQ $ZCFS"HFOU*OD"NFCB $BNFSB.PUPSTQPSU1IPUPHSBQIZ

  3. ࠓ೔࿩͢͜ͱ 3 EQ "OESPJEΞϓϦͷσβΠϯͰ͸͔ܽͤͳ͍୯Ґ

  4. w J04ΞϓϦʢJ1BE04͸ͪΐͬͱແࢹʣͷը໘σβΠϯΛߟ͑Δ w ը໘ͷԣ෯͸ʁ w ֤σόΠεʹ༩͑ΒΕΔʮ$44ϐΫηϧʯ͕ج४ʹͳΔ w ී௨ͷ୺຤QYJ1IPOF1SPɺJ1IPOF4&ʢOEHFOʣͱ͔ w େ͖͍୺຤QYJ1IPOF1SP.BYɺJ1IPOFͱ͔

    w খ͍͞୺຤QYJ1IPOF4&ʢTUHFOʣ w ը໘ͷॎ෯͸ʁ w ͪ͜Β΋$44ϐΫηϧ͕ج४ɻ୺຤ʹΑͬͯͩͬͨΓͩͬͨΓ Ұ୴ࢀߟఔ౓ʹJ04J1IPOFͷ࿩Λ͠Α͏ 4
  5. w J04ΞϓϦʢJ1BE04͸ͪΐͬͱແࢹʣͷը໘σβΠϯΛߟ͑Δ w ը໘ͷԣ෯͸ʁ w ֤σόΠεʹ༩͑ΒΕΔʮ$44ϐΫηϧʯ͕ج४ʹͳΔ w ී௨ͷ୺຤QYJ1IPOF1SPɺJ1IPOF4&ʢOEHFOʣͱ͔ w େ͖͍୺຤QYJ1IPOF1SP.BYɺJ1IPOFͱ͔

    w খ͍͞୺຤QYJ1IPOF4&ʢTUHFOʣ w ը໘ͷॎ෯͸ʁ w ͪ͜Β΋$44ϐΫηϧ͕ج४ɻ୺຤ʹΑͬͯͩͬͨΓͩͬͨΓ Ұ୴ࢀߟఔ౓ʹJ04J1IPOFͷ࿩Λ͠Α͏ 5 ʢ৔߹ʹΑͬͯ͸ʣ ԣ෯ʹ߹Θͤͨ௨Γͷ σβΠϯΛ͍ͯ͠Δɻ Χϧʔηϧͱ͔ɻ
  6. "OESPJEΞϓϦσβΠϯʹ͓͚Δ ʮը໘ͷখ͍͞୺຤ʯͱ͸ʜʁ

  7. ʮ෺ཧతʹʯখ͍͞σόΠε 7 3BLVUFO.JOJ ʢ໿Πϯνʣ 1BMN1IPOF ʢΠϯνʣ 6OJIFSU["UPN ʢΠϯνʣ

  8. ʮ෺ཧతʹʯখ͍͞σόΠε 8 3BLVUFO.JOJ ʢ໿Πϯνʣ 1BMN1IPOF ʢΠϯνʣ 6OJIFSU["UPN ʢΠϯνʣ YQY YQY

    YQY
  9. ʮ෺ཧతʹʯখ͍͞σόΠε 9 3BLVUFO.JOJ ʢ໿Πϯνʣ 1BMN1IPOF ʢΠϯνʣ 6OJIFSU["UPN ʢΠϯνʣ ը໘αΠζ͕ҰॹͰ΋ղ૾౓͕ҧͬͨΓɺ ղ૾౓͕ಉ͡Ͱ΋ը໘αΠζ͕ҧͬͨΓ͢Δ

    YQY YQY YQY
  10. ʮ෺ཧతʹʯখ͍͞σόΠε 10 3BLVUFO.JOJ ʢ໿Πϯνʣ 1BMN1IPOF ʢΠϯνʣ 6OJIFSU["UPN ʢΠϯνʣ ଟछଟ༷͗ͯ͢ Կ΋Θ͔ΒΜ

    YQY YQY YQY
  11. ͜ΕΛͳΜͱ͔͠Α͏ͱͨ͠ͷ͕ EQ

  12. w EQɿEFOTJUZJOEFQFOEFOUQJYFMT w ີ౓ඇґଘϐΫηϧɻEJQͬͯݺ͹ΕΔ͜ͱ΋ɻ w "OESPJEΞϓϦ͸ʮEQʯͷ͓͔͛Ͱ֤୺຤ؒͰ͋Δఔ౓͸͍ΖΜͳը໘ αΠζɾղ૾౓ͷ୺຤ΛαϙʔτͰ͖Δ EQͱ͸ͳΜͧ΍ 12

  13. EQͰϨΠΞ΢τΛࢦఆͨ͠ͱ͖ 13 YQY YQY ʢ΄΅ʣಉ͡େ͖͞

  14. EQͰϨΠΞ΢τΛࢦఆ͠ͳ͔ͬͨͱ͖ 14 YQY YQY େ͖͕͞มΘΔ

  15. w QYʢQJYFMɿϐΫηϧʣ w ը໘ͷղ૾౓ͦͷ΋ͷɻ୺຤ͷεϖοΫදͰΑ͘ݟΔ஋ɻ w ΋ͪΖΜ୺຤ʹΑ༷ͬͯʑͳ஋͕͋Δ w )%ʢYQYʣɺ'VMM)%ʢYQYʣɺ ,ʢYQYʣʜ w

    "OESPJEͷը໘σβΠϯͰ͜ͷQYΛ࢖͏έʔε͸΄΅ग़ͯ͜ͳ͍ w ΞΠίϯͷղ૾౓ͱ͔Ͱ͸࢖͏ EQʹ·ͭΘΔ୯Ґʢʣ 15
  16. w EQJʢEPUTQFSJODIɿը໘ີ౓ʣ w ը໘ͷΠϯνʹҰମԿυοτؚ·Ε͍ͯΔ͔Λࣔ͢ w ը໘ղ૾౓ͷQYͱը໘αΠζ͔Βࢉग़͞ΕΔ w 2ɿΠϯνͷεϚʔτϑΥϯͱΠϯνͷλϒϨοτͰಉ͡ϑϧ)%ɻ Ͱ͸ͲͪΒ͕EQJ͕େ͖͍ʁ EQʹ·ͭΘΔ୯Ґʢʣ

    16
  17. w EQJʢEPUTQFSJODIɿը໘ີ౓ʣ w ը໘ͷΠϯνʹҰମԿυοτؚ·Ε͍ͯΔ͔Λࣔ͢ w ը໘ղ૾౓ͷQYͱը໘αΠζ͔Βࢉग़͞ΕΔ w 2ɿΠϯνͷεϚʔτϑΥϯͱΠϯνͷλϒϨοτͰಉ͡ϑϧ)%ɻ Ͱ͸ͲͪΒ͕EQJ͕େ͖͍ʁ w

    "ɿεϚʔτϑΥϯͷ΄͏͕େ͖͍ EQʹ·ͭΘΔ୯Ґʢʣ 17
  18. w EQJʢEPUTQFSJODIɿը໘ີ౓ʣ w ը໘ͷΠϯνʹҰମԿυοτؚ·Ε͍ͯΔ͔Λࣔ͢ w ը໘ղ૾౓ͷQYͱը໘αΠζ͔Βࢉग़͞ΕΔ w 2ɿΠϯνͷεϚʔτϑΥϯͱΠϯνͷλϒϨοτͰಉ͡ϑϧ)%ɻ Ͱ͸ͲͪΒ͕EQJ͕େ͖͍ʁ w

    "ɿεϚʔτϑΥϯͷ΄͏͕େ͖͍ EQʹ·ͭΘΔ୯Ґʢʣ 18 ը໘ղ૾౓͕୺຤ͰҟͳΕ͹ɺ౰વEQJ΋୺຤ͰҟͳΔ
  19. w "OESPJEͰ͸൚༻ີ౓ͱݴ͍ɺEQJΛൣғͰ۠੾ͬͯΫϥε෼͚͍ͯ͠Δ EQʹ·ͭΘΔ୯Ґʢʣ 19 ൚༻ີ౓ %1*ͷൣғ ղ૾౓ͷഒ཰ NEQJ dEQJ Y

    IEQJ dEQJ Y YIEQJ dEQJ Y YYIEQJ dEQJ Y YYYIEQJ dEQJ Y
  20. w ֤EQJͦΕͧΕͰEQഒ཰͕ҧ͏ͷͰɺͦΕͧΕʹ߹Θͤͨը૾Λ༻ҙ͠ ͳ͍ͱδϟΪʔͳը૾ʹͳͬͨΓ͢Δ w ͳͷͰ൚༻ີ౓͝ͱʹద੾ͳղ૾౓ͷը૾Λ༻ҙ͠ɺΧόʔ͢Δ͜ͱ ͕ਪ঑͞Ε͍ͯΔ w EQͰग़͍ͨ͠ͳΒQYΈ͍ͨͳ w J04Ͱݴ͏ͱ͜Ζͷ!Y!YͷྲྀΕ

    w ࠷ۙ͸7FDUPS%SBXBCMFͰTWH͔Βੜ੒ͨ͠ը૾͕࢖͑ΔΑ͏ʹͳͬͨͷ ͰൺֱతEQJຖʹϦιʔεΛ࡞Δػձ͸ݮͬͨ ༨ஊɿը૾ϦιʔεͷαΠζ 20
  21. w EQɿEFOTJUZJOEFQFOEFOUQJYFMT w ີ౓ඇґଘϐΫηϧɻEJQͬͯݺ͹ΕΔ͜ͱ΋ɻ w Ͳͷը໘ີ౓Ͱ΋ಉ͡Α͏ʹදࣔͰ͖ΔϐΫηϧ୯Ґͱ͍͏͜ͱɻ w EQ஋ΛEQJʹԠͯ͡ܭࢉ͢Δ͜ͱͰɺ࣮ࡍʹදࣔ͞ΕΔQYʹม׵͢Δ͜ ͱ͕Ͱ͖Δɻ w

    QYEQY EQJ  w ݫີʹ͸ઌड़ͷ൚༻ີ౓ͷഒ཰ʹ͸ͳΒͳ͍ͷͰɺʮYYYIEQJͷ୺຤ͩ ͔ΒEQ͸ඞͣQYʂʯͱ͍͏࿩Ͱ͸ͳ͍ EQʹ·ͭΘΔ୯Ґʢʣ 21
  22. w ҰԠಉ͡ʮEQʯΛ֤EQJͷը໘ͰQYʹม׵ͯ͠ΈΔͱʜ EQʹ·ͭΘΔ୯Ґʢʣ 22 ൚༻ີ౓ ࢦఆͨ͠EQ ղ૾౓ͷഒ཰ ࣮ࡍͷQY NEQJ EQ

    Y QY IEQJ EQ Y QY YIEQJ EQ Y QY YYIEQJ EQ Y QY YYYIEQJ EQ Y QY
  23. w TQɿTDBMFJOEFQFOEFOUQJYFMT w εέʔϧඇґଘϐΫηϧɻTJQͱ͸ॻ͔ͳ͍ؾ͕͢Δɻ w ୯७ͳڍಈ͸EQͱ΄΅ಉҰͰɺ൚༻ີ౓ຖʹQYม׵࣌ʹഒ཰͕͔͔Δ w TQͷಛ௃͸ʮϢʔβͷϑΥϯταΠζઃఆʹ४ͯ͡ഒ཰͕͔͔Δʯ͜ͱ w ΞΫηγϏϦςΟ؍఺Ͱେࣄͳ஋

    w Ϣʔβ࣍ୈͰେ͖͘ͳΔͷͰɺ͜Ε͕ݪҼͰϨΠΞ΢τ่յ͢Δ͜ͱ ΋͋Δɻ֬ೝ͢Δͷ͕େࣄ EQʹ·ͭΘΔ୯Ґʢʣ 23
  24. EQͱ͍͏୯Ґʹ͍ͭͯ ཧղͰ͖͔ͨͳʁ

  25. ͔͜͜Β͸"OESPJEΞϓϦͷ ը໘σβΠϯʹؔ͢Δ͓࿩

  26. w "OESPJEͷը໘୯Ґ͸ʮEQʯͰѻ͏ͷͰɺʮখ͍͞ը໘ʯ͸ʮEQͷαΠ ζ͕খ͍͞ը໘ʯͱ͍͏͜ͱʹͳΔ w ඪ४తͳʢͱݴΘΕ͍ͯΔʣEQͷαΠζ͸YEQ ݁ہɺʮখ͍͞ը໘ʯͬͯͳΜͳͷ͔ 26

  27. w "OESPJEͷը໘୯Ґ͸ʮEQʯͰѻ͏ͷͰɺʮখ͍͞ը໘ʯ͸ʮEQͷαΠ ζ͕খ͍͞ը໘ʯͱ͍͏͜ͱʹͳΔ w ඪ४తͳʢͱݴΘΕ͍ͯΔʣEQͷαΠζ͸YEQ w 2ɿը໘αΠζ͕খ͚͞Ε͹EQαΠζ͕খ͍͞ͷͰ͸ʁ ˠEQJͷ֓೦͕͋ΔҎ্ɺҰ֓ʹͦ͏ͱ͸ݴ͑ͳ͍ ݁ہɺʮখ͍͞ը໘ʯͬͯͳΜͳͷ͔ 27

  28. w ղ૾౓YQYɺը໘αΠζΠϯν w EQJ͸ͳͷͰYYIEQJEQഒ཰͸ഒ w ͭ·Γը໘αΠζ͸ w  Y 

    YEQ w Ұੲͷ"OESPJEσόΠε͸ඪ४తͳYEQʹ ଗ͍ͬͯΔ͜ͱ͕ଟ͍ 91&3*"9;ͷ৔߹ 28 91&3*"9; ʢΠϯνʣ YQY
  29. w ղ૾౓YQYɺը໘αΠζ໿Πϯν w EQJ͸ͳͷͰYIEQJEQഒ཰͸ഒ w ͭ·Γը໘αΠζ͸ w  Y 

    YEQ w 3BLVUFO.JOJ͸ը໘αΠζ͕খ͍͞ͱ͸͍͑ɺ "OESPJEͷը໘σβΠϯʹԙ͍ͯ͸ඪ४తͳେ͖͞Ͱ͋Δ 3BLVUFO.JOJͷ৔߹ 29 3BLVUFO.JOJ ʢ໿Πϯνʣ YQY
  30. ݟͨ໨খ͍͞୺຤Ͱ΋ Ҋ֎දࣔྖҬ͸ඪ४త

  31. w ղ૾౓YQYɺը໘αΠζΠϯν w EQJ͸ͳͷͰYYIEQJʜͱͳΔ͸͕ͣͩ%&/4*5:@ͱ͍͏ಾఆٛ w EQഒ཰͸ͳ͔ͥഒ w ͭ·Γը໘αΠζ͸ w 

    Y  ˺YEQ /FYVT9ͷ৔߹ 31 /FYVT9 ʢΠϯνʣ YQY
  32. w ղ૾౓YQYɺը໘αΠζΠϯν w EQJ͸ͳͷͰYYIEQJ w EQഒ཰͸ͳ͔ͥഒ w ͭ·Γը໘αΠζ͸ w 

    Y  ˺YEQ 1JYFMͷ৔߹ 32 1JYFM ʢΠϯνʣ YQY
  33. w ղ૾౓YQYɺը໘αΠζΠϯν w EQJ͸ͳͷͰYYYIEQJ w EQഒ཰͸ͳ͔ͥഒ w ͭ·Γը໘αΠζ͸ w 

    Y  ˺YEQ 1JYFMͷ৔߹ 33 1JYFM9- ʢΠϯνʣ YQY
  34. ͳΜ͔ฉ͍͍ͯͨ࿩ ͱҧ͏͡Όͳ͍͔

  35. w ը໘ྖҬ͕YEQΑΓ෯޿ͳ୺຤͕ଟ͘ͳ͖ͬͯͨ w YYYIEQJͳΒɺYYIEQJͳΒͷ༷ͳܾ·ͬͨ஋Ͱ͸ͳ͍ w ܾΊଧͪͰͳ͘QYEQY EQJ Ͱܭࢉ͢ΔΑ͏ʹͳ͍ͬͯΔ w getResources().getDisplayMetrics().densityͰ֬ೝՄೳ

    w খ͍͞୺຤͸Ҋ֎YEQͰΩʔϓͯ͘͠Ε͍ͯΔ w Ҏલͷ୺຤ϨϕϧͩͱYEQʹͳ͍ͬͯΔ୺຤͸ଘࡏͨ͠ ͜͜·Ͱͷ·ͱΊ 35
  36. w "OESPJEҎ߱ɺϢʔβิॿͷઃఆ͔Β ը໘αΠζΛ؆୯ʹมߋͰ͖ΔΑ͏ʹͳͬͨ w ಛେͩͱԣ෯EQ·Ͱ֦େͰ͖Δ w ͜ΕΛؑΈͯɺը໘ઃܭ͸࠷খEQ͕͋Γ͑Δ ͜ͱ͸ߟྀͨ͠΄͏͕ྑ͍ w ΞΫηγϏϦςΟͷ؍఺΋ؚΉ

    Ͳ͜·Ͱͷԣ෯ΛϚωʔδ͢΂͖͔ʁ 36 ͓ͦΒ͘͜Ε͕"OESPJEʹ͓͚Δ ʮখ͍͞ը໘ʯͷճ౴ͱͳΔ
  37. w ٯʹදࣔΛখ͘͢͞Δ͜ͱ΋Ͱ͖Δ w 1JYFMͩͱԣ෯EQ·ͰॖখͰ͖Δ w ը໘Λॖখͨ͠ࡍͷίϯςϯπදࣔ͸֬ೝ͢΂͖ w ίϯςϯπ͕͔͔͢͢ʹͳΔ w Χϧʔηϧ౳ͷݟ͑ํʹҧ࿨ײ͕ग़Δ

    w FUD Ͳ͜·Ͱͷԣ෯ΛϚωʔδ͢΂͖͔ʁ 37
  38. ΤϯδχΞ޲͚ͷ࿩

  39. w -BZPVU7BMJEBUPSΛ͔ͭ͏ʢ"OESPJE4UVEJPʙʣ w બ୒ͨ͠σόΠε܈ΛҰཡͰฒ΂ͯൺֱͰ͖Δ "OESPJE4UVEJP্Ͱෳ਺ͷσόΠεͰͷදࣔΛ֬ೝ͢Δ 39

  40. w $ adb shell dumpsys display w ୺຤ͷը໘৘ใʢղ૾౓ɺը໘ີ౓ଞʣΛऔಘ͢Δ w $

    adb shell wm size 1080x1920 w ୺຤ͷը໘ղ૾౓Λڧ੍తʹઃఆ͢Δɻ͜͜Ͱ͸YQYʹͳΔ w $ adb shell wm density 360 w ୺຤ͷը໘ີ౓Λڧ੍తʹઃఆ͢Δɻ͜͜Ͱ͸EQJʹͳΔ w $ adb shell wm {size|density} reset w ୺຤ͷը໘ઃఆΛॳظԽ͢Δɻ΋ͱʹ໭͍ͨ͠ͱ͖͸͜Εɻ BECίϚϯυΛ࢖͏ 40
  41. w EQͩͱը໘෯͕ݫ͗ͯ͢͠ϨΠΞ΢τΛม͑ͳ͍ͱߦ͚ͳ͍ʜʂ ͱ͍͏έʔε w ઃఆम০ࢠTXEQ౳Λ࢖ͬͯϨΠΞ΢τϑΝΠϧΛผ్ʹ༻ҙ͢Δ w Ϛʔδϯ౳Λม͑Δͱ͖͸EJNFOTʹ֤Ϛʔδϯͷ஋Λ੾Γग़ͯ͠ɺ WBMVFTଆΛ੾Γସ͑Δ w ϨΠΞ΢τશମ͕มߋ͞ΕΔͱ͖͸MBZPVUଆΛ੾Γସ͑Δ

    EQͷը໘͕Ͱ͖ͯͨ࣌ʹϨΠΞ΢τΛ෼͚Δ 41
  42. w EQ͸ଟछଟ༷ͳ"OESPJEσόΠεͰಉ༷ͷݟͨ໨Λ࣮ݱ͢ΔͨΊͷ୯Ґ w "OESPJEͷը໘αΠζ͸ෳࡶ w ಉ͡୺຤Ͱ΋ઃఆ࣍ୈͰEQEQΦʔόʔʹมԽͰ͖Δ w ઃఆແ͠Ͱ΋EQEQͷൣғͷ୺຤͸ଟ͍ͷͰΧόʔ͢΂͖ w ։ൃ؀ڥϨϕϧͰ΋֬ೝͰ͖ΔͷͰσβΠϯͰ΋ɺΤϯδχΞϦϯά

    Ͱ΋͔ͬ͠Γαϙʔτ͠·͠ΐ͏ ·ͱΊ 42
  43. w IUUQTRJJUBDPNOFJOJUFNTBBDDC w ʲ"OESPJEʳ͍·͞Βฉ͚ͳ͍EQೖ໳c2JJUB w IUUQTEFWFMPQFSBOESPJEDPNUSBJOJOHNVMUJTDSFFOTDSFFOEFOTJUJFT IMKB w ֤छͷϐΫηϧີ౓Λαϙʔτ͢Δc"OESPJE%FWFMPQFST w

    IUUQTEFWFMPQFSBOESPJEDPNBCPVUWFSTJPOTOPVHBUBOESPJEDIBOHFTIUNM IMKBTDSFFO[PPN w "OESPJEͷಈ࡞ͷมߋ఺ը໘ͷζʔϜc"OESPJE%FWFMPQFST w IUUQTEFWFMPQFSBOESPJEDPNHVJEFUPQJDTSFTPVSDFTQSPWJEJOHSFTPVSDFTIUNM IMKB"MUFSOBUJWF3FTPVSDFT w ΞϓϦϦιʔεͷ֓ཁ୅ସϦιʔεΛఏڙ͢Δc"OESPJE%FWFMPQFST 3FGFSFODFT 43