CPAutoLayout 0.8.0
- 由
- Sung Ahn Kim
- ccoroom
CPAutoLayout是一个基于位置的AutoLayout简写。它专注于AutoLayout的常见用法。使用位置和相关尺寸描述AutoLayout约束非常容易。
用法
想象一个简单的示例，您想让一个大小为100x100的视图适应superview的右上方角落。
使用'NSLayoutConstraint'或视觉格式语言（VFL）进行这项工作非常繁琐。
即使是使用Masonry，边缘的比较也完全是你自己的工作。
[view mas_makeConstraints:^(MASConstraintMaker *make) {
// edge to edge match
make.top.equalTo(self.view.mas_top);
make.right.equalTo(self.view.mas_right);
make.width.equalTo(@(100));
make.height.equalTo(@(100));
}];使用'CPAutoLayout'，您只需要考虑位置和尺寸。
[view makeConstraints:^(CPConstraintsBuilder *builder) {
builder.position(CPPositionCenter).aligned(CPAlignmentTop|CPAlignmentRight);
builder.size.equalTo(CGSizeMake(100, 100));
}];已经有大量示例可供使用。要运行示例项目，克隆仓库，然后从示例目录打开项目。
位置 & 对齐
位置
// positioned center of its superview
UIView *centerView = [[UIView alloc] init];
centerView.backgroundColor = [UIColor firstColor];
[self.view addSubview:centerView];
[centerView makeConstraints:^(CPConstraintsBuilder *builder) {
builder.position(CPPositionCenter);
builder.size.equalTo(CGSizeMake(100, 100));
}];
// positioned right of centerView
UIView *rightView = [[UIView alloc] init];
rightView.backgroundColor = [UIColor secondColor];
[self.view addSubview:rightView];
[rightView makeConstraints:^(CPConstraintsBuilder *builder) {
builder.position(CPPositionRight).toItem(centerView);
builder.size.equalTo(CGSizeMake(100, 100));
}];
// positioned bottom of centerView with distance.
UIView *bottomView = [[UIView alloc] init];
bottomView.backgroundColor = [UIColor secondColor];
[self.view addSubview:bottomView];
[bottomView makeConstraints:^(CPConstraintsBuilder *builder) {
builder.position(CPPositionBottom).toItem(centerView).withOffsetY(10);
builder.size.equalTo(CGSizeMake(100, 100));
}];对齐
// positioned inside of its superview and top-left aligned
UIView *centerView = [[UIView alloc] init];
centerView.backgroundColor = [UIColor firstColor];
[self.view addSubview:centerView];
[centerView makeConstraints:^(CPConstraintsBuilder *builder) {
builder.position(CPPositionCenter).aligned(CPAlignmentTop|CPAlignmentLeft);
builder.size.equalTo(CGSizeMake(100, 100));
}];
// positioned right of centerView and top aligned
UIView *rightView = [[UIView alloc] init];
rightView.backgroundColor = [UIColor secondColor];
[self.view addSubview:rightView];
[rightView makeConstraints:^(CPConstraintsBuilder *builder) {
builder.position(CPPositionRight).aligned(CPAlignmentTop).toItem(centerView);
builder.size.equalTo(CGSizeMake(50, 50));
}];
// positioned bottom of centerView and left aligned with offset .
UIView *bottomView = [[UIView alloc] init];
bottomView.backgroundColor = [UIColor secondColor];
[self.view addSubview:bottomView];
[bottomView makeConstraints:^(CPConstraintsBuilder *builder) {
builder.position(CPPositionBottom).aligned(CPAlignmentLeft).toItem(centerView).withOffset(CGPointMake(5, 5));
builder.size.equalTo(CGSizeMake(50, 50));
}];位置 - 进阶
// positioned right of centerView and bottom of rightView.
UIView *bottomView = [[UIView alloc] init];
bottomView.backgroundColor = [UIColor secondColor];
[self.view addSubview:bottomView];
[bottomView makeConstraints:^(CPConstraintsBuilder *builder) {
builder.horizontal(CPPositionRight).toItem(centerView);
builder.vertical(CPPositionBottom).toItem(rightView);
builder.size.equalTo(CGSizeMake(50, 50));
}];尺寸
固定尺寸
// 100x100
[centerView makeConstraints:^(CPConstraintsBuilder *builder) {
builder.position(CPPositionCenter);
builder.size.equalTo(CGSizeMake(100, 100));
}];// 100x100
[centerView makeConstraints:^(CPConstraintsBuilder *builder) {
builder.position(CPPositionCenter);
builder.width.equalTo(100);
builder.height.equalTo(100);
}];相对尺寸
// == size of centerView
UIView *rightView = [[UIView alloc] init];
rightView.backgroundColor = [UIColor secondColor];
[self.view addSubview:rightView];
[rightView makeConstraints:^(CPConstraintsBuilder *builder) {
builder.position(CPPositionRight).toItem(centerView).withOffsetX(10);
builder.size.equalToItem(centerView);
}];
// width == width of centerView, height == 50
UIView *bottomView = [[UIView alloc] init];
bottomView.backgroundColor = [UIColor secondColor];
[self.view addSubview:bottomView];
[bottomView makeConstraints:^(CPConstraintsBuilder *builder) {
builder.position(CPPositionBottom).toItem(centerView).withOffsetY(10);
builder.width.equalToItem(centerView);
builder.height.equalTo(50);
}];
// == size of centerView * 0.7
UIView *leftView = [[UIView alloc] init];
leftView.backgroundColor = [UIColor secondColor];
[self.view addSubview:leftView];
[leftView makeConstraints:^(CPConstraintsBuilder *builder) {
builder.position(CPPositionLeft).toItem(centerView).withOffsetX(10);
builder.size.equalToItem(centerView).multipliedBy(0.7);
}];宽高比
// 1:0.5
UIView *centerView = [[UIView alloc] init];
centerView.backgroundColor = [UIColor firstColor];
[self.view addSubview:centerView];
[centerView makeConstraints:^(CPConstraintsBuilder *builder) {
builder.position(CPPositionCenter);
builder.width.equalTo(100);
builder.height.aspectRatio(0.5);
}];
self.centerView = centerView;
// 0.7:1
UIView *rightView = [[UIView alloc] init];
rightView.backgroundColor = [UIColor secondColor];
[self.view addSubview:rightView];
[rightView makeConstraints:^(CPConstraintsBuilder *builder) {
builder.position(CPPositionCenter).withOffsetY(-100);
builder.width.aspectRatio(0.7);
builder.height.equalToItem(centerView);
}];更新约束
更新位置约束。保留其他约束。
[self.centerView updateConstraints:^(CPConstraintsBuilder *builder) {
builder.vertical(CPPositionCenter); // horizontal position is derived from its previous position.
}];更新尺寸约束。保留其他约束。
[self.centerView updateConstraints:^(CPConstraintsBuilder *builder) {
builder.width.equalTo(100); // height is derived from its previous size.
}];动画
在动画块内部调用'layoutIfNeeded'来动画化约束更新。
[UIView animateWithDuration:0.5 animations:^{
[self.centerView updateConstraints:^(CPConstraintsBuilder *builder) {
builder.position(CPPositionCenter);
}];
[self.view layoutIfNeeded];
}];安装
CPAutoLayout可在CocoaPods上使用。只需将以下内容添加到您的项目的Podfile中
pod 'CPAutoLayout'
作者
Sung Ahn Kim，[email protected]
许可证
CPAutoLayout可在MIT许可证下使用。有关更多信息，请参阅LICENSE文件。