Speaker Deck
Speaker Deck Pro
Sign in
Sign up
for free
iOS and Android SVG
gupuru
September 15, 2016
Programming
0
260
iOS and Android SVG
gupuru
September 15, 2016
Tweet
Share
More Decks by gupuru
See All by gupuru
gupuru
0
48
gupuru
0
220
gupuru
0
380
gupuru
0
200
gupuru
0
180
gupuru
3
620
gupuru
1
150
gupuru
0
1.4k
gupuru
1
100
Other Decks in Programming
See All in Programming
wasabeef
1
560
akkeylab
0
320
nbkouhou
9
4.5k
xrdnk
0
130
atskimura
0
290
yumcyawiz
4
600
asumikan
0
280
cocoeyes02
0
220
thatjeffsmith
0
310
viteinfinite
0
140
dictoss
0
160
standfm
0
210
Featured
See All Featured
gr2m
83
11k
sugarenia
233
830k
ammeep
656
54k
paulrobertlloyd
71
1.4k
imathis
478
150k
afnizarnur
176
14k
davidbonilla
69
3.5k
scottboms
251
11k
philnash
8
480
lara
590
61k
phodgson
87
3.9k
swwweet
206
6.8k
Transcript
iOSͱAndroidͷSVGʹ͍ͭͯܰ͘͢Αʔ
About me ৽ݟ ߊฏ גࣜձࣾϠϚοϓͱ͍͏ձࣾͰɺYAMAPͷAndroidΞϓϦͳͲΛ ࡞͍ͬͯΔΤϯδχΞͰ͢ɻ • Twi%er: @gupuru •
GitHub: gupuru
ͪͳΈʹɺϠϚοϓɺͲΜͳاۀ͔ͱݴ͏ͱ…
ݘ͕ࣾͰ͢ʂ
͋ͱɺ͓·͚ͳͷͰɺదʹฉ͍ͯ(*´ωʆ*)
͓·͚ͷ༰ • SVGͬͯԿʁ • iOSͷSVG • AndroidͷSVGɹ
SVGͬͯԿʁ
None
ɹ͜ͷΜͷͭ
SVGʢScalable Vector Graphicsʣ • ϕΫλʔσʔλ • XML
<?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>
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 ʂʂʂ
None
//// 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Λ͏͜ͱͰɺද͕ࣔՄೳʂ <ImageView android:id="@+id/hogehoge" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_hogehoge_vector_24dp" />
svgϑΝΠϧΛͦͷ··Ͱ͑ͳ͍ͷͰ<vector>ʹม͢Δඞ ཁ͕͋Γ·͢ɻ ͜ͷลɺAndroid StudioͷVector AssetΛ͑ɺ؆୯ʹͰ͖· ͢ʂ
Local...ΛબΜͰΒͬͯɺsvgϑΝΠϧΛࢦఆ͠·͢
ͪΌΜͱಡΈࠐΊΔͱɺ͜Μͳײ͡ʹϓϨϏϡʔ͕දࣔ͞Ε·͢
ͦͯ͠ɺ͜Μͳײ͡ʹมͯ͘͠Ε·͢
͋ʂͪͳΈʹɺVector Assetʹɺ͜Μͳײ͡ͷΞΠίϯ༻ҙ ͯ͘͠Ε͍ͯΔͷͰɺͬͪ͜Λ͏ͷΞϦʂ
Լ४උ gradleʹɺ͜ΕΛೖΕ͍ͯͩ͘͞ defaultConfig { ... vectorDrawables.useSupportLibrary = true ... }
svgΛදࣔ͢ΔʹsrcCompatΛ͍·͢ɻ <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" app:srcCompat="@drawable/hogehoge"/>
Ξχϝʔγϣϯ AnimatedVectorDrawableΛ͏Α(^O^)ʗ ը໘ࡱΔͷΕͨ͆͆
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>
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>
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>
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ෛ͚ͯͳ͍ͧʂ
ɹ࠷ޙʹݴ͍Εͨ͜ͱ͕...
ࣾͷ໊લɺϋφͪΌΜͰ͢ʢসʣ
࠷ޙ·Ͱ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ