iOS and Android SVG

Transcript

1. iOSͱAndroidͷSVGʹ͍ͭͯܰ͘࿩͢Αʔ

2. About me ৽ݟ ߊฏ גࣜձࣾϠϚοϓͱ͍͏ձࣾͰɺYAMAPͷAndroidΞϓϦͳͲΛ ࡞͍ͬͯΔΤϯδχΞͰ͢ɻ • Twi%er: @gupuru •

   GitHub: gupuru

3. ͪͳΈʹɺϠϚοϓ͸ɺͲΜͳاۀ͔ͱݴ͏ͱ…

4. ݘ͕ࣾ௕Ͱ͢ʂ

5. ͋ͱ͸ɺ͓·͚ͳͷͰɺద౰ʹฉ͍ͯ(*´ωʆ*)

6. ͓·͚ͷ಺༰ • SVGͬͯԿʁ • iOSͷSVG • AndroidͷSVGɹ

7. SVGͬͯԿʁ

8. None

9. ɹ͜ͷ΁Μͷ΍ͭ

10. SVGʢScalable Vector Graphicsʣ • ϕΫλʔσʔλ • XML

11. <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 18.0.0, SVG Export

    Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="20px" height="44px" viewBox="0 0 20 44" enable-background="new 0 0 20 44" xml:space="preserve"> <g id="FPO"> </g> <g id="Global_Nav_Small_Icons"> </g> <g id="Global_Nav_Small_1_"> </g> <g id="Bag"> </g> <g id="Global_Nav_Large_Icons"> <path id="Apple" fill="#FFFFFF" d="M18.1,24.227c-0.106,0.307-0.217,0.6-0.335,0.881c-0.288,0.664-0.628,1.275-1.022,1.836 c-0.536,0.766-0.976,1.296-1.315,1.59c-0.525,0.483-1.088,0.731-1.691,0.744c-0.433,0-0.954-0.123-1.562-0.372 c-0.609-0.249-1.169-0.372-1.681-0.372c-0.537,0-1.113,0.123-1.729,0.372c-0.617,0.249-1.114,0.38-1.494,0.392 c-0.578,0.025-1.154-0.229-1.729-0.764c-0.367-0.32-0.826-0.869-1.376-1.646c-0.59-0.83-1.075-1.793-1.455-2.891 C2.304,22.812,2.1,21.664,2.1,20.553c0-1.273,0.275-2.371,0.826-3.291c0.433-0.739,1.009-1.322,1.73-1.75 c0.721-0.428,1.5-0.646,2.339-0.66c0.459,0,1.061,0.142,1.809,0.421c0.746,0.28,1.225,0.422,1.435,0.422 c0.157,0,0.689-0.166,1.591-0.497c0.853-0.307,1.573-0.434,2.163-0.384c1.598,0.129,2.798,0.759,3.597,1.894 c-1.429,0.866-2.136,2.079-2.122,3.635c0.013,1.212,0.452,2.221,1.316,3.022C17.176,23.736,17.614,24.023,18.1,24.227z M14.08,10.305c0.013,0.127,0.019,0.254,0.019,0.38c0,0.95-0.347,1.837-1.038,2.658c-0.835,0.976-1.845,1.54-2.94,1.451 c-0.014-0.114-0.022-0.234-0.022-0.36c0-0.912,0.397-1.888,1.102-2.686c0.352-0.404,0.8-0.74,1.342-1.008 C13.085,10.476,13.598,10.33,14.08,10.305z"/> </g> <g id="Global_Nav_Large_1_"> </g> <g id="Guides"> </g> <g id="NOTES"> </g> </svg>

12. SVGʢScalable Vector Graphicsʣ • ϕΫλʔσʔλ • XML • Ξχϝʔγϣϯ •

    ֦େॖখͯ͠΋ߥ͘ͳΒͳ͍

13. SVG͸ɺͳΜͰ֦େॖখͯ͠΋ߥ͘ͳΒͳ͍ͷʁʁ • ఺ͷ࠲ඪҐஔ΍఺ಉ࢜Λ݁ͿઢΛܭࢉ͠ɺ͞Βʹը૾ͷ֦େ΍ ॖখ΋ը࣭Λܭࢉͯ͠ද͍ࣔͯ͠Δ͔Βɻ • ͪͳΈʹɺϕΫλʔσʔλ͕࠷΋ར༻͞Ε͍ͯΔ͸ɺϑΥϯτ ʢΞ΢τϥΠϯϑΥϯτʣͩͦ͏Ͱ͢ɻ • ΋ͬͱ஌Γͨ͘ͳͬΒΒɺάάοͯ͆

14. ֦େॖখͯ͠΋ߥ͘ͳΒͳ͍ͷͰ... • SVGͷ1ϑΝΠϧ͚ͩ༻ҙ͢Ε͹ɺղ૾౓ʹԠͨ͡ը૾Λ༻ҙ͢ Δඞཁ͕ͳ͍ʂ • ࠓޙɺ͞Βʹղ૾౓͕͕͋Γ@4x, xxxxxhdpiͳͲͷରԠ͕ඞཁ ʹͳͬͨ࣌΋ɺ৽͘͠ը૾Λ༻ҙ͠ͳ͍͍͍ͯ͘!! • ΞϓϦͷ༰ྔ΋ݮΒͤΔ(

    *• 1ω•3 )b

15. σϝϦοτ΋͋ΔΑ... • ϨϯμϦϯά͕ඞཁͳͷͰɺσόΠεͷੑೳʹΑͬͯ͸ඳը͕ ஗͘ͳΔ • ಺༰ʹΑͬͯ͸ɺpngΑΓ΋ϑΝΠϧαΠζ͕େ͖͘ͳΔ • ࣸਅʹ͸࢖͑ͳ͍

16. iOSͷSVGରԠ

17. iOSͰ͸ɺ͜ͷลΛ࢖͏ͱSVG͕࢖͑·͢(ŋωŋ)b • ϥΠϒϥϦ(SVGKit, Swi,SVG) • ΞϓϦ(PaintCode 3)

18. SVGKit h"ps:/ /github.com/SVGKit/SVGKit CocoaPodsͰ௥Ճ pod 'SVGKit', :git => 'https://github.com/SVGKit/SVGKit.git', :branch

    => '2.x'

19. Resources࡞ͬͯɺͦ͜ʹSVGΛ͍ΕͯͶʔ

20. ͋ͱ͸ɺ͜Μͳײ͡ʹ΍Ε͹OK @IBOutlet weak var svgWindowsImageView: UIImageView! override func viewDidLoad() {

    super.viewDidLoad() let svgImage = SVGKImage(named: "windows") svgImage?.size = svgWindowsImageView.bounds.size svgWindowsImageView.image = svgImage?.uiImage }

21. PaintCode 3 • drawrectΤσΟλʔ • 12,532ԁ(2017/1/20) • swi53.0ରԠʂ͋ͱɺAndroid΋ʂʂ΋ͪΖΜɺJavaScript ΋ʂʂʂ

22. None

23. //// Color Declarations let fillColor = UIColor(red: 0.139, green: 0.508,

    blue: 0.755, alpha: 1.000) let fillColor2 = UIColor(red: 0.951, green: 0.951, blue: 0.951, alpha: 1.000) //// windows.svg Group //// Oval Drawing let ovalPath = UIBezierPath(ovalIn: CGRect(x: 0, y: 0, width: 512, height: 512)) fillColor.setFill() ovalPath.fill() //// Bezier Drawing let bezierPath = UIBezierPath() bezierPath.move(to: CGPoint(x: 232, y: 246.52)) bezierPath.addCurve(to: CGPoint(x: 232, y: 129.53), controlPoint1: CGPoint(x: 232, y: 207.52), controlPoint2: CGPoint(x: 232, y: 168.53)) bezierPath.addCurve(to: CGPoint(x: 120, y: 148.48), controlPoint1: CGPoint(x: 192, y: 135.86), controlPoint2: CGPoint(x: 159.46, y: 142.16)) bezierPath.addCurve(to: CGPoint(x: 120, y: 247.93), controlPoint1: CGPoint(x: 120, y: 188.26), controlPoint2: CGPoint(x: 120, y: 208.15)) bezierPath.addCurve(to: CGPoint(x: 232, y: 246.52), controlPoint1: CGPoint(x: 159.46, y: 247.47), controlPoint2: CGPoint(x: 192, y: 246.98)) bezierPath.close() fillColor2.setFill() bezierPath.fill() //// Bezier 2 Drawing let bezier2Path = UIBezierPath() bezier2Path.move(to: CGPoint(x: 248, y: 246.28)) bezier2Path.addCurve(to: CGPoint(x: 376, y: 244.86), controlPoint1: CGPoint(x: 288, y: 245.8), controlPoint2: CGPoint(x: 336.54, y: 245.35)) bezier2Path.addCurve(to: CGPoint(x: 376, y: 107.52), controlPoint1: CGPoint(x: 376, y: 199.08), controlPoint2: CGPoint(x: 376, y: 153.3)) bezier2Path.addCurve(to: CGPoint(x: 248, y: 126.47), controlPoint1: CGPoint(x: 336.54, y: 113.84), controlPoint2: CGPoint(x: 288, y: 120.14)) bezier2Path.addCurve(to: CGPoint(x: 248, y: 246.28), controlPoint1: CGPoint(x: 248, y: 166.41), controlPoint2: CGPoint(x: 248, y: 206.34)) bezier2Path.close() fillColor2.setFill() bezier2Path.fill() //// Bezier 3 Drawing let bezier3Path = UIBezierPath() bezier3Path.move(to: CGPoint(x: 249.6, y: 265.72)) bezier3Path.addCurve(to: CGPoint(x: 249.6, y: 385.54), controlPoint1: CGPoint(x: 249.58, y: 305.66), controlPoint2: CGPoint(x: 249.6, y: 345.6)) bezier3Path.addCurve(to: CGPoint(x: 376, y: 404.48), controlPoint1: CGPoint(x: 289.06, y: 391.86), controlPoint2: CGPoint(x: 336.53, y: 398.16)) bezier3Path.addCurve(to: CGPoint(x: 376, y: 267.14), controlPoint1: CGPoint(x: 376, y: 358.7), controlPoint2: CGPoint(x: 376, y: 312.91)) bezier3Path.addCurve(to: CGPoint(x: 249.6, y: 265.72), controlPoint1: CGPoint(x: 336.54, y: 266.67), controlPoint2: CGPoint(x: 289.07, y: 266.19)) bezier3Path.close() fillColor2.setFill() bezier3Path.fill() //// Bezier 4 Drawing let bezier4Path = UIBezierPath() bezier4Path.move(to: CGPoint(x: 232, y: 265.48)) bezier4Path.addCurve(to: CGPoint(x: 120, y: 264.06), controlPoint1: CGPoint(x: 192, y: 265.01), controlPoint2: CGPoint(x: 159.46, y: 264.54)) bezier4Path.addCurve(to: CGPoint(x: 120, y: 363.52), controlPoint1: CGPoint(x: 120, y: 303.85), controlPoint2: CGPoint(x: 120, y: 323.74)) bezier4Path.addCurve(to: CGPoint(x: 232, y: 382.46), controlPoint1: CGPoint(x: 159.46, y: 369.85), controlPoint2: CGPoint(x: 192, y: 376.14)) bezier4Path.addCurve(to: CGPoint(x: 232, y: 265.48), controlPoint1: CGPoint(x: 232, y: 343.47), controlPoint2: CGPoint(x: 232, y: 304.48)) bezier4Path.close() fillColor2.setFill() bezier4Path.fill()

24. ExportͰɺswi*ϑΝΠϧॻ͖ग़ͯ͠ɺϓϩδΣΫτʹೖΕͯʔ

25. ίʔυͰࢦఆ͢Δ৔߹͸ɺ͜Μͳײ͡ hogehoge.image = WindowsStyleKit.imageOfWindows

26. storyboardͰ΍Δ৔߹͸ɺ͜Μͳײ͡ import UIKit @IBDesignable class WindowsView: UIView { override func

    draw(_ rect: CGRect) { WindowsStyleKit.drawWindows() } }

27. SVGΞχϝʔγϣϯͬΆ͍͜ͱ @IBOutlet weak var windowsView: WindowsView! func rotateView() { UIView.animate(withDuration:

    0.5, delay: 0, options: .curveLinear, animations: { self.windowsView!.transform = self.windowsView!.transform.rotated(by: CGFloat(M_PI_2)) }, completion: { finished in self.rotateView() }) }

28. AndroidͷSVGରԠ

29. AndroidͰɺPaintCode 3Λ࢖͏ h"p:/ /qiita.com/gupuru/items/ 38d29cee66fc956bd30a

30. Android 5.0(Lollipop)ΑΓɺϕΫλʔը૾͕ී௨ʹ࢖͑·͢ɻ 5.0ΑΓԼ͸ɺSupportLibraryΛ࢖͏͜ͱͰɺද͕ࣔՄೳʂ <ImageView android:id="@+id/hogehoge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_hogehoge_vector_24dp" />

31. svgϑΝΠϧΛͦͷ··Ͱ͸࢖͑ͳ͍ͷͰ<vector>ʹม׵͢Δඞ ཁ͕͋Γ·͢ɻ ͜ͷล͸ɺAndroid StudioͷVector AssetΛ࢖͑͹ɺ؆୯ʹͰ͖· ͢ʂ

32. Local...ΛબΜͰ΋ΒͬͯɺsvgϑΝΠϧΛࢦఆ͠·͢

33. ͪΌΜͱಡΈࠐΊΔͱɺ͜Μͳײ͡ʹϓϨϏϡʔ͕දࣔ͞Ε·͢

34. ͦͯ͠ɺ͜Μͳײ͡ʹม׵ͯ͘͠Ε·͢

35. ͋ʂͪͳΈʹɺVector Assetʹ͸ɺ͜Μͳײ͡ͷΞΠίϯ΋༻ҙ ͯ͘͠Ε͍ͯΔͷͰɺͬͪ͜Λ࢖͏ͷ΋ΞϦʂ

36. Լ४උ gradleʹɺ͜ΕΛೖΕ͍ͯͩ͘͞ defaultConfig { ... vectorDrawables.useSupportLibrary = true ... }

37. svgΛදࣔ͢Δʹ͸srcCompatΛ࢖͍·͢ɻ <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/hogehoge"/>

38. Ξχϝʔγϣϯ AnimatedVectorDrawableΛ࢖͏Α(^O^)ʗ ը໘ࡱΔͷ๨Εͨ͆͆

39. vector <vector xmlns:android="http://schemas.android.com/apk/res/android" android:width="20dp" android:height="44dp" android:viewportHeight="44.0" android:viewportWidth="20.0"> <group android:name="apple"> <path

    android:fillColor="#000" android:pathData="M18.1,24.227c-0.106,...3,0.1272.658c-0.85z" /> </group> </vector>

40. animated-vector <?xml version="1.0" encoding="utf-8"?> <animated-vector xmlns:android="http://schemas.android.com/apk/res/android" android:drawable="@drawable/apple" > <target android:name="apple"

    android:animation="@anim/rotate" /> </animated-vector>

41. objectAnimator <set xmlns:android="http://schemas.android.com/apk/res/android"> <objectAnimator android:duration="6000" android:propertyName="rotation" android:valueFrom="0" android:valueTo="360" /> </set>

42. startͰ࣮ߦ ImageView appleImageView = (ImageView) findViewById(R.id.image_apple); AnimatedVectorDrawable d = (AnimatedVectorDrawable)

    ContextCompat.getDrawable(this, R.drawable.rotete_apple); appleImageView.setImageDrawable(d); d.start();

43. ·ͱΊ

44. SVGͷ΍Γ΍͢͞͸Androidͷํ͕ ্͚ͩͲ...

45. iPhone΋ෛ͚ͯͳ͍ͧʂ

46. ɹ࠷ޙʹݴ͍๨Εͨ͜ͱ͕...

47. ࣾ௕ͷ໊લ͸ɺϋφͪΌΜͰ͢ʢসʣ

48. ࠷ޙ·Ͱ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ