iOS学习笔记03——以编码的方式实现Auto Layout自动布局(二)
2014-10-08 14:51
429 查看
在上一篇文章iOS学习笔记02——以编码的方式实现Auto Layout自动布局(一)中我们简单的介绍了使用Visual
Format Language创建布局约束来实现自动布局,这种方法创建的布局约束能够满足大部分的布局的需求。但是想要实现类似于这样的约束:button.width = 2 * button.height就不能满足要求了,这一篇我们我们简单介绍一下如何创建这样的布局约束。
Apple就是非常贴心,它为我们提供了另外一个方法创建类似于view1.attr1 = view2.attr2 * multiplier + constant这样的约束,方法如下:
[cpp] view
plaincopy
+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
下面我们用这种方法创建一个布局约束,实现一个按钮button的布局,button距离父视图的左侧60点,距离顶部30点,其中宽度W = 2 * H + 10。效果图如下
不多说,上代码
[cpp] view
plaincopy
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
self.edgesForExtendedLayout = UIRectEdgeNone;
UIButton * button = [UIButton buttonWithType:UIButtonTypeSystem];
button.layer.borderColor = [UIColor blackColor].CGColor;
button.layer.borderWidth = 2.0;
[button setTitle:@"W=2*H" forState:UIControlStateNormal];
[self.view addSubview:button];
[button setTranslatesAutoresizingMaskIntoConstraints:NO];
NSMutableArray * tempConstraints = [NSMutableArray array];
[tempConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-60-[button]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button)]];
[tempConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[button(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button)]];
[self.view addConstraints:tempConstraints];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:button attribute:NSLayoutAttributeHeight multiplier:2.0 constant:10.0]];
}
Format Language创建布局约束来实现自动布局,这种方法创建的布局约束能够满足大部分的布局的需求。但是想要实现类似于这样的约束:button.width = 2 * button.height就不能满足要求了,这一篇我们我们简单介绍一下如何创建这样的布局约束。
Apple就是非常贴心,它为我们提供了另外一个方法创建类似于view1.attr1 = view2.attr2 * multiplier + constant这样的约束,方法如下:
[cpp] view
plaincopy
+(id)constraintWithItem:(id)view1 attribute:(NSLayoutAttribute)attr1 relatedBy:(NSLayoutRelation)relation toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c;
下面我们用这种方法创建一个布局约束,实现一个按钮button的布局,button距离父视图的左侧60点,距离顶部30点,其中宽度W = 2 * H + 10。效果图如下
不多说,上代码
[cpp] view
plaincopy
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view.
self.edgesForExtendedLayout = UIRectEdgeNone;
UIButton * button = [UIButton buttonWithType:UIButtonTypeSystem];
button.layer.borderColor = [UIColor blackColor].CGColor;
button.layer.borderWidth = 2.0;
[button setTitle:@"W=2*H" forState:UIControlStateNormal];
[self.view addSubview:button];
[button setTranslatesAutoresizingMaskIntoConstraints:NO];
NSMutableArray * tempConstraints = [NSMutableArray array];
[tempConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-60-[button]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button)]];
[tempConstraints addObjectsFromArray:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-30-[button(==30)]" options:0 metrics:nil views:NSDictionaryOfVariableBindings(button)]];
[self.view addConstraints:tempConstraints];
[self.view addConstraint:[NSLayoutConstraint constraintWithItem:button attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:button attribute:NSLayoutAttributeHeight multiplier:2.0 constant:10.0]];
}
相关文章推荐
- iOS学习笔记03——以编码的方式实现Auto Layout自动布局(二)
- iOS学习笔记03——以编码的方式实现Auto Layout自动布局(二)
- Auto Layout简单应用——以编码的方式实现Auto Layout自动布局(一)
- iOSLearningDiary以编码的方式实现Auto Layout自动布局
- 以编码的方式实现Auto Layout自动布局(一)
- 以编码的方式实现Auto Layout自动布局(二)
- 以编码的方式实现Auto Layout自动布局(二)
- iOS学习笔记02——以编码的方式实现Auto Layout自动布局(一)
- Auto Layout简单应用——以编码的方式实现Auto Layout自动布局(二)
- iOS学习笔记02——以编码的方式实现Auto Layout自动布局(一)
- iOS学习笔记02——以编码的方式实现Auto Layout自动布局(一)
- iOS学习笔记02——以编码的方式实现Auto Layout自动布局(一)
- 以编码的方式实现Auto Layout自动布局(一)
- 以编码的方式实现Auto Layout自动布局
- 手写代码自动实现自动布局,即Auto Layout的使用
- APP页面的三种基本实现方式:storyboard,xib,代码实现 与自动布局
- AutoLayout和Masonry两种方式实现自动布局的内容包裹和视图均分
- IOS 仿某某获取验证码方式,xib+自动布局实现
- 通过编码方式实现软件的布局
- ScrollView自动布局的实现方式