Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
iOS and Android SVG
gupuru
September 15, 2016
Programming
0
280
iOS and Android SVG
gupuru
September 15, 2016
Tweet
Share
More Decks by gupuru
See All by gupuru
fukuoka_kt_1
gupuru
0
57
ng-fukuoka-meetup-1
gupuru
0
260
AngularとAzureのCustom Vision Serviceを使って 画像認識サイトを作ってみた
gupuru
0
460
紙について少し詳しくなる10分間
gupuru
0
260
make bot, fun bot
gupuru
0
240
firebase勉強会資料
gupuru
3
710
Firebaseについて
gupuru
1
160
BLEを使って、すれ違い通信をやってみるよー
gupuru
0
1.7k
HiyokoDeveloperMeeting
gupuru
1
110
Other Decks in Programming
See All in Programming
リーダブルテストコード / #vstat
jnchito
46
34k
Edge Side Frontend という新領域
mizchi
21
10k
実践 SpiceDB - クライドネイティブ時代をサバイブできるパーミッション管理の実装を目指して / Practical SpiceDB
lmt_swallow
0
100
Now in Android Overview
aosa4054
0
370
Cloudflare WorkersでGoのHTTPサーバーを動かすライブラリを作った話
syumai
0
140
Enzyme から React Native Testing Library に移行した経緯 / 2022-07-20
tamago3keran
1
160
レビュー駆動学習のススメ_StaPy#83
soogie
0
300
Google I/O 2022 Android関連概要 / Google I/O 2022 Android summary
phicdy
0
360
読みやすいコード クラスメソッド 2022 年度新卒研修
januswel
0
2.9k
段階的な技術的負債の解消方法.pdf
ko2ic
2
850
SGGとは
inoue2002
0
430
Haskellでオブジェクト指向プログラミング
koheisakata
0
170
Featured
See All Featured
Atom: Resistance is Futile
akmur
255
20k
Faster Mobile Websites
deanohume
294
28k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
Gamification - CAS2011
davidbonilla
75
3.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
What's new in Ruby 2.0
geeforr
336
30k
Building an army of robots
kneath
299
40k
How GitHub (no longer) Works
holman
297
140k
Git: the NoSQL Database
bkeepers
PRO
415
59k
StorybookのUI Testing Handbookを読んだ
zakiyama
5
2.5k
Designing Experiences People Love
moore
130
22k
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ෛ͚ͯͳ͍ͧʂ
ɹ࠷ޙʹݴ͍Εͨ͜ͱ͕...
ࣾͷ໊લɺϋφͪΌΜͰ͢ʢসʣ
࠷ޙ·Ͱ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ