SFSymbolsの楽しみ方

Slide 1

Slide 1 text

SFSymbolsͷָ͠Έํ 2022/1/15 ϦϧΦοα

Slide 2

Slide 2 text

ࣗݾ঺հ Name: ϦϧΦοα note: littleossa Github: littleossa Twitter: @littleossa 2

Slide 3

Slide 3 text

SFSymbolsΛָ͠ΜͰ͍·͔͢ʁ

Slide 4

Slide 4 text

SFSymbolsͱ͸

Slide 5

Slide 5 text

SFSymbolsͱ͸ • Apple͕ఏڙ͍ͯ͠ΔγϯϘϧϑΥϯτ • SFSymbols3.2࣌఺Ͱ͸ɺ3309ݸͷγϯϘϧΛఏڙ͍ͯ͠·͢ • ͜ΕΒΛΤΫεϙʔτޙɺϕΫλʔάϥϑΟοΫฤूπʔϧͰฤू͠ ͯΧελϜγϯϘϧΛ࡞੒Ͱ͖Δ • SFͱ͸ɺAppleͷఏڙ͍ͯ͠ΔSan Franciscoͱ͍͏ϑΥϯτͷ͜ͱΛ ࢦ͍ͯ͠Δ

Slide 6

Slide 6 text

SFSymbolsͷԸܙ • Apple͕ެࣜͰ࢖༻͍ͯ͠Δߴ඼࣭ͷΞΠί ϯΛಉ͡Α͏ʹ࢖༻Ͱ͖Δ • ݸਓ։ൃऀ͕ΞΠίϯ࡞੒ʹϦιʔεΛׂ͔ ͳͯ͘ྑ͍ • ༷ʑͳ༻్޲͚ͷγϯϘϧ͕༻ҙ͞Ε͓ͯ Γɺ͔Ώ͍ͱ͜Ζʹख͕ಧ͘ ϝϞApp

Slide 7

Slide 7 text

ͲͷΑ͏ͳγϯϘϧ͕͋Δͷ͔

Slide 8

Slide 8 text

ͲͷΑ͏ͳγϯϘϧ͕͋Δͷ͔ ࣮ࡍʹΞϓϦͷΞΠίϯͱͯ͠࢖͑ͦ͏ͳ΋ͷ͔Β ʮ͜Μͳ΋ͷ·Ͱ͋ΔΜͩʂʯ ʮ͜ΕҰମ͍ͭ࢖͏Μͩʁʯ ͱ͍͏΋ͷ·Ͱ ຊ౰ʹόϥΤςΟ๛෋Ͱ SFSymbolsͷΧλϩάΛݟΔ͚ͩͰ΋ָ͍͠Ͱ͢

Slide 9

Slide 9 text

͜Μͳ΋ͷ·Ͱ͋ΔΜͩʂ

Slide 10

Slide 10 text

͜ΕҰମ͍ͭ࢖͏ΜͩϥϯΩϯάୈ3Ґ ※100%ݸਓతͳओ؍Ͱ͢ ҨӨ

Slide 11

Slide 11 text

͜ΕҰମ͍ͭ࢖͏ΜͩϥϯΩϯάୈ2Ґ ※100%ݸਓతͳओ؍Ͱ͢ ંΓ৞Έܞଳ

Slide 12

Slide 12 text

͜ΕҰମ͍ͭ࢖͏ΜͩϥϯΩϯάୈ1Ґ ※100%ݸਓతͳओ؍Ͱ͢ ೴Έͦ

Slide 13

Slide 13 text

SFSymbols͕ؾʹͳͬͨํ͸ ࠓ͙͢Πϯετʔϧʂ

Slide 14

Slide 14 text

SFSymbolsͷΠϯετʔϧ ํ๏ https://developer.apple.com/sf-symbols/ 1. ͜ͷαΠτʹΞΫηε 2. Լ෦ͷμ΢ϯϩʔυ͔Βμ΢ϯ ϩʔυͯ͠Πϯετʔϧ͢Δ͚ͩ

Slide 15

Slide 15 text

࣮ࡍʹ࢖͏

Slide 16

Slide 16 text

Imageͱͯ͠γϯϘϧΛ࢖͏ 1. StoryboardʹImageViewΛ௥Ճ 2. ImageͷϑΥʔϜʹԿ͔จࣈΛೖ ྗ 3. SystemͷImageͱͯ͠γϯϘϧ͕ දࣔ͞ΕΔ ※ OSʹґଘ͢Δ΋ͷ΋ଟ͘ɺ࢖༻ग़དྷͳ͍৔߹͸ܯࠂ͕ग़Δ

Slide 17

Slide 17 text

Imageͱͯ͠γϯϘϧΛ࢖͏ ίʔυ͔Β࢖༻͢Δ͜ͱ΋Ͱ͖·͢ɻ let image = UIImage(systemName:"person.crop.artframe") systemName͸SFSymbolsͷγϯϘϧͷ໊લͰɺӈΫϦοΫͰ໊લͷ ίϐʔΛબ୒͢Δ͜ͱ͕ग़དྷ·͢ɻ ※ ίʔυ͔Β࢖༻͢Δ৔߹͸ɺOSґଘʹΑΓ࢖༻ग़དྷͳ͍৔߹ͷܯࠂ͸ग़ͳ͍ͷͰ஫ҙ͕ඞཁͰ͢

Slide 18

Slide 18 text

scaleͱweight΋ઃఆͰ͖Δ let configuration = UIImage.SymbolConfiguration(pointSize: UIFont.systemFontSize, weight: .medium, scale: .large) let image = UIImage(systemName: "square.and.arrow.up", withConfiguration: configuration) Storyboard ίʔυ

Slide 19

Slide 19 text

iOS15͔Β࢖͑ΔSFSymbolsʹ ෳ਺ͷΧϥʔΛઃఆ͢Δํ๏

Slide 20

Slide 20 text

iOS15ະຬͰͷΧϥʔઃఆํ๏ let image = UIImage(systemName: "face.smiling.fill") imageView.image = image systemeͷImageΛ୅ೖ͢Δ͚ͩͰ͸ɺ σϑΥϧτΧϥʔͷ1৭͚ͩͰ૷০͞Ε͍ͯ·͢ ͋Δ͍͸ɺ imageView.tintColor = .tintColor

Slide 21

Slide 21 text

ύϨοτΧϥʔΛઃఆ͢Δ let image = UIImage(systemName: "face.smiling.fill") let configuration = UIImage.SymbolConfiguration(paletteColors: [.black, .systemYellow]) imageView.image = image imageView.preferredSymbolConfiguration = configuration iOS15͔Β࢖༻Ͱ͖Δ UIImage.SymbolCon fi guration.init(paletteColors:)Ͱ SymbolCon fi gurationΛੜ੒ͯ͠ઃఆ͢Δ͜ͱͰγϯϘϧͷΠϝʔδ ʹෳ਺ͷΧϥʔΛׂΓ౰ͯΔ͜ͱ͕ग़དྷ·͢

Slide 22

Slide 22 text

֊૚ΧϥʔΛઃఆ͢Δ iOS15͔Β࢖༻Ͱ͖Δ UIImage.SymbolCon fi guration.init(hierarchicalColor:) ͰSymbolCon fi gurationΛੜ੒ͯ͠ઃఆ͢Δ͜ͱͰࢦఆͨ͠جຊ৭ͷ ڧ౓ΛԼ͛ͨ৭ͷ஋Λଞͷ֊૚ͷϨΠϠʔͷׂΓ౰ͯ·͢ɻ let image = UIImage(systemName: "trash.slash") let configuration = UIImage.SymbolConfiguration(hierarchicalColor: .systemMint) imageView.preferredSymbolConfiguration = configuration imageView.image = image

Slide 23

Slide 23 text

ϚϧνΧϥʔΛઃఆ͢Δ iOS15͔Β࢖༻Ͱ͖Δ UIImage.SymbolCon fi guration.preferringMulticolorϝιουΛ࢖༻ ͢ΔͱɺγϯϘϧ͕ϚϧνΧϥʔόϦΞϯτΛ͍࣋ͬͯΔ৔߹͸ ͦͷΧϥʔׂ͕Γ౰ͯΒΕ·͢ let image = UIImage(systemName: "ladybug.fill") imageView.preferredSymbolConfiguration = UIImage.SymbolConfiguration.preferringMulticolor() imageView.tintColor = .brown imageView.image = image