Commemorating a previous software product (III)-resolution and Landscape

5. Resolution and Landscape

I spent a huge amount of time dealing with DPI and resolution problems. I don't believe it. The total development time from 1/3 to 1/4 is processing DPI and resolution problems, this is really puzzling, because today's Android and iOS development almost do not need to consider these issues, Windows Phone 7 and Windows 8 do not need to be used, how can I so toss?

5.1. Spend some time talking about "resolution"

Resolution may refer to different things at different times, sometimes screen pixels, or point density. For example, "1024*768" indicates horizontal and vertical pixels, while "96dpi" indicates the point density (dots per inch). The higher the DPI, the higher the point density. So what does Windows DPI settings mean?

(DPI settings in Windows Control Panel are opened through "Control Panel-appearance and personalization-display-set custom text size (DPI)

By default, Windows considers the DPI of the display to be 96, a simplified Chinese character on the 9th, which is rendered according to the DPI. The result is as follows (10 times larger ):

The word "song" is drawn from 11*12 points. It should be OK to display the word on a common monitor, the point density is extremely high, and the distance between the points is extremely small. If the word "song" is still drawn from 11x12 points, it will look too small and the eyes will look laborious, therefore, Windows provides such an option to adjust DPI, allowing you to enlarge the elements on the Windows interface. For example, if you adjust DPI to 192, the word "song" will be displayed as follows (10 times larger ):

It turns to use 28*29 points to draw. Strange, why not 22*24? This is because I have removed the margin. In theory, it must be twice the length and width. BTW: After you adjust the DPI of your computer to 192, you find that not only the font has changed, but many windows elements such as the scroll bar and menu have changed, but some of them have not changed, some of them are weird. Why? Because not all software has taken DPI into account, many software are designed based on the default DPI, so I think it is unnecessary for Windows to use a higher DPI display, the software-level support is insufficient! So why is there no such problem with the latest MacBook Pro? -- That's because Apple's engineers and designers have done a lot of work behind it that you can't imagine, but even so, some software still has poor support for retina screens, if you use more, you will find out.

The intent of DPI is to make the physical size displayed by an interface element of the same logical size in different DPI monitors consistent. The accuracy is basically the same. For example, the standard resolution of a 17-inch LCD screen (out of print now) is 1280*1024, the 19-inch screen LCD (out-of-print) display is also the resolution. Who do you think has a higher DPI? For Windows, 96 DPI is considered by default, while the physical DPI is 17-inch higher, so when the interface elements of the same logical size are displayed, A 17-inch display looks a little smaller (it seems I am talking nonsense). It is too complicated to deal with this tiny gap, so let's look at it, all think of them as 96 DPI.

Finally, let's talk about the PPI (pixels per inch). In fact, it is the same as DPI, but DPI is used in many printer fields, while windows is always called "DPI, DPI, I followed DPI. Do you know the DPI of the printer? Currently, most mainstream printers support the 2880 DPI printing mode, and the point density is much higher than the display density ......

DPI of Windows Mobile 5.2

Windows Mobile has three types of DPI (In fact, there may be more than one, But I mentioned here), which are 96, 128, and 192, which usually have the following relationships with pixel resolution:

Screen Resolution	DPI
240*320	96
480*640	192
240*240	96
480*480	192
480*800	192
320*320	128

This is a reference table, not absolute. In fact, the DPI of Windows Mobile can be configured during Rom customization.

The same texture is normal on machines with 96 DPI, and it is too small on machines with DPI; in turn, it is normal on machines with DPI, it is too small on the 96 DPI machine-this is the problem I want to solve.

What should we do?

One solution is to stretch/compress images, but there are three disadvantages:

1. Sample. Image stretching/compression will lead to out-of-the-box image, which will affect the appearance of the image.
2. A waste of resources. If the 96 DPI machine uses the texture prepared for the 192dpi machine, it is a great waste and may cause resource depletion. (This will be mentioned later)
3. Low efficiency. Stretching/compression ratio conventional Direct textures consume more CPU, which may lead to slow User Interface response and higher power consumption.

I chose the most tedious solution: Prepare 3 sets of images for different resolutions!

(Different textures used by different DPI)

If you are a professional artist, you may be able to see that the 192dpi figure is the most perfect, while the 96dpi and 128dpi figures seem a little rough. The reason is, I will tell you quietly: as I need three sets of pictures, my company's artist has a great opinion on me ...... Therefore, by default, many pictures in my skin are directly adjusted by using Photoshop. This reflects some shortcomings beyond my technology ......

5.3, landscape and Landscape

The problem of horizontal and vertical screen is rarely required for computer software, but the mobile phone has to be considered. During sosopi development, I used to have access to a stockade, with only horizontal screens, there is no way to adjust it to a portrait screen. It is not possible for such an amazing Android, but Windows Mobile is "Everything is possible ". The horizontal and vertical screen is an adaptive problem for software resolution adjustment, or "re-layout. The resolution of 480*800 changes to 800*480, And the elements on the interface must be adjusted. This is really not an easy task. Let's take a look at sopi's homepage adaptive method:

(Adaptive horizontal and vertical screen on the homepage)

From the above, we can see that at least the problem you need to face is the "Adaptive" of the background image. If you use a background image of 480*800, there is no problem during the portrait screen, but on the horizontal screen, I am afraid I can only display the size of 480*480. It cannot be filled in a large area on the right. I have thought a lot about the solution, including stretching images and rotating images, however, the results were not satisfactory. The final decision was to use 800*800 images, so that no matter whether the landscape screen or portrait screen is full, it would be a little more difficult for the artist, he needs to test the different effects of a background image on the horizontal and vertical screens. If you need to change the image, you also have certain requirements on the Image Selection: if the length of the long side of the screen is N, it is best to select N * n images. For example, if the screen is 480*640, it is better to select 640*640 images.

The background image is only one of them. I have to consider a lot of things. The interface elements are completely re-laid! This means that I have to make two la s to adapt to different screen States. On the surface, it may not be too difficult to see, but it seems that the workload is huge, and many elements on the interface cannot directly specify coordinates, instead, we need to calculate the coordinates based on the percentage and draw the entire interface.CodeThe entire article is filled with the judgment of "Landscape" and "Landscape. The alignment of interface elements, some starting from the top, some starting from the bottom, and some taking relative coordinates for other elements, in some cases, the location between two elements of AB is 30% close to that of element ......

(This is the horizontal and vertical screen comparison chart of the calendar)

In addition to the trouble, there is a big problem. If you have read the previous article about texturesArticleYou will think of the image cache. I used some space for time to speed up the Paster.Algorithm, That is, cache. Now, due to the switching of landscape and landscape screens, do some of my caches need to be updated as well? -- Yes. For example, I used a 480*800 image cache. Now I have to adjust it to 800*480 after the screen is landscape. How can I adjust it? Delete the previous one and recreate it. Note that this action can easily cause system crashes because Windows Mobile has limited resources and far lower memory management capabilities than windows, rebuilding the image cache is a resource-consuming action. I have no good solutions to this problem until the end.

5.4. Are you still having these questions?

These problems do not exist infinitely today, because today's skin is always designed for a certain resolution (DPI and pixel, the user selects different skins based on the actual situation of his mobile phone (the problem still exists ). Are there these problems in the current iPhone app development? In general, it does not exist because IOS is used to draw device-independent units. In fact, almost all UI development (including the Microsoft System) is biased towards using device-independent units, for example, the Unit "Centimeter" and "Inch" ensure that the physical size displayed on the display devices of different DPI is basically the same, even if the point is used, it is also a device-independent point, instead of directly corresponding to the pixels on the screen, we can also use floating point numbers to represent the point size. For example, the line width is 0.7 points, the drawn 0.7 vertices are indeed thinner than the width of a line ", because the underlying graphics library will lighter the color it renders when necessary. In short, you don't need to worry about the specific color used to draw several pixels; what about horizontal and vertical screen switching? Basically, you don't have to worry about it. You only need to consider it when your app needs to use a horizontal or vertical screen. For example, when you view a horizontal photo, you can see your mobile phone, in most cases, you can pin your design to a horizontal or vertical screen.

Finally, let's leave a question here. Let's take a look at the iPhone's "desktop". How do you get a horizontal screen? (In fact, iPhone does not allow horizontal desktop screen without jailbreak, but I suppose so. Well, test your design capabilities)