iOS中界面的布局设置
iOS定位
以屏幕的左上角为原点,向右为x轴,向下为y轴。用了三个结构体来表示一个UIView的形状大小及位置,属性名为frame。CGRect(origin, size),其中origin为CGPoint,size为CGRect。
定位方式
以往在iOS中的定位方式有AutoResizing,但这种方式只能在上下级的views的关系中进行定位。为了能在同一级的view中也能定位,在iOS6之后引入了新的定位方式AutoLayout,现在的iOS工程中使用的都是AutoLayout布局方式。
AutoLayout
使用方式有两种:一种在storyboard里使用拖拽实现,另一种是在代码里实现。
1:按住ctrl键,把一个view1拖到另一个view2上,便可设定相对于view2的自动布局。
AutoLayout约束设定界面
2:代码的方式添加。
- (void)viewDidLoad {
[super viewDidLoad];
self.title = @"使用 AutoLayout 的方式";
UIView *purpleView = [[UIView alloc] init];
purpleView.backgroundColor = [UIColor purpleColor];
// 禁止将 AutoresizingMask 转换为 Constraints
purpleView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:purpleView];
// 添加 width 约束
NSLayoutConstraint *widthConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:150];
[purpleView addConstraint:widthConstraint];
// 添加 height 约束
NSLayoutConstraint *heightConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0.0 constant:150];
[purpleView addConstraint:heightConstraint];
// 添加 left 约束
NSLayoutConstraint *leftConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:100];
[self.view addConstraint:leftConstraint];
// 添加 top 约束
NSLayoutConstraint *topConstraint = [NSLayoutConstraint constraintWithItem:purpleView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:200];
[self.view addConstraint:topConstraint];
}
由此可见,如果全部用代码来添加约束,会产生大量的约束代码,view中各个部件之间的关系就很难看清楚,相对来说,用storyboard中的方式添加约束,使得项目中各个部件之间的关系更加清晰,方便程序员及时的修改及查看效果。
常用的AutoLayout设置面板
Align:
Align
Pin:
Pin
Resize:
Resize
如果有多个UIView组件需要放在一块进行管理,可以将他们embed成一个stackview进行布局。同时在stackview里面也可以设置详细的参数来控制布局的规划。
stackview
stackview 设置
参考文章
[1]AutoLayout的那些事儿,http://www.cocoachina.com/ios/20160616/16732.html
[2]史上比较用心的纯代码实现 AutoLayout,http://www.cocoachina.com/ios/20160616/16732.html