autolayout自动布局代码敲写

绝地灬酷狼 2022-08-04 14:47 74阅读 0赞

自从苹果出了6之后，适配成了一个重要的问题。幸好苹果提供了autolayout让我们使用，在这里我来说一下autolayout用代码敲的情况。（关于xib适配，大家自己实地的用一下应该都可以理解）

我直接上代码，我一直认为实践是最能出结果的一种做法。

这是我需要的效果：

![Center][]

首先我先把最顶上的图片适配：

\#import "ViewController.h"

@interface ViewController ()

@property(nonatomic,weak)UIImageView \*imageView;//图片

@end

@implementation ViewController

\- (void)viewDidLoad \{

\[superviewDidLoad\];

self.view.backgroundColor=\[UIColorgrayColor\];

//图片的加载

\[selfloadImage\];

//加载中间label

\[selfloadLabel1\];

\-(void)loadImage

UIImageView \*imageView=\[\[UIImageView alloc\]init\];

imageView.image=\[UIImage imageNamed:@"1.jpg"\];

\[self.view addSubview:imageView\];

self.imageView=imageView;

//自动布局

\[self.imageViewsetTranslatesAutoresizingMaskIntoConstraints:NO\];

//left

NSLayoutConstraint \*con1 = \[NSLayoutConstraintconstraintWithItem:self.imageViewattribute:NSLayoutAttributeLeftrelatedBy:NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeLeftmultiplier:1.0fconstant:40.0f\];

\[self.view addConstraint:con1\];

//right

NSLayoutConstraint \*con2 = \[NSLayoutConstraintconstraintWithItem:self.imageViewattribute:NSLayoutAttributeRightrelatedBy:NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeRightmultiplier:1.0fconstant:-40.0f\];

\[self.view addConstraint:con2\];

//top

NSLayoutConstraint \*con3 = \[NSLayoutConstraintconstraintWithItem:self.imageViewattribute:NSLayoutAttributeToprelatedBy: NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeTopmultiplier:1.0fconstant:0.0f\];

\[self.view addConstraint:con3\];

//height

NSLayoutConstraint \*con4 = \[NSLayoutConstraintconstraintWithItem:self.imageViewattribute:NSLayoutAttributeHeightrelatedBy:NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeHeightmultiplier:0.5fconstant:0.0f\];

\[self.view addConstraint:con4\];

做到这，图片的适配已经做好了。就是左右与底层的仕途＝＝视图都是40的间距，顶部与底层视图顶部相等。

然后把底下的两个label适配

\-(void)loadLabel1

UILabel \*label=\[\[UILabel alloc\]init\];

label.text=@"现在我为大家朗诵一首诗，这首诗的名字叫做“现在我为大家朗诵一首诗，这首诗的名字叫做。。。。。”";

label.numberOfLines=0;

label.backgroundColor=\[UIColorredColor\];

\[self.view addSubview:label\];

//自动布局

\[label setTranslatesAutoresizingMaskIntoConstraints:NO\];

//left

NSLayoutConstraint \*con1 = \[NSLayoutConstraintconstraintWithItem:label attribute:NSLayoutAttributeLeftrelatedBy:NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeLeftmultiplier:1.0fconstant:0.0f\];

\[self.view addConstraint:con1\];

//right

NSLayoutConstraint \*con2 = \[NSLayoutConstraintconstraintWithItem:label attribute:NSLayoutAttributeRightrelatedBy:NSLayoutRelationEqualtoItem:self.viewattribute:NSLayoutAttributeRightmultiplier:1.0fconstant:0.0f\];

\[self.view addConstraint:con2\];

//top

NSLayoutConstraint \*con3 = \[NSLayoutConstraintconstraintWithItem:label attribute:NSLayoutAttributeToprelatedBy:NSLayoutRelationEqualtoItem:self.imageViewattribute:NSLayoutAttributeBottommultiplier:1.0fconstant:0.0f\];

\[self.view addConstraint:con3\];

//第二个label

UILabel \*label2 = \[\[UILabel alloc\]init\];

label2.text=@"锄禾日当午，旱地里下午。谁知盘中餐，粒粒皆辛苦。锄禾日当午，旱地里下午。谁知盘中餐，粒粒皆辛苦。锄禾日当午，旱地里下午。谁知盘中餐，粒粒皆辛苦。锄禾日当午，旱地里下午。谁知盘中餐，粒粒皆辛苦。锄禾日当午";

label2.backgroundColor=\[UIColorpurpleColor\];

label2.numberOfLines=0;

\[self.view addSubview:label2\];

//自动布局

\[label2 setTranslatesAutoresizingMaskIntoConstraints:NO\];

//left

NSLayoutConstraint \*con4 = \[NSLayoutConstraintconstraintWithItem:label2 attribute:NSLayoutAttributeLeftrelatedBy:NSLayoutRelationEqualtoItem:label attribute:NSLayoutAttributeLeftmultiplier:1.0fconstant:0.0f\];

//\[self.view addConstraint:con4\];

//right

NSLayoutConstraint \*con5 = \[NSLayoutConstraintconstraintWithItem:label2 attribute:NSLayoutAttributeRightrelatedBy:NSLayoutRelationEqualtoItem:label attribute:NSLayoutAttributeRightmultiplier:1.0fconstant:0.0f\];

//\[self.view addConstraint:con5\];

//top

NSLayoutConstraint \*con6 = \[NSLayoutConstraintconstraintWithItem:label2 attribute:NSLayoutAttributeToprelatedBy:NSLayoutRelationEqualtoItem:label attribute:NSLayoutAttributeBottommultiplier:1.0fconstant:0.0f\];

//\[self.view addConstraint:con6\];

//    NSLayoutConstraint \*con7 = \[NSLayoutConstraint constraintWithItem:label2 attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeBottom multiplier:1.0f constant:0.0f\];

con4.active=YES;

con5.active=YES;

con6.active=YES;

这里需要说一下，两个label我都没有给他高度，是让他自适应高度的。你也可以给他高度，但是如果内容不够的话，他会 把内容居中显示。

这是一个完成的适配代码，可以直接运行，你可以试试。

[Center]: /images/20220731/62e399369e584d2fab3b40e64aebc752.png