Screens adapted to those pits

Screens adapted to those pits2014-12-15 10:27 Source: Wanghai's laboratory Http://www.cocoachina.com/ios/20141215/10634.html

Background

Recently doing the iPhone4 and IPhone6 and IPhone6 plus adaptation work. Due to historical reasons there is no use of AutoLayout, also because of historical reasons the layout of the old code is all written dead with the number one one. This has brought great difficulty to the adaptation. For example, the following code:

UILabel *infolabel = [[UILabel alloc] Initwithframe:cgrectmake (0241)]; ...

0 This number is good to say, 241 is completely let people feel the mind, as for 320 this change to screen width is good, but 28 this magic number is what? This code is easy to write, but difficult to maintain, very poor readability, especially when there are multiple control layouts, the dependency is not obvious, if the layout needs to be recalculated and set values, it is extremely difficult to maintain.

This is the culmination of:

CGRect rect = CGRectMake (12.2+ (page-1) *+42.5* (i%7), ((totalrows- 1) %3) *+2,42.5,42.5);

This morning I saw this code almost crying with a keyboard.

Screen-fit sharing

Let's talk a little bit about what you need to be aware of in your screen adaptation.

The big premise is: a layout scheme that simply sets coordinates and sizes by code (I think the combination of Xib + AutoLayout is a little easier to fit together).

Reasonable design

The layout is a physical activity, but it is also an art work. It is called design because the same design manuscript may have many implementations. UIKit provides a lot of out-of-the-box controls, and how to make the most of these controls to implement your own layout results is a process to think about.

For a simple example, a sliding button that hangs up the phone can be implemented by Uiimageview, adding a pressed listener and then moving with the finger, letting go and then animating back in place. You can also use the Uiscrollview implementation, set the contentsize wider than the screen, thus controlling the slider range. Of course you can also use UISlider implementation, only need to set the slider image. Each has the merits and demerits, the self judgment.

Data semantics

If I want a button with a width of 100 on screen One-third, I can set its X value to 57 to complete the task easily. This is simple, but after a while back to maintain the code will be at a loss of such a magical figure, if you want to adjust the layout is difficult. I think the better way is to list the data, like this:

float 3 2;

This looks a lot easier: One-third of the screen to the left half of the width, that is, the value of X.

Relative layout

We often encounter a number of controls that occur at the same time, such as three buttons that are 10 pixels apart from the top, and can be implemented as follows:

CGRect rect1 = CGRectMake (0,0,0,54 , CGRectMake (0, 108, +);

But if we want to move the three buttons down at the same time, we need to set them all over again. A better solution is to implement it through a relative layout.

CGRect rect1 = CGRectMake (0,0,0, CGRectMake Rect1.origin.y+rect1.size.height,cgrectmake (0, rect2.origin.y+ Rect2.size.height,(a);

Of course, what scenarios use relative layouts, and which controls use relative layouts, are some of the problems we need to design.

Hierarchical relationships

In general, a lot of controls appear within a page, and it can be confusing if you add them to the view through Addsubview. You can use some UIView as a container-assisted layout. Individuals feel that they can arrange the depth of the controls and then group the controls in the same depth to help manage them.

Flexible and precise

The flexibility of layout code is important. For example, two and screen width of the button, if the width through 160, now iPhone6 out after the gun. Another example is that the CollectionView cell width is written dead 44.5, preferably by calculating dynamic acquisition. Although there is a certain amount of calculation, but in the later if the design changes encountered, only need to change the macro definition of cells_per_row such values can be achieved new requirements, very convenient. More importantly, such code is often meaningful, all values and layout results can be semantically expressed, which will make the entire code alive and full of vitality.

Screens adapted to those pits