storyBoard升级版 －在代码中使用约束

Posted 2020-06-29 Biaoac

我们除了在

storyBoard中可以把控件进行约束，在代码中我们同样可以对其进行约束，使得你的app不管是在什么设备中，他的界面设计都不会发生改变

 

   

  1 //
  2 //  ViewController.m
  3 //  自动布局代码版
  4 //
  5 //  Created by Biaoac on 16/3/26.
  6 //  Copyright © 2016年 scsys. All rights reserved.
  7 //
  8 
  9 #import "ViewController.h"
 10 
 11 @interface ViewController ()
 12 
 13 @end
 14 //  使用 storyBoard ID  找到控制器
 15 //    UIStoryboard *s = [UIStoryboard storyboardWithName:@"Main" bundle:[NSBundle mainBundle]];
 16 
 17 //    ViewController *vc = [s instantiateViewControllerWithIdentifier:@"ViewController"];
 18 
 19 /*
 20  //    使用storyboard 跳转页面   也可以用代码跳转
 21  //    右键拖拽 按钮  到另一个视图控制器  会弹出：
 22  1.show(push)
 23  2.present（模态）
 24  3.popover(ipad 弹出列表)
 25  */
 26 
 27 /*
 28  横向：距离父视图左侧100、视图本身的宽度最小时100距离父视图右侧是100
 29  竖向：距离父视图顶部是150、视图本身高度最小是30
 30  
 31  使用可视化格式语言：VFL ： Visual format language  描述
 32  
 33  H：表示的是水平方向，
 34  V：表示的是垂直方向；
 35  
 36  | ：表示父视图
 37  
 38  - :本身表示一段距离
 39  
 40  － 距离 － 表示制定距离
 41  
 42  [字符串表示的视图] 参照视图
 43  
 44  [字符串表示的视图(视图的宽高或者最小最大的宽高、相对宽高)]  注意；小括号千万不要丢掉
 45  
 46  使用代码自动布局(AutorlayOut)的时候 frame就会失效， ——》 不需要再去设置视图的Frame
 47  
 48  使用代码自动布局的时候  需要禁用 translatesAutoresizingMaskIntoConstraints ＝ No；
 49  
 50  使用自动布局的步骤：
 51  1、translatesAutoresizingMaskIntoConstraints ＝ No；
 52  2、绑定视图与字符串
 53  3、添加约束
 54  
 55  
 56  
 57  
 58  
 59  
 60  */
 61 
 62 @implementation ViewController
 63 
 64 - (void)viewDidLoad {
 65     [super viewDidLoad];
 66 //    [self demo1];
 67 //    [self demo2];
 68 //    [self demo3];
 69 //    [self demo4];
 70     [self demo5];
 71 }
 72 
 73 
 74 /**
 75  *  创建视图的方法
 76  *
 77  *  @param view  需要创建视图的类名 字符串
 78  *  @param sView 添加到的目标 父视图
 79  *
 80  *  @return 创建好 并且添加到父视图上的 视图
 81  */
 82 
 83 //在这里我们把创建视图的方法封装起来，在demo2.3、4、5、里使用
 84 - (UIView *)creatView:(NSString *)view addToView:(UIView *)sView{
 85     UIView *myView = [[NSClassFromString(view) alloc]init];
 86     myView.translatesAutoresizingMaskIntoConstraints = NO;
 87     [sView addSubview:myView];
 88     return myView;
 89 }
 90 
 91 //我们先按照正常的流程来一遍
 92 - (void)demo1{
 93     
 94     self.view.backgroundColor = [UIColor whiteColor];
 95     
 96     
 97     UIView *view = [[UIView alloc]init];
 98     view.backgroundColor = [UIColor orangeColor];
 99     [self.view addSubview:view];
100     
101     //    可视化语言：
102     //    1、禁用
103     view.translatesAutoresizingMaskIntoConstraints = NO;
104     //    2、绑定视图和字符串
105     NSDictionary *dic = NSDictionaryOfVariableBindings(view);
106     //    3、添加约束
107     /**
108      *
109      *    VisualFormat  VFL语句
110      *    Options：基于哪个方向去布局
111      *    metrics ：绑定数值(NSNumber)与字符串
112      *    views ： 绑定视图与字符串的
113      */
114     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:dic]];
115     //  H:|-100-[view(>=100)]-100-|
116     //  V:|-150-[view(40)]
117     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-150-[view(40)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:dic]];
118     
119     
120 
121 }
122 //然后我们在demo1的基础上又添加了一个View
123 - (void)demo2{
124     
125     UIView *view1 = [self creatView:@"UIView" addToView:self.view];
126     view1.backgroundColor = [UIColor redColor];
127     UIView *view2 = [self creatView:@"UIView" addToView:self.view];
128     view2.backgroundColor = [UIColor cyanColor];
129     //    2.绑定
130     NSDictionary *dic = NSDictionaryOfVariableBindings(view1,view2);
131     //    3.添加约束
132     
133     //view1:  //  H:|-100-[view1(>=100)]-100-|
134     //  V:|-150-[view1(40)]
135     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view1(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:dic]];
136     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-150-[view1(40)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:dic]];
137     //view2:   //   H:|-100-[view1(>=100)]-100-|
138     //   V:[view1]-50-[view2(view1)]
139     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view2(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:dic]];
140     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:[view1]-50-[view2(view1)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:dic]];
141     
142     
143     
144     
145 }
146 //研究发现： 两个视图竖向是有交集的  我们就做了一下优化
147 - (void)demo3{
148     
149 
150     UIView *view1 = [self creatView:@"UIView" addToView:self.view];
151     view1.backgroundColor = [UIColor redColor];
152     UIView *view2 = [self creatView:@"UIView" addToView:self.view];
153     view2.backgroundColor = [UIColor cyanColor];
154     //    2.绑定
155     NSDictionary *dic = NSDictionaryOfVariableBindings(view1,view2);
156     //    3.添加约束
157     
158     //view1:  //  H:|-100-[view1(>=100)]-100-|
159     //  V:|-150-[view1(40)]
160     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view1(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:dic]];
161     
162     //view2:   //   H:|-100-[view1(>=100)]-100-|
163     //   V:[view1]-50-[view2(view1)]
164     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-100-[view2(>=100)]-100-|" options:NSLayoutFormatAlignAllLeft metrics:nil views:dic]];
165     [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-150-[view1(40)]-50-[view2(view1)]" options:NSLayoutFormatAlignAllLeft metrics:nil views:dic]];
166     
167     
168 }
169 //继续优化，使代码变的更加清晰，
170 - (void)demo4{
171     
172     UIView *view1 = [self creatView:@"UIView" addToView:self.view];
173     view1.backgroundColor = [UIColor redColor];
174     UIView *view2 = [self creatView:@"UIView" addToView:self.view];
175     view2.backgroundColor = [UIColor cyanColor];
176     NSDictionary *dic = NSDictionaryOfVariableBindings(view1,view2);
177     //    /所有VFL语句的数组
178     NSArray *constriants = @[@"H:|-100-[view1(>=100)]-100-|",@"H:|-100-[view2(>=100)]-100-|",@"V:|-150-[view1(40)]-50-[view2(view1)]"];
179     for (int i=0; i<constriants.count; i++) {
180         [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:constriants[i] options:NSLayoutFormatAlignAllLeft metrics:nil views:dic]];
181     }
182     
183     
184 }
185 
186 //这次我们加上了 metrics  参数的使用   是用来绑定参数和字符串的方法 和绑定UIView是一样的
187 - (void)demo5{
188     UIView *view1 = [self creatView:@"UIView" addToView:self.view];
189     UIView *view2 = [self creatView:@"UIView" addToView:self.view];
190     UIView *view3 = [self creatView:@"UIView" addToView:self.view];
191     UIView *view4 = [self creatView:@"UIView" addToView:self.view];
192     NSDictionary *dic = NSDictionaryOfVariableBindings(view1,view2,view3,view4);
193     NSNumber *leftSpace = @100;
194     NSNumber *rightSpace = @100;
195     NSNumber *view1TopSpace = @150;
196     NSNumber *view1MinWidth = @100;
197     NSNumber *view1Hight = @40;
198     NSNumber *view2TopSpace = @50;
199     
200     NSDictionary *metrics = NSDictionaryOfVariableBindings(leftSpace,rightSpace,view1MinWidth,view1Hight,view1TopSpace,view2TopSpace);
201     
202     
203     NSArray *constraints = @[@"H:|-leftSpace-[view1(>=view1MinWidth)]-rightSpace-|",@"H:|-leftSpace-[view2(view1)]-rightSpace-|",@"V:|-view1TopSpace-[view1(view1Hight)]-view2TopSpace-[view2(view1)]"];
204     for (int i=0; i<constraints.count; i++) {
205         [self.view addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:constraints[i] options:NSLayoutFormatAlignAllLeft metrics:metrics views:dic]];
206     }
207     
208     
209 }
210 
211 
212 
213 
214 - (void)didReceiveMemoryWarning {
215     [super didReceiveMemoryWarning];
216     // Dispose of any resources that can be recreated.
217 }
218 
219 
220 @end

 

   本人觉得代码中的注释还是很详细的，就不多嘴了，运行的结果如下；（看见没有，我就说没有影响吧）