Absolute layout and relative layout of iOS development (screen fit)

Before the Web front page of the small partners, see absolute positioning and relative positioning is not unfamiliar, and the use is very convenient. There are also absolute and relative positioning in the UI design of iOS, and the absolute positioning and relative positioning of our web front ends are different but similar. Here's a combination of two small demos to learn about the absolute positioning and relative positioning of the UI in our iOS development. The UI cases used in the previous blog are all absolutely positioned, and the controls we storyboard are absolutely positioned, and we can change the position and size of the component with the frame of the component. Relative positioning is different, relative positioning is the element around the reference component to determine the size or position of the component, relative positioning is the constraint and the distance of the surrounding components to layout, that is, Layoutconstraint. Layoutconstraint and Fram layouts cannot coexist in the layout.

Above said so much, may say not quite understand, still that sentence, how can be less the code and instance support, the following will be through the screen adaptation of the case to use absolute layout and relative layout at the same time to achieve the following description effect.

We want to achieve the effect: when the above view size and position changes, in order not to overwrite the view below, we also have to change the location of the next view. Or in our 4.0-inch normal display of content, on the 3.5-inch screen can also be displayed normally, that is, usually we say the adaptation of the screen. To make it easier to observe, we can use slider controls to dynamically change the size of the view above and observe the change in the position of the view below:

1. Using absolute layout to achieve the above effect, in order to save our code writing time, the above control is implemented by Storyborad, and then in the corresponding Viewcontroller to add components and control callback method, The main point is to get the slider's value when the slider is sliding, and then dynamically set the frame coordinates of the view above (of course, if the view is extended around to calculate the value of the new Fram, and then dynamically modified), the view position and size of the above changes, Then the view below cannot be overwritten by the above, so you have to modify the value of the Blackview Fram. This is an absolute layout by modifying the value of the frame to determine the component position

Here are the properties dragged by storyboard:

123456

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

Here's how to callback when the value of the slider changes:

1234567891011121314151617181920212223

//当slider的值改变的时候回调的方法- (IBAction)sliderFunction:(id)sender{    //获取slider的当前值（在storyboard设置的范围为0-120）    doublevalue = 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. The above is our absolute layout of the way, next to learn the relative layout of the way. Relative layout is more complex than the absolute layout, the following first screen adaptation of the example, figure one is on the iphone 4.0-inch, when we do not do any processing on the 3.5-inch screen is not shown as the second picture:

                         

(1) How do we let the 3.5-inch screen also show normal, and then the relative layout of the time to play, we use the relative layout of the bottom view of the location of the position to be relative to the front of the base and the left of the pixel value fixed, while setting the slider position relative to the view below the position of the relative fixed. That is, the position of the veiw below is changed, the position of the slider above will also change, with storyboard modified as follows: (the first picture is to modify the bottom view of the relative position, the second picture is to set our slider for the relative layout), Don't need to add any dynamic in Viewcontroller, we can implement screen adaptation.

(2) Then how do I use the relative layout to achieve the above view magnification effect, next we need to create a new project, because the relative layout and absolute layout in the same component can not coexist. Using storyboard to drag and drop the controls we use in the new project, the interface is the same as above.

(1) First give us the top view to set the relative layout of the properties, such as the following figure a

(2) Set the relative layout properties to the Black view, as shown in Figure two below:

(3) Set the above two view relative center alignment, select the view above, press CTRL to the following view, drag, in the popup box, select Center x in Figure three

(4). How to dynamically change the width and height of the top view when the corresponding component is added to the storyboard constraint? (That is, change the value of the horizontal and vertical constraints) the first part of the top view of the horizontal and vertical constraints from our storyboard in the top view of the constraints we want to use to drag into our Viewcontroller, The first graph is where the constraints are in storyboard, and the second graph adds the constraints to the Viewcontroller.

　　　　　　　　　　

?    ?  ? (5) At this point we use storyboard work has been done, programmers are not without knocking code, but also only serious code, programmers will grow. So here's the part of the code that we added in Viewcontroller. Absolute layout Change the coordinate value of frame directly, then how do we change the value of our constraint dynamically in the program? The following code will be used. What we're going to do is change the value of the slider in the Viewcontroller to alter the horizontal and vertical constraints of the top view, the related variables for the horizontal and vertical constraints we've dragged them over, Below you need to change the values of the horizontal and vertical constraints in the method of the slider callback.    First paragraph code, then say two sentences. ?

123456789101112131415161718192021222324252627

//slider的值改变调用的方法- (IBAction)sliderChange:(id)sender{    //为了避免冲突移除myView的水平和垂直约束,注意是从主视图上移除，因为约束是加载我们的主视图上，即相对于我们的主视图    [self.view removeConstraint:self.widthC];    [self.view removeConstraint:self.heightC];        //获取slider的值    doublesliderValue = self.mySlider.value;        //由slider的值重设我们的约束值,H代表水平约束， V代表垂直约束    NSString *widthValue = [NSString stringWithFormat:@"H:[_myView(%lf)]", sliderValue];    NSString *heightValue = [NSString stringWithFormat:@"V:[_myView(%lf)]", sliderValue];        //新建约束    NSArray *widthConstraint = [NSLayoutConstraint constraintsWithVisualFormat:widthValue options:0 metrics:nil views:NSDictionaryOfVariableBindings(_myView)];    //给水平约束重新赋值    self.widthC = widthConstraint[0];        //给垂直约束重新赋值    NSArray * heightConstraint = [NSLayoutConstraint constraintsWithVisualFormat:heightValue options:0 metrics:nil views:NSDictionaryOfVariableBindings(_myView)];    self.heightC = heightConstraint[0];         //往主视图上添加新的约束    [self.view addConstraint:self.widthC];    [self.view addConstraint:self.heightC];}

?    ? ? Code Description:

?    ?    ?    ? ? 1. There can be only one constraint in a component, as in MyView we already have a vertical constraint, and if we add a vertical constraint to it, then the program will error when it runs, and the wrong content: "unable to simultaneously satisfy Constraints... " ；

?    ?    ?    ? 2. So before adding a new constraint, we have to remove the corresponding constraint that was added to our component, and the constraint is added to the parent view of our corresponding component and removed from the parent view of the component;

?    ?    ?    ? ? 3. When setting the value of a constraint, we pass the argument to the constraint in the form of a string, such as: H:[_myview (+)] H for the horizontal constraint, and V for the vertical constraint. In brackets is the number of constraints and constraints we want to add to that component;

?    ?    ?    ? ? 4. Update our constraint to our new constraint;

?    ?    ?    ? ? 5. In adding the updated constraint to our parent view, we can implement the above features we implemented with absolute layout above

?    ? Additional notes:

?    ?    ?    ? In absolute layout we can also get the size of the screen, the size of the screen to calculate the location of our components, the main code is as follows:

123456

//获取屏幕大小UIScreen *s = [UIScreen mainScreen];//获取屏幕边界CGRect bounds = s.bounds;//获取屏幕的高度floatheight = bounds.size.height;

?  　　　　? the above summary for the moment, is based on the author's own understanding of the summary of the content, unavoidably biased, welcome criticism, reproduced please indicate the source.

Absolute layout and relative layout of iOS development (screen fit)