IOS开发之绝对布局和相对布局(屏幕适配)

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

        上面说了这么多了，可能说的不太明白，还是那句话，怎么能少的了代码和实例的支持呢，下面会通过屏幕适配的事例来用绝对布局和相对布局同时实现下面的描述效果。

        我们要实现的效果：当上面的view的大小及位置改变时，为了不覆盖掉下面的view,我们同时要改变下view的位置。 或者说在我们4.0寸正常显示的内容，在3.5寸屏上也能正常显示，即通常我们所说的屏幕的适配。为了便于观察效果，我们可以用Slider控件来动态的改变上面view的大小，观察下面view的位置变化，下面是我们要实现的效果图：

           

 

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

        下面是由storyboard拖拽过来的属性：

1 2 3 4 5 6

//把最上边的view拖拽到我们的代码中 @property (strong, nonatomic) IBOutlet UIView *myView; //添加slider @property (strong, nonatomic) IBOutlet UISlider *mySlider; //添加下面黑色的view @property (strong, nonatomic) IBOutlet UIView *blackView;

        下面是当slider的值改变时要回调的方法：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20