TCTheme is a view building system for iOS

1. TCTheme system
view build system with json configuration on iOS
Saturday, May 4, 13

2. The point of TCTheme
• realize theme changing on iPhone, iPad
• supply a more coder friendly way to write
views on iOS
• remove UIView initializing code from
controllers, to make the controller more
clean
Saturday, May 4, 13

3. DEMO
Saturday, May 4, 13

4. How to?
Saturday, May 4, 13

5. How to?
Step 1: load them from the json configuration file
Saturday, May 4, 13

6. How to?
Step 2: build the view in the configuration
Saturday, May 4, 13

7. How to change theme?
The only thing you need
to do is load the new
theme configuration file,
then all will be changed.
Saturday, May 4, 13

8. without interface builder,
we need to write code
like these ...
we don’t like interface builder,
because it’s not coder friendly
Saturday, May 4, 13

9. without interface builder,
we need to write code
like these ...
Pay attention! There are much more lines of codes outside!!
we don’t like interface builder,
because it’s not coder friendly
Saturday, May 4, 13

10. use the top level key in the json to build view
Saturday, May 4, 13

11. we can set some
attributes here
Saturday, May 4, 13

12. Supported attributes
• class
• type
• frame
• text
• font
• image
• background
• background-image
• color
• border
• radius
• shadow
• autoresizing
• subviews
• extends
• ...
Saturday, May 4, 13

13. class, frame, type, text
class name of the view
position and size of the view
button type
the text shown in the button
Saturday, May 4, 13

14. class, frame, type, text
if the text is included by {}, then it will be replaced by the translation
Saturday, May 4, 13

15. class, frame, type, text
expression is supported here
Saturday, May 4, 13

16. font
this means the system default font with size 18
bold system default font with size 18
italic system default font with size 18
Arial Rounded MT Bold, size 18
Saturday, May 4, 13

17. image, background-image
image under app root
relative path based on the path of the configuration file
stretchable params
Saturday, May 4, 13

18. background, color
hex rgb color, 4 bit each
rgba
rgb, 8 bit each
rgba
Saturday, May 4, 13

19. background, color
Saturday, May 4, 13

20. background
background color also support image
Saturday, May 4, 13

21. border, radius
border color
border width
corner radius
Saturday, May 4, 13

22. shadow, autoresizing
shadow is also supported
auto resizing
Saturday, May 4, 13

23. subviews
every subview has a key, then you get the subview by styledViewForKey in code
Saturday, May 4, 13

24. subviews with array
dictionary is out of order, we can use array here if subview order concerns
Saturday, May 4, 13

25. content-subviews
these will be rendered as UIImageView for
backgroundView and selectedBackgroundView
Saturday, May 4, 13

26. content-subviews
content-subviews for UITableViewCell
these views will be added to the cell’s contentView
Saturday, May 4, 13

27. content-subviews
Yes, as you can see, they are syntax highlighted !
Saturday, May 4, 13

28. serve for lazy coder 1
TextMate bundle
for json editing
https://github.com/starfalling/tctheme-textmate
Saturday, May 4, 13

29. AutoComplete with
the TextMate bundle
after tab pressed
Saturday, May 4, 13

30. Serve for lazy coder 2
• we can include another theme
configuration file
Saturday, May 4, 13

31. Serve for lazy coder 3
will be merged together
• we can define class level configurations
Saturday, May 4, 13

32. Serve for lazy coder 4
• we can extends another top level key
Saturday, May 4, 13

33. Serve for lazy coder 5
• load configuration files in the project
path, and run your app in simulator
• TCTheme will watch the configuration
file changing, and reload when changed
• change the configuration, and you will
see the result without restart app
Saturday, May 4, 13

34. QA
• So what’s your opinion about this system?
Saturday, May 4, 13

35. Contact
• email: gyq5319920@gmail.com
• gtalk: gyq5319920@gmail.com
Saturday, May 4, 13

36. Thank you !
Saturday, May 4, 13