TCTheme iOS view building system

487 views
428 views

Published on

TCTheme is a view building system for iOS

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
487
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

TCTheme iOS view building system

  1. 1. TCTheme systemview build system with json configuration on iOSSaturday, May 4, 13
  2. 2. The point of TCTheme• realize theme changing on iPhone, iPad• supply a more coder friendly way to writeviews on iOS• remove UIView initializing code fromcontrollers, to make the controller morecleanSaturday, May 4, 13
  3. 3. DEMOSaturday, May 4, 13
  4. 4. How to?Saturday, May 4, 13
  5. 5. How to?Step 1: load them from the json configuration fileSaturday, May 4, 13
  6. 6. How to?Step 2: build the view in the configurationSaturday, May 4, 13
  7. 7. How to change theme?The only thing you needto do is load the newtheme configuration file,then all will be changed.Saturday, May 4, 13
  8. 8. without interface builder,we need to write codelike these ...we don’t like interface builder,because it’s not coder friendlySaturday, May 4, 13
  9. 9. without interface builder,we need to write codelike these ...Pay attention! There are much more lines of codes outside!!we don’t like interface builder,because it’s not coder friendlySaturday, May 4, 13
  10. 10. use the top level key in the json to build viewSaturday, May 4, 13
  11. 11. we can set someattributes hereSaturday, May 4, 13
  12. 12. Supported attributes• class• type• frame• text• font• image• background• background-image• color• border• radius• shadow• autoresizing• subviews• extends• ...Saturday, May 4, 13
  13. 13. class, frame, type, textclass name of the viewposition and size of the viewbutton typethe text shown in the buttonSaturday, May 4, 13
  14. 14. class, frame, type, textif the text is included by {}, then it will be replaced by the translationSaturday, May 4, 13
  15. 15. class, frame, type, textexpression is supported hereSaturday, May 4, 13
  16. 16. fontthis means the system default font with size 18bold system default font with size 18italic system default font with size 18Arial Rounded MT Bold, size 18Saturday, May 4, 13
  17. 17. image, background-imageimage under app rootrelative path based on the path of the configuration filestretchable paramsSaturday, May 4, 13
  18. 18. background, colorhex rgb color, 4 bit eachrgbargb, 8 bit eachrgbaSaturday, May 4, 13
  19. 19. background, colorSaturday, May 4, 13
  20. 20. backgroundbackground color also support imageSaturday, May 4, 13
  21. 21. border, radiusborder colorborder widthcorner radiusSaturday, May 4, 13
  22. 22. shadow, autoresizingshadow is also supportedauto resizingSaturday, May 4, 13
  23. 23. subviewsevery subview has a key, then you get the subview by styledViewForKey in codeSaturday, May 4, 13
  24. 24. subviews with arraydictionary is out of order, we can use array here if subview order concernsSaturday, May 4, 13
  25. 25. content-subviewsthese will be rendered as UIImageView forbackgroundView and selectedBackgroundViewSaturday, May 4, 13
  26. 26. content-subviewscontent-subviews for UITableViewCellthese views will be added to the cell’s contentViewSaturday, May 4, 13
  27. 27. content-subviewsYes, as you can see, they are syntax highlighted !Saturday, May 4, 13
  28. 28. serve for lazy coder 1TextMate bundlefor json editinghttps://github.com/starfalling/tctheme-textmateSaturday, May 4, 13
  29. 29. AutoComplete withthe TextMate bundleafter tab pressedSaturday, May 4, 13
  30. 30. Serve for lazy coder 2• we can include another themeconfiguration fileSaturday, May 4, 13
  31. 31. Serve for lazy coder 3will be merged together• we can define class level configurationsSaturday, May 4, 13
  32. 32. Serve for lazy coder 4• we can extends another top level keySaturday, May 4, 13
  33. 33. Serve for lazy coder 5• load configuration files in the projectpath, and run your app in simulator• TCTheme will watch the configurationfile changing, and reload when changed• change the configuration, and you willsee the result without restart appSaturday, May 4, 13
  34. 34. QA• So what’s your opinion about this system?Saturday, May 4, 13
  35. 35. Contact• email: gyq5319920@gmail.com• gtalk: gyq5319920@gmail.comSaturday, May 4, 13
  36. 36. Thank you !Saturday, May 4, 13

×