目录：
1. 纯代码布局
纯代码布局分VC下和V下
[MX1-layout-code]
在VC下覆盖viewDidLayoutSubviews方法,在方法中写布局,一般会把要布局的控件拉成属性
当界面大小发生改变时(竖屏变横屏, 出现工具栏或各种bar....), 调用此方法。注意这个方法在运行之后就会调用，只是在界面发生变化后会再次调用,最终的布局在这里起作用。
此方法的调用在Storyboard布局后。
注意关掉AutoLayout
1.1 计算坐标
1> 两个按钮等宽
2> ImageView:
上下左右永远保持70, 50, 20, 20
3>三个小按钮(20x20), 永远保持在右下角：
// 当界面大小发生改变时(竖屏变横屏, 出现工具栏或各种bar....), 调用此方法。注意这个方法在运行之后就会调用，只是在界面发生变化后会再次调用。 -(void)viewDidLayoutSubviews{ [super viewDidLayoutSubviews]; // NSLog(@"11111"); CGRect frame = self.button1.frame; CGFloat buttonWidth = (self.view.bounds.size.width - 20 * 2 - 10) / 2; frame.size.width = buttonWidth; self.button1.frame = frame; frame.origin.x += buttonWidth + 10; self.button2.frame = frame; frame = CGRectZero; frame.origin = CGPointMake(20, 70); frame.size = CGSizeMake(self.view.bounds.size.width - 20 - 20, self.view.bounds.size.height - 70 - 50); self.imageView.frame = frame; frame.size = CGSizeMake(20, 20); frame.origin.x = self.view.bounds.size.width - 20 - 10 - 10 - 20 * 3; frame.origin.y = self.view.bounds.size.height - 20 - 20; self.btn1.frame = frame; frame.origin.x = self.view.bounds.size.width - 20 - 10 - 20 * 2; self.btn2.frame = frame; frame.origin.x = self.view.bounds.size.width - 20 - 20; self.btn3.frame = frame; NSLog(@"调用了viewDidLayoutSubviews方法"); }
1.2 各种Bar的影响
[MX2-Bar-Code]
从iOS7开始，任何一个VC类都拥有两个属性:
.topLayoutGuide
.bottomLayoutGuide
这两属性保存了VC上面和下面各种Bar所占用的空间。
这两属性都是遵守了UILayoutSupport协议的对象，此协议规定了一个属性:length, 用来表示Bar所占的空间。
一般的，这两属性用于VC渗透到上下各种Bar下面的情况下，计算Bar所占用的空间
可以在Xcode中设置VC不渗透到Bar下面去(在第四个检查器勾掉under bottom bars)。此时.topLayoutGuide和.bottomLayoutGuider的length都为0.
所以，不管VC是否渗透到Bar的下面，坐标上都加入这两属性是没错的。
补充:
可以设置VC属性：
.edgesForExtendedLayout = ….
来设置VC是否渗透到Bar下面
-(void)viewDidLayoutSubviews{ [super viewDidLayoutSubviews]; // 上下都不渗透延伸 self.edgesForExtendedLayout = UIRectEdgeNone; CGRect frame = self.button.frame; frame.origin.x = self.view.bounds.size.width - 20 - frame.size.width; frame.origin.y = 20;// 因为在该视图的第三个检查器设置关掉了使用top bars self.button.frame = frame; }
1.3 自己绘制的图形
当界面大小发生变化，自动绘制的图形也会有布局问题。
[MX3-Redraw]
view视图有一个属性:contentMode,这个属性决定着当view的大小改变时，做出什么反应。
默认是Scale To Fill 左右上下全拉伸
如果ImageView 一般会选择Aspect Fit /Aspect Fill
如果是自定义的绘制图形，应该设置成Redraw, 这样，当view大小发生改变时，会重绘图形。
// 设置该view的mode为Redraw，那么当界面发生变化时会重新调用这个进行重绘 - (void)drawRect:(CGRect)rect { // Drawing code CGContextRef context = UIGraphicsGetCurrentContext(); CGContextSaveGState(context); UIBezierPath *path = [UIBezierPath bezierPath]; [path moveToPoint:CGPointMake(40, 40)]; [path addLineToPoint:CGPointMake(120, 40)]; [path addLineToPoint:CGPointMake(40, 120)]; [path closePath]; [[UIColor redColor] setStroke]; [path stroke]; CGContextRestoreGState(context); }
2. 在View中进行代码布局
2.1 View类中有一个方法:layoutSubviews, 给view中所有子view布局。
当视图的大小改变时，以下三个方法会被自动依次调用
1> VC: viewWillLayoutSubviews
2> V: layoutSubviews
3> VC: viewDidLayoutSubviews
View:
drawRect: 绘制 setNeedsDisplay
layoutSubviews: 布局 setNeedsLayout
[MX4-ViewLayout] 自定义一个视图(Cell) 用代码进行布局
// 当界面大小改变时或setNeedsLayout调用此方法,这是手动布局,注意关掉自动布局 -(void)layoutSubviews{ [super layoutSubviews]; CGFloat x = self.downLoadedIcon.frame.origin.x; if (self.music.downloaded) { x += 20; } CGRect frame; if (self.music.highQuality) { frame = self.highQualityIcon.frame; frame.origin.x = x; self.highQualityIcon.frame = frame; x += 20; } frame = self.subLabel.frame; frame.origin.x = x; self.subLabel.frame = frame; }
3. Autoresizing
3.1 什么是Autoresizing
是老的布局技术，以前叫spring/struct布局
操作简单， 功能有限，现在依然有效
还可以和AutoLayout技术一起使用。
3.2 工作原理
根据父视图的变化，按父视图变化的比例改变子视图的大小，或者其他计算式来确定子视图的frame.
3.3 怎么用
[MX5-Autoresizing]
外边四条红线约束子视图离边界的间距
里边的两条线用来指示子视图是否可以随父视图的变化而伸缩
[MX6-Autoresizing]
3.4 和代码结合使用
如果Autoresizing技术无法满足需求时，可以用代码补充
3.5 用纯代码方式使用Autoresizing
每个视图都有一个属性：autoresizingMask, 用来描述Autoresizing的设置
- (void)viewDidLoad { [super viewDidLoad]; self.button.autoresizingMask = UIViewAutoresizingFlexibleLeftMargin | UIViewAutoresizingFlexibleBottomMargin | UIViewAutoresizingFlexibleWidth; }
附：
OC语言中的枚举定义常见用法:
typedef NS_OPTIONS(NSUInteger, UIViewAutoresizing) {
UIViewAutoresizingNone = 0, //0
UIViewAutoresizingFlexibleLeftMargin = 1 << 0, //1
UIViewAutoresizingFlexibleWidth = 1 << 1, //2
UIViewAutoresizingFlexibleRightMargin = 1 << 2, //4
UIViewAutoresizingFlexibleTopMargin = 1 << 3, //8
UIViewAutoresizingFlexibleHeight = 1 << 4, //16
UIViewAutoresizingFlexibleBottomMargin = 1 << 5 //32
};
1 << 1 :
0000 0001 << 1 : 0000 0010 (2)
1 << 2 :
0000 0001 << 2 : 0000 0100 (4)
UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleRightMargin | UIViewAutoresizingFlexibleHeight
0000 0010
0000 0100
0001 0000
-------------
0001 0110 6
作业:
1. 参考H01资源包， 实现播放界面，用代码布局
2. 图片涂鸦
参考PhotoDraw项目