iOS开发之绝对布局和相对布局

1、1iOSiOS 开发之绝对布局和相对布局开发之绝对布局和相对布局之前如果做过 Web 前端页面的小伙伴们，看到绝对定位和相对定位并不陌生，并且使用起来也挺方便。在 IOS 的 UI 设计中也有绝对定位和相对定位，和我们的 web 前端的绝对定位和相对定位有所不同但又有相似之处。下面会结合两个小 demo 来学习一下我们 IOS 开发中 UI 的绝对定位和相对定位。 在前面所用到的 UI 事例用的全是绝对定位，用我们 Storyboard 拖拽出来的控件全是绝对定位的， 就是我们可以同改变组件的 frame 来改变组件的位置和大小。 而相对定位则不同，相对定位是参考组件周围的元素来确定组件的大小

2、或位置，相对定位即约束和周围组件的距离来布局的，即 layoutConstraint. 在布局中 LayoutConstraint 和 Fram 布局方式是不能并存的。上面说了这么多了，可能说的不太明白，还是那句话，怎么能少的了代码和实例的支持呢， 下面会通过屏幕适配的事例来用绝对布局和相对布局同时实现下面的描述效果。我们要实现的效果：当上面的 view 的大小及位置改变时，为了不覆盖掉下面的view,我们同时要改变下 view 的位置。 或者说在我们 4.0 寸正常显示的内容，在 3.5 寸屏上也能正常显示， 即通常我们所说的屏幕的适配。 为了便于观察效果，我们可以用 Slider 控件来动

3、态的改变上面 view 的大小，观察下面 view 的位置变化，下面是我们要实现的效果图：21.用绝对布局来实现上述效果，为了节省我们代码编写的时间，上面的控件是通过 storyborad 来实现的， 然后在对应的 ViewController 里添加组件和控件回调的方法，主要是在 slider 滑动的时候来获取 slider 的值，然后动态的设置上面View 的 frame 坐标（当然，如果让 view 往四周扩展得计算一下新的 fram 的值，然后动态的修改），上面的 view 位置和大小改变了，那么下面的 view 不能被上面的覆盖掉，所以也得修改 blackView 的 fram 的值

4、。这种通过修改 frame 的值的方式来确定组件位置即为绝对布局下面是由下面是由 storyboardstoryboard 拖拽过来的属性：拖拽过来的属性：/把最上边的 view 拖拽到我们的代码中propertyproperty (strong, nonatomic) IBOutletIBOutlet UIViewUIView *myView;/添加 sliderpropertyproperty (strong, nonatomic) IBOutletIBOutlet UISliderUISlider *mySlider;/添加下面黑色的 viewpropertyproperty (stro

5、ng, nonatomic) IBOutletIBOutlet UIViewUIView *blackView;下面是当下面是当 sliderslider 的值改变时要回调的方法：的值改变时要回调的方法：/当 slider 的值改变的时候回调的方法- (IBActionIBAction)sliderFunction:(idid)sender3/获取 slider 的当前值（在 storyboard 设置的范围为 0-120）doubledouble value = selfself.mySlider.value;/获取 myView 的位置CGRectCGRect frame = selfse

6、lf.myView.frame;/根据 slider 的值动态的设置 myView 的坐标和宽高，设置的时候 view 中心不变frame.origin.x = 120-value;frame.origin.y = 66 * (1-value/120);frame.size.height = 320-frame.origin.x x*2;frame.size.width = 320-frame.origin.x x*2;/更新 myView 的位置selfself.myView.frame = frame;/同时改变下面黑色 view 的坐标CGRectCGRect bf = selfself

7、.blackView.frame;bf.origin.y = frame.size.height + frame.origin.y + 30;selfself.blackView.frame = bf;2.上面是我们的绝对布局的方式，接下来要学习一下相对布局的方式。相对布局使用起来会比绝对布局要复杂一些， 下面先做屏幕适配的例子， 图一是在 iPhone的 4.0 寸的效果图， 当我们不做任何处理的时候在 3.5 寸屏上是显示不出来的如第二张图：4(1)我们如何让在 3.5 寸屏上也显示正常呢，接下啦就是相对布局出出场的时候了，我们用相对布局的方式把最下面的 view 的位置改为相对于主视图的

8、底部和左边的像素值固定， 同时设置slider的位置相对于下面的view的位置相对固定。也就是下面的 veiw 的位置改变，则上面的 slider 的位置也会改变，用storyboard 修改如下：（第一张图是修改最下面 view 的相对位置，第二张图是设置我们 slider 为相对布局） ，不需要在 ViewController 中添加任何动态吗我们就可以实现屏幕的适配。5(2)那么我如何用相对布局实现上面那种 view 放大的效果呢， 接下来我们需要新建一个工程，因为相对布局和绝对布局在同一个组件中无法并存。在新建工程中用 storyboard 把我们用到的控件进行拖拽 ，界面和上面的是一

9、样的。(1)首先给我们最上面的 View 设置相对布局的属性，如下面的图一(2) 再给黑色的 View 设置相对布局的属性，入下面的图二所示：(3) 设置上面两个 View 相对中心对齐，选中上面的 View,按着 Ctrl 往下面的View 中拖拽，在弹出的框中选中 Center X 入图三6(4).给我们相应的组件在 storyboard 中添加上约束以后，怎样来动态的改变最上面 view 的宽和高的约束范围呢？（即改变水平约束和垂直约束的值）第一部就得把最上面的 view 的水平约束和垂直约束从我们的 storyboard 中把最上面View 中我们要用的约束拖入到我们的Viewcont

10、roller, 第一张图是 storyboard中约束所在的位置，第二张图把约束添加到 ViewController 中。(5)至此我们用 storyboard 的工作已经做完，程序员是少不了敲代码的，也只有正儿八经的敲代码，程序员才会成长。所以喽下面就是我们在 ViewController7中添加的代码部分。绝对布局直接改 frame 的坐标值就可以啦，那么在程序中我们如何去动态的改变我们约束的值呢？下面的代码将会用到。 我们要做的事情就是在 ViewController 中通过改变 slider 的值来改变最上面 View 的水平约束和垂直约束，水平约束和垂直约束的相关变量我们已经拖拽过来

11、了，下面就需要在 Slider 回调的方法中来改变水平和垂直约束的值。先段代码，之后在说两句。/当 slider 的值改变的时候回调的方法- (IBActionIBAction)sliderFunction:(idid)sender/获取 slider 的当前值（在 storyboard 设置的范围为 0-120）doubledouble value = selfself.mySlider.value;/获取 myView 的位置CGRectCGRect frame = selfself.myView.frame;/根据 slider 的值动态的设置 myView 的坐标和宽高，设置的时候 v

12、iew 中心不变frame.origin.x = 120-value;frame.origin.y = 66 * (1-value/120);frame.size.height = 320-frame.origin.x x*2;frame.size.width = 320-frame.origin.x x*2;/更新 myView 的位置selfself.myView.frame = frame;/同时改变下面黑色 view 的坐标CGRectCGRect bf = selfself.blackView.frame;bf.origin.y = frame.size.height + frame

13、.origin.y + 30;selfself.blackView.frame = bf;1.一个组件中只能有一中约束，如在 myView 中我们已经有一个垂直约束，我们如果再给他添加一个垂直约束的话，那么程序在运行时就会报错，错误内容：“Unable to simultaneously satisfy constraints.”； 代码说明：2.所以在添加新的约束之前，我们得把之前加在我们组件中相应的约束给去掉；约束是加在我们对应组件的父视图上，移除也得从组件的父视图上移除；83.在设置约束的值的时候我们是以字符串的形式把参数传递给约束的，如：H:_myView(200) H 代表水平约束，V 代表垂直约束。中括号里是我们要为那个组件添加约束以及约束的值是多少；4.给我们的约束更新我们新建的约束；5.在把更新的约束添加到我们的父视图上， 到此我们就可以实现上