ios 代码 自动布局(一）

环境：xcode5.0+ios7.0 

自动布局场景说明：1张背景图片+5张图片 自动布局 代码编写；

参考：http://www.2cto.com/kf/201403/282699.html

自动布局关键代码说明：

| 屏幕的边框

-10- 10个点的间距

[_view2] 需要布局的控件,这里的_view2必须和上边用来生成词典的标识符完全相同

[_view1(==_view2)] _view1的作用和上边完全相同,而()里面的则是限定条件,可以是==某一个空间,或者一个固定的数值,当然,除了==之外还可以使用>=或者<=;

字符串中的每个部分都解释清楚后,那么就容易理解多了~这句话完整的意思整理出来就是:

两个宽度相同的view,其间距是10个点,距离左右边框的距离也是10个点

V:|-30-[_view1(<=200)]-10-[_view3]-10-|

V: 代表的是垂直方向上的布局规则

简单解释一下,view1的高度不能大于200点,距离上边框30个点,与view3的间距是10个点,view3与底边框的距离是10个点

主要代码如下：

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    
    UIImageView *bgImage=[[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)];
    bgImage.image=[UIImage imageNamed:@"bg.png"];
    bgImage.translatesAutoresizingMaskIntoConstraints = NO;
    NSDictionary *viewsbg = NSDictionaryOfVariableBindings(self.view,bgImage);
    
    [self.view addSubview:bgImage];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-0-[bgImage]-0-|" options:0 metrics:0 views:viewsbg]];
    //    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-0-[bgImage]-0-|" options:0 metrics:0 views:viewsbg]];
    [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-0-[bgImage]-0-|" options:0 metrics:0 views:viewsbg]];
    
    UIImage *img1=[UIImage imageNamed:@"st01_01.png"];
    UIImageView *image1=[[UIImageView alloc] initWithFrame:CGRectMake(12, 80, img1.size.width, img1.size.height)];
    image1.image=img1;
    image1.translatesAutoresizingMaskIntoConstraints = NO;
    [bgImage addSubview:image1];
    
    UIImage *img2=[UIImage imageNamed:@"st01_02.png"];
    UIImageView *image2=[[UIImageView alloc] initWithFrame:CGRectMake(168, 80, img2.size.width, img2.size.height)];
    image2.image=img2;
    image2.translatesAutoresizingMaskIntoConstraints = NO;
    [bgImage addSubview:image2];
    
    UIImage *img3=[UIImage imageNamed:@"st01_03.png"];
    UIImageView *image3=[[UIImageView alloc] initWithFrame:CGRectMake(12, 225, img3.size.width, img3.size.height)];
    image3.image=img3;
    image3.translatesAutoresizingMaskIntoConstraints = NO;
    [bgImage addSubview:image3];
    
    UIImage *img4=[UIImage imageNamed:@"st01_04.png"];
    UIImageView *image4=[[UIImageView alloc] initWithFrame:CGRectMake(168, 225, img4.size.width, img4.size.height)];
    image4.image=img4;
    image4.translatesAutoresizingMaskIntoConstraints = NO;
    [bgImage addSubview:image4];
    
    UIImage *img5=[UIImage imageNamed:@"st01_05.png"];
    UIImageView *image5=[[UIImageView alloc] initWithFrame:CGRectMake(0, 360, img5.size.width, img5.size.height)];
    image5.image=img5;
    image5.translatesAutoresizingMaskIntoConstraints = NO;
    [bgImage addSubview:image5];
    
    
    NSDictionary *views = NSDictionaryOfVariableBindings(bgImage,image1,image2,image3,image4,image5);
    
    [bgImage addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-12-[image1(==image2)]-15-[image2]-12-|" options:0 metrics:0 views:views]];
    [bgImage addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-12-[image3(==image4)]-15-[image4]-12-|" options:0 metrics:0 views:views]];
    [bgImage addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-74-[image1(==image3)]-10-[image3]-10-[image5]-6-|" options:0 metrics:0 views:views]];
    [bgImage addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-74-[image2(==image4)]-10-[image4]-10-[image5]-6-|" options:0 metrics:0 views:views]];
//    [bgImage addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|--[image3(<=200)]-10-[image5]-10-|" options:0 metrics:0 views:views]];
//    [bgImage addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-10-[image4(<=200)]-10-[image5]-10-|" options:0 metrics:0 views:views]];
//    [bgImage addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|-0-[image5]-0-|" options:0 metrics:0 views:views]];
//    [bgImage addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[image5(>=150)]-10-|" options:0 metrics:0 views:views]];
    
    
}

如下红色字体未添加时 图片如下，整体下移

添加后的如下

下载资源 ： 下载