15-UIKit（view布局、Autoresizing）

目录：

1. 纯代码布局

2. 在View中进行代码布局

3. Autoresizing

回到顶部

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 -  *  - ) / ;

    frame.size.width = buttonWidth;

    self.button1.frame = frame;

    frame.origin.x += buttonWidth + ;

    self.button2.frame = frame;

    frame = CGRectZero;

    frame.origin = CGPointMake(, );

    frame.size = CGSizeMake(self.view.bounds.size.width -  - , self.view.bounds.size.height -  - );

    self.imageView.frame = frame;

    frame.size = CGSizeMake(, );

    frame.origin.x = self.view.bounds.size.width -  -  -   -  * ;

    frame.origin.y = self.view.bounds.size.height -  - ;

    self.btn1.frame = frame;

    frame.origin.x = self.view.bounds.size.width -  -  -  * ;

    self.btn2.frame = frame;

    frame.origin.x = self.view.bounds.size.width -  - ;

    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 -  - frame.size.width;

    frame.origin.y = ;// 因为在该视图的第三个检查器设置关掉了使用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(, )];

    [path addLineToPoint:CGPointMake(, )];

    [path addLineToPoint:CGPointMake(, )];

    [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 += ;
    }
    CGRect frame;
    if (self.music.highQuality) {
        frame = self.highQualityIcon.frame;
        frame.origin.x = x;
        self.highQualityIcon.frame = frame;
        x += ;
    }
    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项目