Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 21 additions & 17 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,29 @@
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
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.
#### 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)
Expand All @@ -31,7 +33,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)
Expand All @@ -45,19 +47,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()
Expand Down Expand Up @@ -101,13 +104,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")