自动布局
对齐矩形
自动布局系统为视图定义了一个新的矩形区域，可以称之为对齐矩形，它提供了若干布局属性，如下图所示：
这里写图片描述
iOS设备的屏幕尺寸
| 设备 | 屏幕尺寸 | 分辨率 | 坐标点 |
|---|---|---|---|
| iPhone 3和3s | 3.5英寸 | 320*480 | 320*480 |
| iPhone 4和4s(支持Retina) | 3.5英寸 | 640*960 | 320*480 |
| iPhone 5和5s(支持Retina) | 4英寸 | 640*1136 | 320*568 |
| iPhone 6 | 4.7英寸 | 750*1334 | 375*667 |
| iPhone 6 Plus | 5.5英寸 | 1080*1920 | 414*736 |
| iPad 1和2(不支持Retina) | 9.7英寸 | 768*1024 | 768*1024 |
| iPad 3和4(支持Retina) | 9.7英寸 | 1536*2048 | 768*1024 |
| iPad Air | 9.7英寸 | 1536*2048 | 768*1024 |
| iPad Mini(不支持Retina) | 7.9英寸 | 768*1024 | 768*1024 |
| iPad Mini2(支持Retina) | 7.9英寸 | 1536*2048 | 768*1024 |
xib
- 右下角有三个图标
- 第1个可以设置各种对齐居中，不认识英文可以看图标。
- 第2个可以设置本身的宽高要选中，距离主视图的x，y轴要去掉去掉边框。
- 第3个有很多警告要修复全部可以用update Frames。
注意设置约束条件以后是否显示约束条件有那么多个，如果少了可能是选择了但是虚线没有变实需要点击变成实线
-
也可以自即拖动选择，比方说一个视图是另一个视图的的多少倍，就可以拖动选择宽高
-
单元格中关联xib示例
// 创建视图的时候就写
// 注册单元格 通过xib方式 nib是xib编译后的二进制数据
[单元格名称 registerNib:[UINib nibWithNibName:@"xib名称" bundle:nil] forCellReuseIdentifier:@"复用单元格标识"];
// 创建单元格的时候写
AppListCell *cell = [tableView dequeueReusableCellWithIdentifier:@"复用单元格标识" forIndexPath:indexPath];
代码实现
在苹果引入自动布局以前，iOS开发很多地方都使用了自动缩放掩码来适配屏幕，这种做法不能说很糟糕，但始终显得不尽如人意，也比较的笨拙。在默认情况下，视图会将自动缩放掩码转换为对应的约束，这类约束会和手动添加的约束产生冲突，通常需要将视图的translatesAutoresizingMaskIntoConstraints属性设置为NO来避免。
苹果官方提供了一种视觉格式化语言(VFL)来通过代码为视图添加约束。我们用例子来加以说明。
示例1:苹果原生示例
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor blueColor];
UIView *view2 = [[UIView alloc] init];
view2.translatesAutoresizingMaskIntoConstraints = NO;
view2.backgroundColor = [UIColor yellowColor];
[self.view addSubview:view1];
[self.view addSubview:view2];
NSDictionary *views = @{@"view1":view1, @"view2":view2};
NSArray *hConstraints = [NSLayoutConstraint constraintsWithVisualFormat:@"H:|-20-[view1(==120)]-10-[view2]-20-|" options:0 metrics:nil views:views];
NSArray *vConstraints1 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-200-[view1]-100-|" options:0 metrics:nil views:views];
NSArray *vConstraints2 = [NSLayoutConstraint constraintsWithVisualFormat:@"V:|-200-[view2]-120-|" options:0 metrics:nil views:views];
[self.view addConstraints:hConstraints];
[self.view addConstraints:vConstraints1];
[self.view addConstraints:vConstraints2];
}
@end
示例2:第三方库Masonry简单示例
可以使用第三方库Masonry来简化基于代码的自动布局。由于Masonry使用了函数式编程风格，因此代码书写会相对简单。
#import "ViewController.h"
#import "Masonry.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIView *superview = self.view;
UIView *view1 = [[UIView alloc] init];
view1.translatesAutoresizingMaskIntoConstraints = NO;
view1.backgroundColor = [UIColor greenColor];
[superview addSubview:view1];
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview.mas_top).with.offset(50);
make.left.equalTo(superview.mas_left).with.offset(50);
make.width.mas_equalTo(200).height.mas_equalTo(200);
}];
}
@end
示例3:第三方库Masonry混合示例
不可编译
#import "SubjectAppView.h"
#import "StarView.h"
@implementation SubjectAppView
{
UIImageView *_appImageView;
UILabel *_appNameLabel;
UILabel *_commentLabel;
UILabel *_downloadLabel;
StarView *_starView;
}
-(instancetype)init
{
if (self = [super init]) {
[self createViews];
}
return self;
}
-(instancetype) initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame]) {
[self createViews];
}
return self;
}
-(instancetype)initWithCoder:(NSCoder *)aDecoder
{
self = [super initWithCoder:aDecoder];
if (self) {
[self createViews];
}
return self;
}
// 创建视图
// 1.使用代码实现AutoLayout 需要将视图作为某个视图的子视图
// 2.将translatesAutoresizingMaskIntoConstraints设为NO
-(void) createViews
{
_appImageView = [[UIImageView alloc] init];
[self addSubview:_appImageView];
_appNameLabel = [[UILabel alloc] init];
[self addSubview:_appNameLabel];
_commentLabel = [[UILabel alloc] init];
[self addSubview:_commentLabel];
_downloadLabel = [[UILabel alloc] init];
[self addSubview:_downloadLabel];
_starView = [[StarView alloc] init];
[self addSubview:_starView];
// 将所有视图的关闭停靠模式
// 自动缩放掩码（translatesAutoresizingMaskIntoConstraints）默认为YES
for (UIView *view in self.subviews) {
view.translatesAutoresizingMaskIntoConstraints = NO;
}
// 重新建立拘束
// _appImageView mas_remakeConstraints:
// 建立约束 通过mas_makeConstraints建立约束
[_appImageView mas_makeConstraints:^(MASConstraintMaker *make) {
// make表示当前视图的约束
// 左 上 底部和父视图间距为3
make.left.top.bottom.equalTo(self).offset(3);
// 宽度和高度相等
make.width.equalTo(_appImageView.mas_height);
}];
[_appNameLabel mas_makeConstraints:^(MASConstraintMaker *make) {
// 顶部对齐
make.top.equalTo(_appImageView.mas_top);
// 水平间距为5
make.left.equalTo(_appImageView.mas_right).offset(5);
}];
[_commentLabel mas_makeConstraints:^(MASConstraintMaker *make) {
// 左对齐
make.left.equalTo(_appNameLabel.mas_left);
// 中心点Y相等
make.centerY.equalTo(_appImageView.mas_centerY);
}];
[_downloadLabel mas_makeConstraints:^(MASConstraintMaker *make) {
// 同一水平线
make.centerY.equalTo(_appImageView.mas_centerY);
// 注意视图谁在前 谁在后
make.right.equalTo(self.mas_right).offset(-10);
}];
[_starView mas_makeConstraints:^(MASConstraintMaker *make) {
// 左对齐
make.left.equalTo(_appNameLabel.mas_left);
// 底部对齐
make.bottom.equalTo(_appImageView.mas_bottom);
// 设置确定的高度和宽度 是对象加@
make.width.equalTo(@65);
make.height.equalTo(@23);
}];
}
网友评论