实时显示iOS编写UI代码效果

转自：http://www.jianshu.com/p/2ed5f7444900

编写iOS应用UI的方式大概有两种，一种是Storyboard/Xib，另一种是手写代码。采用Storyboard/Xib方式组织UI，由于提供可视化的特性，只要从UI库中拖动UI控件，便可以显示结果，极大地提高开发速度。但面临一个问题就是多人协作开发，由于所有的UI都放在同一个Storyboard文件中，使用Git/SVN合并代码就会出现冲突。多人协作开发还不是主要问题，有人提出可以创建多个Storyboard来分开UI编写，而Storyboard/Xib最主要问题是代码复用性比较差。所以有些人就选择手写UI代码，这样不仅可以解决多人协作开发问题，而且通过自定义控件在多个View使用。但每次手写UI代码后都要编译、构建和运行，最后在模拟器显示，这样会拖慢开发速度。如果每次修改UI控件后，保存修改便实时在模拟器显示修改后结果，就可以极大的提高编写UI的速度。

Auto Layout

Auto Layout是什么

Auto Layout解决什么问题

如何使用Auto Layout

+ (id)constraintWithItem:(id)view1
attribute:(NSLayoutAttribute)attribute1
relatedBy:(NSLayoutRelation)relation
toItem:(id)view2
attribute:(NSLayoutAttribute)attribute2
multiplier:(CGFloat)multiplier
constant:(CGFloat)constant;

typedef enum: NSInteger {
NSLayoutAttributeLeft = 1,
NSLayoutAttributeRight,
NSLayoutAttributeTop,
NSLayoutAttributeBottom,
NSLayoutAttributeLeading,
NSLayoutAttributeTrailing,
NSLayoutAttributeWidth,
NSLayoutAttributeHeight,
NSLayoutAttributeCenterX,
NSLayoutAttributeCenterY,
NSLayoutAttributeBaseline,
NSLayoutAttributeNotAnAttribute = 0
} NSLayoutAttribute;

view1.attribute1 = view2.attribute2 * multiplier + constant

+ (NSArray *)constraintsWithVisualFormat:(NSString *)format
options:(NSLayoutFormatOptions)opts
metrics:(NSDictionary *)metrics
views:(NSDictionary *)views;

Auto Layout存在问题

UIView *superview = self;

UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor greenColor];
[superview addSubview:view1];

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

[superview addConstraints:@[

//view1 constraints
[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeTop
multiplier:1.0
constant:padding.top],

[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeLeft
multiplier:1.0
constant:padding.left],

[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeBottom
multiplier:1.0
constant:-padding.bottom],

[NSLayoutConstraint constraintWithItem:view1
attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual
toItem:superview
attribute:NSLayoutAttributeRight
multiplier:1
constant:-padding.right],

]];

Masonry

为什么使用Masonry

MASConstraintMaker

UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler
make.left.equalTo(superview.mas_left).with.offset(padding.left);
make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
make.right.equalTo(superview.mas_right).with.offset(-padding.right);
}];

[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(superview).with.insets(padding);
}];

如何使用

mas_makeConstraints

mas_updateConstraints

mas_remakeConstraints

mas_makeConstraints

// in public/private interface
@property (nonatomic, strong) MASConstraint *topConstraint;

...

// when making constraints
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
self.topConstraint = make.top.equalTo(superview.mas_top).with.offset(padding.top);
make.left.equalTo(superview.mas_left).with.offset(padding.left);
}];

...
// then later you can call
[self.topConstraint uninstall];

mas_updateConstraints

// this is Apple's recommended place for adding/updating constraints
// this method can get called multiple times in response to setNeedsUpdateConstraints
// which can be called by UIKit internally or in your code if you need to trigger an update to your constraints
- (void)updateConstraints {
[self.growingButton mas_updateConstraints:^(MASConstraintMaker *make) {
make.center.equalTo(self);
make.width.equalTo(@(self.buttonSize.width)).priorityLow();
make.height.equalTo(@(self.buttonSize.height)).priorityLow();
make.width.lessThanOrEqualTo(self);
make.height.lessThanOrEqualTo(self);
}];

//according to apple super should be called at end of method
[super updateConstraints];
}

mas_remakeConstraints

mas_updateConstraints

mas_remakeConstraints

mas_updateConstraints

- (void)changeButtonPosition {
[self.button mas_remakeConstraints:^(MASConstraintMaker *make) {
make.size.equalTo(self.buttonSize);

if (topLeft) {
make.top.and.left.offset(10);
} else {
make.bottom.and.right.offset(-10);
}
}];
}

Classy

Classy简介和特性

{

}

:

;

{

}

:

;

$main-color = #e1e1e1;

MYCustomView {
background-color: $main-color;
title-insets: 5, 10, 5, 10;
> UIProgressView.tinted {
progress-tint-color: black;
track-tint-color: yellow;
}
}

^UIButton.warning, UIView.warning ^UIButton {
title-color[state:highlighted]: #e3e3e3;
}

$main-color = #e1e1e1

MYCustomView
background-color $main-color
title-insets 5, 10, 5, 10
> UIProgressView.tinted
progress-tint-color black
track-tint-color yellow

^UIButton.warning, UIView.warning ^UIButton
title-color[state:highlighted] #e3e3e3

[CASStyler defaultStyler]

[CASStyler defaultStyler].filePath = [[NSBundle mainBundle] pathForResource:@"myStyles.cas" ofType:nil];

-(void)setFilePath:error:

NSError *error = nil;
NSString filePath = [[NSBundle mainBundle] pathForResource:@"myStyles.cas" ofType:nil];
[[CASStyler defaultStyler] setFilePath:filePath error:&error];

int main(int
argc, char * argv[])

-
(BOOL)application:didFinishLaunchingWithOptions:

#if TARGET_IPHONE_SIMULATOR
NSString *absoluteFilePath = CASAbsoluteFilePath(@"../Styles/stylesheet.cas");
[CASStyler defaultStyler].watchFilePath = absoluteFilePath;
#endif

Selectors

/* match views
* where class is UIButton or UIButton subclass
* and styleClass is "large"
* and superview class is UITabBar
*/

UITabBar > ^UIButton.large { }

Properties

UIPageControl

@property (nonatomic,retain) UIColor *pageIndicatorTintColor;
@property (nonatomic,retain) UIColor *currentPageIndicatorTintColor;

UIPageControl {
pageIndicatorTintColor black
currentPageIndicatorTintColor purple
}

UIPageControl {
page-indicator-tint-color black
current-page-indicator-tint-color purple
}

Keep it DRY(Don't Repeat Yourself)

UISlider.info {
minimum-track-tint-color black
maximum-track-tint-color purple
}

UISlider.error {
minimum-track-tint-color black
maximum-track-tint-color purple
thumb-tint-color red
}

UISlider.info, UISlider.error {
minimum-track-tint-color black
maximum-track-tint-color purple
}

UISlider.error {
thumb-tint-color red
}

UICollectionView {
background-color #a2a2a2
}

UICollectionView > UICollectionViewCell {
clips-to-bounds NO
}

UICollectionView > UICollectionViewCell UILabel {
text-color purple
}

UICollectionView > UICollectionViewCell UILabel.title {
font 20
}

UICollectionView {
background-color #a2a2a2

> UICollectionViewCell {
clips-to-bounds NO

UILabel {
text-color purple

&.title {
font 20
}
}
}
}

$

_

-

// prefix with ' $ ' to help distinguish variables
$brand-color = #e1e1e1

// OR not
insets = 5, 10, 5, 10

UIButton {
background-color $brand-color
contentEdgeInsets insets
background-image[state:selected] bg_button insets
}

ClassyLiveLayout

UIView+ClassyLayoutProperties

UIView

@property(nonatomic, assign) UIEdgeInsets cas_margin;
@property(nonatomic, assign) CGSize cas_size;

// shorthand properties for setting only a single constant value
@property(nonatomic, assign) CGFloat cas_sizeWidth;
@property(nonatomic, assign) CGFloat cas_sizeHeight;

@property(nonatomic, assign) CGFloat cas_marginTop;
@property(nonatomic, assign) CGFloat cas_marginLeft;
@property(nonatomic, assign) CGFloat cas_marginBottom;
@property(nonatomic, assign) CGFloat cas_marginRight;

cas_margin

cas_size

UIView.blue-box {
cas_size: 80 100
cas_margin-top: 60
cas_margin-left: 50
}

UIView.red-box {
cas_size-width: 120
cas_margin-left: 20
}

updateConstraints

updateViewConstrains

- (void)updateViewConstraints {
[super updateViewConstraints];

[_blueBoxView mas_updateConstraints:^(MASConstraintMaker *make) {
make.width.equalTo(@(_blueBoxView.cas_size.width));
make.height.equalTo(@(_blueBoxView.cas_size.height));
make.top.equalTo(@(_blueBoxView.cas_margin.top));
make.left.equalTo(@(_blueBoxView.cas_margin.left));
}];

[_redBoxView mas_updateConstraints:^(MASConstraintMaker *make) {
make.width.equalTo(@(_redBoxView.cas_size.width));
make.height.equalTo(_blueBoxView);
make.top.equalTo(_blueBoxView);
make.left.equalTo(_blueBoxView.mas_right).with.offset(_redBoxView.cas_margin.left);
}];
}

示例工程

配置工程

pod 'Masonry', '~> 0.6.1'
pod 'Classy', '~> 0.2.4'
pod 'ClassyLiveLayout', '~> 0.6.0'

编写代码

LiveView

SHPAbstractView

ViewController

LiveView

self.view

SHPAbstractView.h

UIView

UIView

SHPAbstractView

-
(void)addSubviews

- (void)defineLayout

SHPAbstractView

LiveView.m

#pragma mark - Add subviews and define layout
- (void)addSubviews
{
}

- (void)defineLayout
{
}

LiveView

redBoxView

blueBoxView

redBoxView

blueBoxView

#import "SHPAbstractView.h"

@interface LiveView : SHPAbstractView

@property (strong, nonatomic) UIView *redBoxView;
@property (strong, nonatomic) UIView *blueBoxView;

@end

SHPAbstractView

-
(void)addSubviews

-(void)defineLayout

SHPAbstractView

UIView.redBox {
cas_marginTop 50
cas_marginLeft 20

cas_size 100 100
}

UIView.blueBox {
cas_marginTop 50
cas_marginRight -20

cas_size 100 100
}

@implementation LiveView

#pragma mark - Add subviews and define layout
- (void)addSubviews
{
self.backgroundColor = [UIColor whiteColor];
[self addSubview:self.redBoxView];
[self addSubview:self.blueBoxView];
}

- (void)defineLayout
{
[self.redBoxView mas_updateConstraints:^(MASConstraintMaker* make){
make.top.equalTo(@(self.redBoxView.cas_marginTop));
make.left.equalTo(@(self.redBoxView.cas_marginLeft));
make.width.equalTo(@(self.redBoxView.cas_sizeWidth));
make.height.equalTo(@(self.redBoxView.cas_sizeHeight));
}];

[self.blueBoxView mas_updateConstraints:^(MASConstraintMaker *make){
make.top.equalTo(@(self.blueBoxView.cas_marginTop));
make.right.equalTo(@(self.blueBoxView.cas_marginRight));
make.width.equalTo(@(self.blueBoxView.cas_sizeWidth));
make.height.equalTo(@(self.blueBoxView.cas_sizeHeight));
}];
}

#pragma mark - Lazy initialization
- (UIView*)redBoxView
{
if (!_redBoxView) {
_redBoxView = [UIView new];
_redBoxView.cas_styleClass = @"redBox";
_redBoxView.backgroundColor = [UIColor redColor];
}

return _redBoxView;
}

- (UIView*)blueBoxView
{
if (!_blueBoxView) {
_blueBoxView = [UIView new];
_blueBoxView.cas_styleClass = @"blueBox";
_blueBoxView.backgroundColor = [UIColor blueColor];
}

return _blueBoxView;
}

最后效果

总结

扩展阅读