Embed Size (px)
DESCRIPTION
TCTheme is a view building system for iOS
Citation preview
TCTheme systemview build system with json configuration on iOS
Saturday, May 4, 13
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
DEMO
Saturday, May 4, 13
How to?
Saturday, May 4, 13
How to?
Step 1: load them from the json configuration file
Saturday, May 4, 13
How to?
Step 2: build the view in the configuration
Saturday, May 4, 13
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
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
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
use the top level key in the json to build view
Saturday, May 4, 13
we can set some attributes here
Saturday, May 4, 13
Supported attributes
• class
• type
• frame
• text
• font
• image
• background
• background-image
• color
• border
• radius
• shadow
• autoresizing
• subviews
• extends
• ...
Saturday, May 4, 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
class, frame, type, text
if the text is included by {}, then it will be replaced by the translation
Saturday, May 4, 13
class, frame, type, text
expression is supported here
Saturday, May 4, 13
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
image, background-image
image under app root
relative path based on the path of the configuration file
stretchable params
Saturday, May 4, 13
background, color
hex rgb color, 4 bit each
rgba
rgb, 8 bit each
rgba
Saturday, May 4, 13
background, color
Saturday, May 4, 13
background
background color also support image
Saturday, May 4, 13
border, radius
border color
border width
corner radius
Saturday, May 4, 13
shadow, autoresizing
shadow is also supported
auto resizing
Saturday, May 4, 13
subviews
every subview has a key, then you get the subview by styledViewForKey in code
Saturday, May 4, 13
subviews with array
dictionary is out of order, we can use array here if subview order concerns
Saturday, May 4, 13
content-subviews
these will be rendered as UIImageView forbackgroundView and selectedBackgroundView
Saturday, May 4, 13
content-subviews
content-subviews for UITableViewCellthese views will be added to the cell’s contentView
Saturday, May 4, 13
content-subviews
Yes, as you can see, they are syntax highlighted !
Saturday, May 4, 13
serve for lazy coder 1
TextMate bundle
for json editing
https://github.com/starfalling/tctheme-textmate
Saturday, May 4, 13
AutoComplete with the TextMate bundle
after tab pressed
Saturday, May 4, 13
Serve for lazy coder 2
• we can include another theme configuration file
Saturday, May 4, 13
Serve for lazy coder 3
will be merged together
• we can define class level configurationsSaturday, May 4, 13
Serve for lazy coder 4
• we can extends another top level key
Saturday, May 4, 13
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
QA
• So what’s your opinion about this system?
Saturday, May 4, 13
Thank you !
Saturday, May 4, 13
