A JSON based UI style setting for iOS.
ThemeUI is available through CocoaPods. To install it, simply add the following line to your Podfile:
pod 'ThemeUI'
Swift 3 There are different way to provide your Theme file.
- Local json file. (Name it to
Theme.json
) - Json file from internet.
- Or just json string.
Provide a JSON
file in your project, like this:
{
"Name" : "Orange",
"Define" :
[
{
"Name" : "White1",
"Value" : "FFFFFF, 1"
},
{
"Name" : "Black2",
"Value" : "222222, 0.7"
},
{
"Name" : "Orange1",
"Value" : "FB6D51, 1"
},
{
"Name" : "Orange2",
"Value" : "FDE3D9, 0.7"
},
{
"Name" : "Small",
"Value" : 10.0
},
{
"Name" : "Medium",
"Value" : 13.0
},
{
"Name" : "Large",
"Value" : 20.0
}
],
"Body" :
{
"Label" :
[
{
"ID" : "LS01",
"Style" :
{
"Font.Color" : "White1",
"Font.Size" : "Large",
"Font.Family" : "Default",
"Font.Bold" : true
}
},
{
"ID" : "LS02",
"Style" :
{
"Font.Color" : "Orange1",
"Font.Size" : "Medium",
"Font.Family" : "Default"
}
}
],
"View" :
[
{
"ID" : "VS01",
"Style" :
{
"BG.Color" : "Orange2",
"Border.RoundCorner" : 5,
"Border.Color" : "Orange1",
"Border.Width" : 0.5
}
},
{
"ID" : "VS02",
"Style" :
{
"BG.Color" : "White1",
"Border.Color" : "000000, 1",
"Border.Width" : 0.5,
"Border.RoundCorner" : 0
}
}
],
"Button" :
[
{
"ID" : "BS01",
"Style-Normal" :
{
"BG.Color" : "Orange1",
"Border.Color" : "FFFFFF, 1",
"Border.Width" : 0.5,
"Border.RoundCorner" : 5,
"Font.Size" : "Small",
"Font.Color" : "Black2"
},
"Style-Highlight" :
{
"BG.Color" : "Orange2",
"Font.Size" : "Large",
"Font.Color" : "White1"
}
}
]
}
}
(You can find this demo JSON file in the resource folder.)
And in your ViewController
, you need to :
- Init
Theme
object. - Set
RenderController
as it's delegate. - Load theme json from your site / local.
- Set
style ID
for each view.
For example :
import ThemeUI
// you should use UIScrollViewDelegate here.
class ViewController: UIViewController, UIScrollViewDelegate {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
self.loadTheme()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
func loadTheme() -> Theme {
let url = "YOUR_THEME_JSON_URL"
let theme = Theme()
self.theme = theme
// !!IMPORTANT!!
// Set render controller as the theme's delegate.
theme.delegate = RenderController.shared
// Load theme file from URL.
// !!IMPORTANT!!
// Replace this method to your HTTP request method.
HTTPGet(url) { [unowned self] (data: Data?, errMsg: String?) -> Void in
self.theme?.loadConfig(data)
DispatchQueue.main.async {
self.layout(theme)
}
}
return theme
}
func layout(_ theme: Theme) {
let bg = UIView(frame: CGRect(x: 20, y: 40, width: 200, height: 100))
self.sv = bg
let lb = UILabel(frame: CGRect(x: 20, y: 20, width: 160, height: 20))
lb.text = "This is a test."
bg.addSubview(lb)
self.lb = lb
let btn = UIButton(frame: CGRect(x: 60, y: lb.frame.maxY + 20, width: 80, height: 30))
btn.setTitle("TestBTN", for: .normal)
btn.addTarget(self, action: #selector(self.changeStyle(sender:)), for: .touchUpInside)
bg.addSubview(btn)
RenderController.shared.setStyle(target: bg, styleID: "VS01", theme: theme, animate: true)
RenderController.shared.setStyle(target: lb, styleID: "LS01", theme: theme, animate: true)
RenderController.shared.setStyle(target: btn, styleID: "BS01", theme: theme, animate: true)
self.view.addSubview(bg)
self.view.backgroundColor = UIColor.white
}
}
Note :
- Replace
YOUR_THEME_JSON_URL
to your theme json URL. - Replace
HTTPGet
to your HTTP request method. - Please don't forget set the render controller as the theme's delegate.
And it's done!
v0.1.0 - Initial release
v0.2.0 - Support download theme from internet.
v0.2.2 - Fix method unavailable bug.
ThemeUI is available under the MIT license. See the LICENSE file for more info.