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

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拖拽过来的属性： //把最上边的view拖拽到我们的代码中 @property (strong, nonatomic) IBOutlet UIView *myView; //添加slider @property (strong, nonatomic) IBOutlet UISlider *mySlider; //添加下面黑色的view @property (strong, nonatomic) IBOutlet UIView *blackView; 下面是当slider的值改变时要回调的方法： //当slider的值改变的时候回调的方法 - (IBAction)sliderFunction:(id)sender { //获取slider的当前值（在storyboard设置的范围为0-120） double value = self.mySlider.value; //获取myView的位置 CGRect frame = self.myView.frame; //根据slider的值动态的设置myView的坐标和宽高，设置的时候view中心不变 frame.origin.x = 120-value; frame.origin.y = 66 * (1-value/120); frame.size.height = 320-frame.origin.x*2; frame.size.width = 320-frame.origin.x*2; //更新myView的位置 self.myView.frame = frame; //同时改变下面黑色view的坐标 CGRect bf = self.blackView.frame; bf.origin.y = frame.size.height + frame.origin.y + 30; self.blackView.frame = bf; } 2.上面是我们的绝对布局的方式，接下来要学习一下相对布局的方式。相对布局使用起来会比绝对布局要复杂一些，下面先做屏幕适配的例子，图一是在iPhone的4.0寸的效果图， 当我们不做任何处理的时候在3.5寸屏上是显示不出来的如第二张图： (1)我们如何让在3.5寸屏上也显示正常呢，接下啦就是相对布局出出场的时候了，我们用相对布局的方式把最下面的view的位置改为相对于主视图的底部和左边的像素值固定，同时设置slider的位置相对于下面的view的位置相对固定。也就是下面的veiw的位置改变，则上面的slider的位置也会改变，用storyboard修改如下：（第一张图是修改最下面view的相对位置，第二张图是设置我们slider为相对布局）