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

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

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

ݘ͕ࣾ௕Ͱ͢ʂ

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

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

SVGͬͯԿʁ

No content

ɹ͜ͷ΁Μͷ΍ͭ

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

SVGʢScalable Vector Graphicsʣ • ϕΫλʔσʔλ • XML • Ξχϝʔγϣϯ • ֦େॖখͯ͠΋ߥ͘ͳΒͳ͍

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

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

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

iOSͷSVGରԠ

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

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

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

͋ͱ͸ɺ͜Μͳײ͡ʹ΍Ε͹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 }

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

No content

//// 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()

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

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

storyboardͰ΍Δ৔߹͸ɺ͜Μͳײ͡ import UIKit @IBDesignable class WindowsView: UIView { override func draw(_ rect: CGRect) { WindowsStyleKit.drawWindows() } }

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() }) }

AndroidͷSVGରԠ

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

Android 5.0(Lollipop)ΑΓɺϕΫλʔը૾͕ී௨ʹ࢖͑·͢ɻ 5.0ΑΓԼ͸ɺSupportLibraryΛ࢖͏͜ͱͰɺද͕ࣔՄೳʂ

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

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

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

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

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

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

svgΛදࣔ͢Δʹ͸srcCompatΛ࢖͍·͢ɻ

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

vector

animated-vector

objectAnimator

startͰ࣮ߦ ImageView appleImageView = (ImageView) findViewById(R.id.image_apple); AnimatedVectorDrawable d = (AnimatedVectorDrawable) ContextCompat.getDrawable(this, R.drawable.rotete_apple); appleImageView.setImageDrawable(d); d.start();

·ͱΊ

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

iPhone΋ෛ͚ͯͳ͍ͧʂ

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

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

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