My question is a simple one. In android, we can separate xml stylesheet from layout so that it can be reuse everywhere and edited easily for UI design change.
Is it also possible in iOS xcode? if can how (prefer if not from controller)? need libraries? what are good libraries for that?
Thank you for your answer.
You could create your own styles using enums. By placing enums inside the Styles enum you get a nice grouping:
enum Styles {
enum Labels {
case Standard
case LargeText
func style(label: UILabel) {
switch self {
case .Standard:
label.font = UIFont.systemFontOfSize(12)
case .LargeText:
label.font = UIFont.systemFontOfSize(18)
}
}
}
enum Buttons {
case RedButton
func style(button: UIButton) {
switch self {
case .RedButton:
button.setTitleColor(UIColor.redColor(), forState: UIControlState.Normal)
}
}
}
}
Then you can use it like this:
Styles.Labels.Standard.style(yourLabel)
You can also then make extensions for the styles you have setup:
extension UILabel {
func style(style: Styles.Labels) {
style.style(self)
}
}
extension UIButton {
func style(style: Styles.Buttons) {
style.style(self)
}
}
And then use the extensions like this:
yourLabel.style(.Standard)
yourButton.style(.RedButton)
You should also look into UIAppearance. It's a design proxy available for most UI elements where you only set the styling once.
you can use UICategory class for UIView for that purpose. create different methods for set borders, border colors , pass bazier-paths, corner radius and so many . this is just few of them. category is of UIView so you can use on buttons,lables,textview,textedits etc;
UIView+category.h
@interface UIView (category)
-(void)makeToRoundEdgeWithBorder:(CGFloat )borderwidth bordecolor:(UIColor *)color;
@end
UIView+category.m
@implementation UIView (category)
-(void)makeToRoundEdgeWithBorder:(CGFloat )borderwidth bordecolor:(UIColor *)color
{
NSLog(@"height %f width %f",CGRectGetHeight(self.frame),CGRectGetWidth(self.frame));
self.layer.cornerRadius=CGRectGetHeight(self.frame)/2;
self.layer.masksToBounds=YES;
self.layer.borderColor=[color CGColor];
self.layer.borderWidth=borderwidth;
}
@end
Use it
[yourlable makeToRoundEdgeWithBorder:0.0f bordercolor:[UIColor clearColor] cornerRadius:8.0f];
[yourbutton makeToRoundEdgeWithBorder:0.0f bordercolor:[UIColor clearColor] cornerRadius:8.0f];
[yourTextview makeToRoundEdgeWithBorder:0.0f bordercolor:[UIColor clearColor] cornerRadius:8.0f];
[yourTextfield makeToRoundEdgeWithBorder:0.0f bordercolor:[UIColor clearColor] cornerRadius:8.0f];
You can use Classy to define a styles for your UI in a more CSS like fashion. It's used and maintained byt the people at Wire
