[Online] potatotips #74 iOS/Android開発Tips共有会 https://potatotips.connpass.com/event/214754/
AndroidΞϓϦͰLine HeightΛ ઃఆ͢Δͱ͖ʹҙ͍ͨ͜͠ͱגࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ϩΫωϜ @_rockname
View Slide
mixi, Inc.ࣗݾհϩΫωϜ / rockname• ϛΫγΟͰʮՈΞϧόϜΈͯͶʯͱ͍͏ΞϓϦΛ ։ൃͯ͠Δ• iOSϝΠϯɺAndroid, RailsͳͲॻ͍ͯΔ• εϚϒϥ͕͖
mixi, Inc.લճͷpotatotips #73Ͱͷൃදhttps://speakerdeck.com/rockname/things-to-keep-in-mind-when-setting-line-height-in-your-ios-app
mixi, Inc.AndroidΞϓϦͰςΩετʹLine HeightΛઃఆ͍ͨ͠• Line HeghitʹԿઃఆ͠ͳ͔ͬͨ߹ ӈਤͷΑ͏ʹځ۶ͳҹΛ༩͑ͯ͠·͏• ߦؒʹదͳεϖʔεΛ࣋ͨͤͯίϯςϯπΛ ಡΈ͘͢ද͍ࣔͨ͠
mixi, Inc.Line HeightͷఆٛLine Height(Leading) = ֤ߦͷBaselineؒͷେ͖͞https://material.io/design/typography/understanding-typography.html#type-properties
mixi, Inc.android:lineSpacingExtra• TextViewͰߦؒΛࢦఆ͍ͨ͠߹ɺ android:lineSpacingExtraͱ͍͏attributeΛઃఆ͢ΔͱΑ͍
mixi, Inc.
mixi, Inc.Line HeightΛઃఆ• textSize: 30sp ʹରͯ͠ lineSpacingExtra: 6sp Λઃఆ (Line Height͕36ʹͳΔ͜ͱΛظ)
mixi, Inc.దͳ͕ઃఆ͞Ε͍ͯΔ͔Λ֬ೝ• ظͷ36pxʹରͯ͠4pxେ͖͍Line Height• ఆҎ্ͷεϖʔε͕ઃఆ͞Εͯ͠·͍ͬͯͨ
mixi, Inc.lineSpacingExtraʹԿઃఆ͠ͳ͔ͬͨ߹• 30spͷtextSizeʹରͯ͠ɺͦͦσϑΥϧτͰLine Height͕34pxͱͳ͍ͬͯͨ• ͭ·Γɺ4px͕σϑΥϧτͷlineSpacingExtraͱͯ͠ઃఆ͞Ε͍ͯͨ• ͳͷͰɺ android:lineSpacingExtra=“2sp” ͱઃఆ͢Δͱظ௨Γ36pxͷLine Heightͱͳͬͨ
mixi, Inc.lineSpacingExtraͯ͢-4spͯ͠ઃఆ͢Εྑ͍ͷ͔ʁ• textSizeʹΑͬͯ͜ͷσϑΥϧτͷlineSpacingExtraมΘͬͯ͠·͏ͷͰɺͯ͢Ұʹ-4sp͢Εྑ͍ͱ͍͏Ͱͳ͍• ઃఆ͢ΔtextSize͝ͱʹσϑΥϧτͷlineSpacingExtraΛௐࠪͯ͠ઃఆ͢Δඞཁ͕͋Δ
mixi, Inc.దͳLine HeightͱͳΔΑ͏ʹௐ͍ࠪͯ͠Δࣄྫhttps://bignerdranch.com/blog/perfecting-custom-typography-in-android/
Γͨ͘ͳ͍…😇
mixi, Inc.android:lineHeight• Line HeightΛઃఆͰ͖Δattribute͕api level 28ͰՃ͞Εͨ• ෦ͰlineSpacingExtraΛ༻࣮͕ͨ͠ࢪ͞Ε͍ͯΔΒ͍͠
mixi, Inc.android:lineHeightΛͬͯΈΔ• ఆ௨Γ36ptͷLine HeightΛઃఆͰ͖͍ͯͨ 👏
mixi, Inc.ͨͩ͠ɺຊޠͩͱ…• ಉ͘͡textSize: 30sp, lineHeight: 36spͰຊޠΛ දࣔͯ͠ΈΔ• ͢Δͱɺظͷ36ΑΓ6େ͖͍42pxͱͳͬͯ͠·ͬͨ
mixi, Inc.ԤจͱจϑΥϯτͷҧ͍ʹ͍ͭͯ• Ԥจͩͱ༷ʑͳύϥϝʔλ͕ଘࡏ͍ͯͯ͠ɺখจࣈେจࣈʹΑͬͯҰߦ͋ͨΓʹΊΔจࣈͷີେ͖͘มΘΔ• ରͯ͠จʹͦΜͳͷͳ͘ɺࡶʹશ෦ͷจࣈ͕ΞϧϑΝϕοτେจࣈͱಉ͘͡Β͍ͷେ͖͞ͱͳ͍ͬͯΔhttps://hayataki-masaharu.jp/web-typography-in-japanese/#.YFND_7T7Rlc
mixi, Inc.ԤจͱจϑΥϯτͷҧ͍ʹ͍ͭͯ• Ԥจͱൺֱͯ͠ځ۶ʹݟ͕͑ͪͳจͷ߹ʹɺߦؒΊʹऔΔ͜ͱ͕ϕετϓϥΫςΟεͱͯ͠ޠΒΕ͍ͯΔ• AndroidͰຊޠͷLine Height͕ظΑΓେ͖͘ઃఆ͞Ε͍ͯΔͷɺ͜ͷ͜ͱΛྀͯ͘͠Ε͍ͯΔͱਪଌͰ͖Δhttps://blog.xoxzo.com/en/2018/12/19/japanese-typography-for-web-design/
mixi, Inc.ҰํɺiOSͰ• iOSଆগͳ͘ͱSystem FontͩͱݴޠʹΑΔLine Heightͷࠩͳ͔ͬͨ• ͨͩ͠ɺΘΓʹຊޠͷϑΥϯταΠζউखʹ1pt΄Ͳ(αΠζʹΑΔ)খ͘͞දࣔ͞ΕΔΑ͏ʹͳ͍ͬͯΔ• ͜Εɺจͩͱځ۶ʹݟ͑ͯ͠·͏͜ͱʹର͢ΔOSଆͷྀͩͱਪͰ͖Δhttps://qiita.com/moccow/items/4d0870e81db909a7aabd
mixi, Inc.Ԥจ/จʹΑͬͯҟͳΔ༷ʹର͢ΔΈͯͶͰͷରԠ• ΈͯͶͰσβΠϯπʔϧʹFigmaΛ࠾༻͍ͯͯ͠σβΠϯγεςϜͷҰ෦ͱͯ͠TypographyΛఆٛͯ͠ཧ͍ͯ͠Δ• ͦ͜ͰRobotoNoto Sans CJKͷΑ͏ͳϑΥϯτ͝ͱʹίϯϙʔωϯτΛఆ͍ٛͯ͠Δ• AndroidͷLine Height͕Ԥจ/จͰҟͳΔ݅ʹ͍ͭͯɺ֤Typographyʹ͓͚ΔຊޠͷσϑΥϧτͷLine HeightΛௐࠪͯ͠FigmaͷରԠίϯϙʔωϯτʹөͯ͠Β͍ͬͯΔ• iOSͷϑΥϯταΠζ͕Ԥจ/จͰҟͳΔ݅ʹ͍ͭͯɺ֤Typographyʹ͓͚ΔຊޠͷϑΥϯταΠζΛௐࠪͯ͠FigmaͷରԠίϯϙʔωϯτʹөͯ͠Β͍ͬͯΔ
mixi, Inc.·ͱΊ• android:lineSpacingExtra ҙਤͨ͠ݟͨʹͳΒͳ͍ͨΊΘͳ͍ํ͕ྑ͍• api level 28Ͱ͋Δ͕ΘΓʹ android:lineHeight Λ༻ͨ͠ํ͕ྑ͍• ຊޠͩͱઃఆͨ͠Line HeightΑΓେ͖Ίʹߦ͕ؒඳը͞ΕΔͨΊɺ ͦͷ༷ΛσβΠφʹڞ༗͓͚ͯ͠Δͱྑ͍
Thank you!!!