From 3e1aacef0e254dac4a288a295f59e25c979e77f1 Mon Sep 17 00:00:00 2001 From: Zev Eisenberg Date: Fri, 7 Apr 2017 21:28:54 -0400 Subject: [PATCH 1/2] Readme formatting. --- README.md | 30 ++++++++++++++++-------------- 1 file changed, 16 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 0993724..c64605e 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ iosViews ======== -Sketch plugin to generate ios view code +Sketch plugin to generate iOS view code ###pathExporter.sketchplugin (finally fixed) exports your views as UIBezierPath as swift code @@ -11,17 +11,17 @@ so you'll have something like path.moveToPoint(...) ... -####Why? -It's very annoying to draw in ios in code. But it's annoying to draw in sketch and export it as a picture because you can no longer use the CGRect dimensions from ios. You're stuck with whatever dimensions you picked in sketch. +#### Why? +It's very annoying to draw in iOS in code. But it's annoying to draw in sketch and export it as a picture because you can no longer use the CGRect dimensions from iOS. You're stuck with whatever dimensions you picked in sketch. This will generate a bunch of swift functions, with 1 main function which takes in a CGRect so you can put it in layoutSubviews. All your shapes will be relative to how you depict them in sketch and the CGRect. Also you can edit the code and add your own transformations or animations, instead of having to create a ton of assets and load them dynamically. -For instance, if in sketch you offset your creation 20px from the left, and your arboard is 200px in width. Then at runtime of the ios application your creation will be offset 20*(width/200) where width is the width of the ios CGRect at runtime. This of course works with y offset, width, and height. +For instance, if in sketch you offset your creation 20px from the left, and your arboard is 200px in width. Then at runtime of the iOS application your creation will be offset 20\*(width/200) where width is the width of the iOS CGRect at runtime. This of course works with y offset, width, and height. When you run the plugin it puts the generated code into your artboard, so if you have a very complex shape (or groups of shapes) pasting the code might be slow or even crash sketch. If it is complex and hasn't crashed, it might take minutes (spinning beachball) but it will work. -####How does it work? +#### How does it work? 1. create an artboard (let's say iphone sized) 1. create some shape you want that you'd have to do in code otherwise 1. select the artboard (make sure it's only the artboard, this is very important) @@ -31,7 +31,7 @@ When you run the plugin it puts the generated code into your artboard, so if you - you will get code where everything is relative to the artboard - NOTE: for complex shapes the export might be slow (take minutes) -####Unfortunatelly this doesn't work with: +#### Unfortunatelly this doesn't work with: 1. boolean operations (union, subtract, intersect, difference) 1. radius on object (set the radius on individual path instead of object... click enter > highlight points > set radius) 1. opacity on object (set your opacity on the color directly, and it will work) @@ -45,19 +45,20 @@ When you run the plugin it puts the generated code into your artboard, so if you 1. character spacing, line height, paragraph spacing are ignored 1. justified alignment is ignored 1. text layers are ignored -1. even/odd setting on fill is ignored (it uses whatever ios uses, I don't know if it's even/odd or non zero by default) +1. even/odd setting on fill is ignored (it uses whatever iOS uses, I don't know if it's even/odd or non zero by default) 1. border arrow settings -####TODO: +#### TODO: - fix a lot of the things that don't work - settle on a good shortcut - add this to sketch toolbox -####Example -#####Sketch File +#### Example +##### Sketch File + ![moo png](https://github.com/Charimon/iosViews/blob/master/moo_sketch.png?raw=true "moo_sketch.png") -#####Generated Code +##### Generated Code ```swift lazy var outline: CAShapeLayer = { let l = CAShapeLayer() @@ -101,13 +102,14 @@ func moo(bounds: CGRect) { ``` [full swift file](../moo.swift) -#####ios -after adding the following to some UIView +##### iOS +After adding the following to some UIView ```swift override func layoutSubviews() { moo(self.bounds) } ``` -you should see +you should see: + ![moo_ios png](https://github.com/Charimon/iosViews/blob/master/moo_iphone.png?raw=true "moo_iphone.png") From 18a03387d95386a6e211859c8f825b8916c89aee Mon Sep 17 00:00:00 2001 From: Zev Eisenberg Date: Fri, 7 Apr 2017 21:29:42 -0400 Subject: [PATCH 2/2] Tag fenced code block as Swift. --- README.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index c64605e..d2e5225 100644 --- a/README.md +++ b/README.md @@ -7,9 +7,11 @@ Sketch plugin to generate iOS view code exports your views as UIBezierPath as swift code so you'll have something like - let path = UIBezierPath() - path.moveToPoint(...) - ... +```swift +let path = UIBezierPath() +path.moveToPoint(...) +... +``` #### Why? It's very annoying to draw in iOS in code. But it's annoying to draw in sketch and export it as a picture because you can no longer use the CGRect dimensions from iOS. You're stuck with whatever dimensions you picked in sketch.