Absolute layout and relative layout for IOS development (screen adaptation)

Absolute layout and relative layout for IOS development (screen adaptation)
If you have worked on Web Front-end pages before, you can see that absolute positioning and relative positioning are no stranger, and they are easy to use. In ios ui design, there are also absolute and relative positioning, which are different from the absolute and relative positioning of our web Front-end, but have similarities. The following uses two demos to learn the absolute and relative positioning of the UI in IOS development. The UI examples used in the previous blog are all absolute positioning, and the controls dragged by our Storyboard are all absolute positioning, that is, we can change the position and size of the component by changing the frame of the component. The relative positioning is different. The relative positioning determines the size or position of the component by referring to the elements around the component. The relative positioning refers to the layout of the constraint and the distance between the surrounding components, that is, layoutConstraint. in the layout, LayoutConstraint and Fram cannot coexist. I have said so much above, but I may not quite understand it. In that case, how can I reduce the support for code and instances, the following is an example of screen adaptation to achieve the following description at the same time with absolute layout and relative layout. The effect we want to achieve: When the size and position of the view changes, in order not to overwrite the view, we also need to change the position of the view. In other words, the content normally displayed on our 4.0-inch screen can also be displayed normally, that is, the screen adaptation we usually call. To facilitate the observation of the effect, we can use the Slider control to dynamically change the size of the view above and observe the position change of the view below. The following is what we want to achieve: 1. use absolute layout to achieve the above effect. In order to save time for coding, the above control is implemented through storyborad, and then add the component and control callback method in the corresponding ViewController, it is mainly used to obtain the value of the slider when slider slides, and then dynamically set the frame coordinates of the above View (of course, if you want the view to expand to the four sides, calculate the new fram value, the position and size of the above view are changed, so the following view cannot be overwritten, so you have to modify the value of the fram of the blackView. In this way, you can change the frame value to determine the component position. This is the absolute layout. The attributes dragged by the storyboard are as follows: // drag the top view to our code @ property (strong, nonatomic) IBOutlet UIView * myView; // Add slider @ property (strong, nonatomic) IBOutlet UISlider * mySlider; // Add the following black view @ property (strong, nonatomic) IBOutlet UIView * blackView; below is the method to call back when the value of the slider changes: // callback method when the value of the slider changes-(IBAction) sliderFunction :( id) sender {// obtain the current value of the slider (the range set in the storyboard is 0-120) double value = Self. mySlider. value; // obtain the position of myView CGRect frame = self. myView. frame; // dynamically sets the coordinates and width and height of the myView based on the value of the slider. 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; // update the position self of myView. myView. frame = frame; // At the same time, change the coordinates of the black view CGRect bf = self. blackView. frame; bf. origin. y = frame. size. height + frame. orig In. y + 30; self. blackView. frame = bf;} 2. The above is our absolute layout method. Next we will learn the relative layout method. The relative layout is more complex than the absolute layout. The following is an example of screen adaptation. Figure 1 shows a 4.0-inch iPhone, when we do not do any processing, we cannot display the second image on the 3.5-inch screen. For example, (1) how can we make the display on the 3.5-inch screen normal, next, it is time for the relative layout to come out. We use the relative layout method to change the position of the bottom view to a fixed value relative to the pixel value at the bottom and left of the main view, at the same time, set the position of the slider to a relatively fixed position relative to the following view. That is, if the position of the veiw changes, the position of the slider will also change. Use storyboard to modify the following: (the first figure is to modify the relative position of the bottom view, the second figure sets our slider as a relative layout.) You do not need to add any dynamic content to ViewController. Then we can adapt the screen. (2) How can I use relative layout to enlarge the view above? Next we need to create a new project, because relative layout and absolute layout cannot coexist in the same component. In the new project, use storyboard to drag and drop the controls we use. The interface is the same as above. (1) first, set the relative layout attribute for the top View, as shown in figure 1 (2). Then, set the relative layout attribute for the black View, as shown in figure 2 below: (3) set the Center alignment of the two views above, select the View above, press Ctrl to drag down the View, and select Center X in the pop-up box to input Figure 3 (4 ). after adding constraints to the corresponding components in the storyboard, how can we dynamically change the maximum view width and height constraints? (That is, changing the values of horizontal and vertical constraints) in the first part, we need to drag the horizontal and vertical constraints of the top view from our storyboard to our Viewcontroller, the first graph is the position of the constraint in the storyboard, and the second graph adds the constraint to the ViewController. (5) At this point, we have finished using storyboard. programmers can't miss the code, and programmers can only grow with the code. So the following is the code we added in ViewController. The absolute layout can be changed directly to the coordinate value of the frame, so how can we dynamically change the value of our constraints in the program? The following code will be used. What we need to do is to change the horizontal and vertical constraints of the top View by changing the slider value in ViewController. We have dragged the variables related to the horizontal and vertical constraints, next we need to change the value of the horizontal and vertical constraints in the Slider callback method. First, enter the code, and then say two sentences. // The value of the slider changes the call method-(IBAction) sliderChange :( id) sender {// to avoid conflicts, remove the horizontal and vertical constraints of the myView, note that they are removed from the main view, because the constraint is to load our main view, that is, relative to our main view [self. view removeConstraint: self. widthC]; [self. view removeConstraint: self. heightC]; // obtain the value of the slider double sliderValue = self. mySlider. value; // reset the value of the slider. H indicates a horizontal constraint. V indicates a vertical constraint. NSString * widthValue = [NSString stringWithFormat: @ "H: [_ myView (% lf)] ", sliderValue]; NSString * heightValue = [NSString stringWithFormat: @ "V: [_ myView (% lf)]", sliderValue]; // create a constraint NSArray * widthConstraint = [NSLayoutConstraint constraintsWithVisualFormat: widthValue options: 0 metrics: nil views: NSDictionaryOfVariableBindings (_ myView)]; // assign a new value to self for the horizontal constraint. widthC = widthConstraint [0]; // assign a new NSArray * heightConstraint = [NSLayoutConstraint constraintsWithVisualFormat: heightValue options: 0 metrics: nil view to the vertical Constraint S: NSDictionaryOfVariableBindings (_ myView)]; self. heightC = heightConstraint [0]; // Add a new constraint to the main view [self. view addConstraint: self. widthC]; [self. view addConstraint: self. heightC];} Code Description: 1. only one constraint exists in one component. For example, we already have a vertical constraint in myView. If we add another vertical constraint to it, the program will report an error during running, error message: "Unable to simultaneously satisfy constraints. ......"; 2. therefore, before adding new constraints, we need to remove the corresponding constraints added to our components. The constraints are added to the parent view of our corresponding components, to remove a component, you must also remove it from the parent view of the component. 3. when setting the value of the constraint, we pass the parameter to the constraint in the form of a string, for example, H: [_ myView (200)] H Represents the horizontal constraint, and V represents the vertical constraint. In brackets, we need to add constraints for that component and the value of the constraints. 4. update the new constraint for us. 5. after adding the updated constraint to our parent view, we can implement the above functions implemented with absolute layout: in absolute layout, we can also obtain the screen size and calculate the position of our component by the screen size. The main code is as follows: // obtain the screen size UIScreen * s = [UIScreen mainScreen]; // obtain the screen boundary CGRect bounds = s. bounds; // get the screen height float height = bounds. size. height;