Drawing In Code

Drawing graphics in code for you iPhone and iPad interfaces

Transcript

1. Drawing in Code davidkeegan.com
2. Apps That Use This Notable, SignNow, others in development...
3. Core Graphics The Core Graphics framework is a C- based API that is based on the Quartz advanced drawing engine.
4. What can it do? •Draw circles, rectangles, rounded rectangle, bezier paths, and text •Draw gradients, solid colors, and patterns •Blending modes: screen, multiply... •Read and write PDFs
5. The Basics
6. How to use it? •In a drawRect for a view •Drawn to an image
7. drawRect
8. UIImage
9. Advantages
10. Reduced App Size •A full screen retina iPad image is about 4Mb, plus the non-retina version. •Every image you do not need to include will reduce the size of your app bundle. 50 Mb download limit over cellular
11. Versatile Design
12. Adaptive to Device Size
13. Dynamic Content Icons that reflect the current date
14. Disadvantages
15. Designers & Developers •Designers: Photoshop is not enough, might need to learn new tools like PaintCode, might even have to touch some code... •Developers: Longer setup time, [UIImage imageName:] is easier to use.
16. Speed Hit 0.8 Seconds to render on iPad 3. That is noticeable user time.
17. How to work with these issues
18. Speed We can solve this issue with caching. That way we only pay for the render time once.
19. NSCache •Render the graphics to an image, cache that image and reuse it. •NSCache is great for this because it will automatically dump content if the app receives a memory warning. •NSCache is what [UIImage imageNamed:] uses under the hood.
20. UIImage+BBlock https://github.com/kgn/BBlock
21. Notable Drawing
22. File Cache Writing the cached image to disk is also a good option. This way you only have to render it once instead of each time it is not in memory.
23. PaintCode PaintCode is a great visual editor for creating and styling vector shapes that outputs Objective-C drawing code. In the latest version of PaintCode they even added a feature to import Photoshop files. http://www.paintcodeapp.com
24. PaintCode
25. Demo
26. Conclusion •Drawing in code is an awesome way to keep your app sizes small and build flexible interfaces that can change to fit any device. •Think about the tradeoffs when deciding to use an image or draw something in code. If it is already done in Photoshop maybe just use that. If it needs to scale or the colors will change maybe remake it in code.