• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

Charimon/iosViews: Sketch plugin to generate ios view code

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

Charimon/iosViews

开源软件地址:

https://github.com/Charimon/iosViews

开源编程语言:

Swift 100.0%

开源软件介绍:

iosViews

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

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.

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?

  1. create an artboard (let's say iphone sized)
  2. create some shape you want that you'd have to do in code otherwise
  3. select the artboard (make sure it's only the artboard, this is very important)
  4. SAVE, because sketch might might crash if you have weirdly intercepting paths in your shape (flatten them, and try to simplify them)
  5. run the pathExporter.sketchplugin
  • anything hidden will be ignored
  • 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:

  1. boolean operations (union, subtract, intersect, difference)
  2. radius on object (set the radius on individual path instead of object... click enter > highlight points > set radius)
  3. opacity on object (set your opacity on the color directly, and it will work)
  4. transformation on the object (flatten them all, if you have a rotated group, ungroup it then flatten it, that way your rotation will be preserved)
  5. for fills only solid and linear gradients work, others don't
  6. for stroke, only solid color works, others don't
  7. more than 1 border or fill (only the last valid border and last valid fill are set, valid = center borders with solid color)
  8. inside, outside borders don't work and are ignored (only center border works)
  9. blending (will always be treated as "normal")
  10. shadows, inner shadows, blurs, reflections are ignored
  11. character spacing, line height, paragraph spacing are ignored
  12. justified alignment is ignored
  13. text layers are ignored
  14. 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)
  15. border arrow settings

TODO:

  • fix a lot of the things that don't work
  • settle on a good shortcut
  • add this to sketch toolbox

Example

Sketch File

moo png

Generated Code
lazy var outline: CAShapeLayer = {
  let l = CAShapeLayer()
  l.lineWidth = 28
  l.strokeColor = UIColor(hue: 0, saturation: 0, brightness: 1, alpha: 1).CGColor
  l.fillColor = UIColor(hue: 0, saturation: 0, brightness: 1, alpha: 1).CGColor
  self.layer.addSublayer(l)
  return l
  }()
...
func moo(bounds: CGRect) {
  outline.frame = bounds
  outline.path = outline_path(outline.frame)
  body.frame = bounds
  body.path = body_path(body.frame)
  spot2.frame = bounds
  spot2.path = spot2_path(spot2.frame)
  spot.frame = bounds
  spot.path = spot_path(spot.frame)
  armLeft.frame = bounds
  armLeft.path = armLeft_path(armLeft.frame)
  armRight.frame = bounds
  armRight.path = armRight_path(armRight.frame)
  head.frame = bounds
  head.path = head_path(head.frame)
  snout.frame = bounds
  snout.path = snout_path(snout.frame)
  nostrilLeft.frame = bounds
  nostrilLeft.path = nostrilLeft_path(nostrilLeft.frame)
  nostrilRight.frame = bounds
  nostrilRight.path = nostrilRight_path(nostrilRight.frame)
  eyeLeft.frame = bounds
  eyeLeft.path = eyeLeft_path(eyeLeft.frame)
  eyeBallLeft.frame = bounds
  eyeBallLeft.path = eyeBallLeft_path(eyeBallLeft.frame)
  eyeRight.frame = bounds
  eyeRight.path = eyeRight_path(eyeRight.frame)
  eyeBallRight.frame = bounds
  eyeBallRight.path = eyeBallRight_path(eyeBallRight.frame)
}

full swift file

ios

after adding the following to some UIView

override func layoutSubviews() {
  moo(self.bounds)
}

you should see moo_ios png




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap