Uiscreen and High-Resolution Display

The uiscreen object contains the boundary rectangle of the entire screen. When constructing the user interface of an application, you should use the properties of this object to obtain the recommended rectangular size to construct your program window.

Cgrect bound = [[uiscreen mainscreen] bounds]; // The returned rect cgrect frame with the status bar = [[uiscreen mainscreen] applicationframe]; // The returned result is a rect float scale without the status bar = [[uiscreenmainscreen] scale]; // obtain the device's natural resolution

Let mainscreen = uiscreen. mainscreen ();

Window = uiwindow (frame: uiscreen. mainscreen (). bounds );

Println ("bounds: \ (mainscreen. bounds) \ napplicationframe: \ (mainscreen. applicationframe) \ nscale: \ (mainscreen. Scale )");

Println (window !. Screen === uiscreen. mainscreen ());

Window !. Makekeyandvisible ();

// [Email protected]

Let image = uiimage (named: "test ");

Let imageview = uiimageview (image: image );

 

Println (image. scale); /// 2.0

Println (image. size); // 160 120

Println (imageview. bounds. width); // 160.0

Window !. Addsubview (imageview );

Output result:

Bounds: (0.0, 0.0, 768.0, 1024.0)

Applicationframe: (0.0, 20.0, 768.0, 1004.0)

Scale: 2.0

True

The scale attribute needs to be further described: the screen resolution of iPhone devices was 320*480 in the past, and Apple later adopted the display technology named retina in iPhone 4, the iPhone 4 uses a 960x640 pixel resolution display screen. As the screen size remains unchanged, the resolution is increased by 3.5 inch to four times that of the iPhone 3gs, with an area of 326 pixels per inch. The scale attribute has two values: scale = 1, indicating the normal screen, and the resolution is bounds. Width x bounds. heightscale = 2. Representing the Retina screen bounds. Width * 2 x bounds. Height * 2. If you use the bounds and frame obtained by uiscreen, the program automatically assigns a value to uiscreen. Scale. [uiscreen mainscreen]. Scale = 1.0 or 2.0.DPI and PPI: DPI is the number of points per inch, which can be simply understood as the point density. The PPI is the number of pixels per inch, which can be simply understood as the pixel density. Is there a difference between point and pixel? In many cases, a point is equal to a pixel. However, for example, on the iPhone's Retina screen, a single point contains four pixels, greatly improving the display definition.

The display we use is generally a point-to-pixel .. iPhone 4 is one point and two pixels. when the @ 2x image is used on the screen with scale = 2.0, it actually tells IOS that two pixels are required for the image to be displayed at a point on the screen again, the width and height of the image are reduced by two times. also points ..

Therefore, you only need to make a 640*960 UI as @ 2x.

 

 

List of high-resolution display supported

To adapt to devices with high-resolution display, you need to do the following:

• Provides high-resolution images for each image resource in the application package
• Provides high-resolution images for application and document icons
• Vector-based graphics and content should continue to use the drawing code of core graphics and uikit as before
• When using the core animation layer directly, you may need to adjust the scale factor before painting)
• To use OpenGL ES for painting, you must properly set the proportional coefficient of the layer to determine whether to add high-resolution painting support.
• To create a custom image, you need to update the image creation code and consider the influence of the proportional coefficient.
• If the application directly provides the content of the core animation layer, adjust the code as needed.

Optimization of painting obtained free of charge

The painting technology in IOS provides powerful support to help developers render painting content in the best way, regardless of the resolution of the current display.

• Standard uikit views (Text views, buttons, table views, and so on) ensure correct rendering at any resolution
• Vector-based content (uibezierpath, cgpathref, PDF) will automatically take full advantage of any additional pixel points to repair the image line's sawtooth.
• Text is automatically added to the teeth at high resolution.
• Uikit supports automatic loading of images prepared for high resolution (@ 2x)

The reason why the existing painting code works normally is that local painting technology, such as core graphics, has recently considered the current proportional coefficient. For example, if view implements drawrect: method, uikit automatically sets the ratio of the current screen to view. In addition, during painting, uikit automatically fixes the current tansformation matrix CTM used by any painting environment, considering the proportional coefficient of view. Then, the content generated by using the drawrect method will be scaled in a proper proportion under the current device screen.

If the application only uses local Painting Technology to render its content, the only thing to do is to provide a high-resolution version for the image to be used. You do not need to make any modifications if you only use the System View or applications that only rely on the vector content. However, applications that use images in high-resolution display must provide new versions of these images. In particular, we need to double the image size and provide two times the original number of pixels in the horizontal and vertical directions. In general, we need to provide four times the number of pixels.

Update image resource files

Applications running on ios4 now provide two separate files for each image. One for standard resolution and the other for high resolution. The naming conventions for each group of images are as follows:

• Standard Edition: <imagename> <device_modifier>. <filename_extension>
• High-resolution edition: <imagename> @ 2x <device_modifier>. <filename_extension>

<Imagename> and <filename_extension> specify the common name and extension of the file. The <device_modifier> part is optional. You can select either string-iPad or-iPhone. The two identifiers can be different versions of the same file on the iPad and iPhone. The newly added @ 2x identifier indicates that the image is applied to high resolution. The system knows that the image is a variant of the standard image in high resolution.
Note that creating images of high-resolution versions must be placed in the same position as those of the original version under the application package.

Load images to applications

The uiimage class handles all the work that needs to load high-resolution images to the application. After creating a new image object, you only need to request the standard and high-resolution versions of the image with the same name. For example, if you have two image files named button.png and [email protected], use the following code to request the image:

1	UIImage* anImage = [UIImage imageNamed:@"Button"];

Note: In ios4 and later versions, you can omit the file extension and only provide the image name.

In a high-resolution display, imagenamed:, imagewithcontentsoffile:, and initwithcontentsoffile: automatically searches for images with the @ 2x name. If it is found, the image will be loaded. If a high-resolution version of a given image is not provided, the image object will still load the standard image resource and scale it during the painting process.

Note: If you use core graphics to create an image, remember that the quartz image does not have a displayed proportional coefficient. Their proportional coefficient is assumed to be 1. 0. if you create a uiimage object from the cgimageref data type, you must use the initwithcgimage: Scale: orientation: method to create the object. This method allows you to add a specified proportional coefficient to the quartz image data.

The uiimage object automatically considers its proportional coefficient during painting. In this way, as long as the correct image resources are provided in the program, any image rendering code will work normally.

Use Image view to display images

The program uses a uiimageview object to display images. All images added to the view must use the same proportional coefficient. You can use an image view to display a single image, or use an animation to display multiple images. You can also provide a highlighted image ). Therefore, if a high-resolution version is provided for one of these images, other images must also provide corresponding high-resolution images.


Application icons and lauch Images)

In addition to updating the custom image resources in the application, you must also provide a new high-resolution version for the icons and Loaded Images of the application. The process of updating these image resources is the same as that of updating other image resources. Create a new version of image resource and add the @ 2x identifier to the image file name, just like processing other images. For example, for application icons, you need to add a high-resolution image name to the cfbundleiconfiles key of the info. plist file.

Update custom painting code

Add any custom painting code to the application. In most cases, you do not need to consider the resolution of the current device. The local painting technology automatically ensures that the coordinate system in the logical coordinate space is correctly mapped to the pixels of the current device. However, sometimes you also need to know the current proportional coefficient to correctly render the content. In these cases, uikit, core animation, and other system frameworks will help you to paint correctly.

Creating High-Resolution bitmap images programmatically

When using the uigraphicsbeginimagecontext function to create a bitmap, you must adjust the Code to consider the proportional coefficient. The uigraphicsbeginimagecontext function creates an image with a ratio of 1.0. If the display of the current device is of high resolution, the image created using this method may appear blurred during rendering. Use uigraphicsbeginimagecontextwittions to create an image with a ratio of other values. The processing process of this function is the same as that of uigraphicsbeginimagecontext.

1. Call uigraphicsbeginimagecontextwittions to create a bitmap painting environment (to add a proper proportional coefficient) and push it to the image stack.
2. Use common functions of uikit or core graphics to add Image Content
3. Call the uigraphicsgetimagefromcurrentimagecontext function to obtain the bitmap content.
4. Call the uigraphicsendimagecontext function to pop the current painting environment out of the painting stack.

For example, the following code creates a 200*200 pixel bitmap. (The number of pixels is determined by the image size multiplied by the ratio coefficient)

1	UIGraphicsBeginImageContextWithOptions(CGSizeMake(100.0,100.0), NO, 2.0);

Note: to scale the bitmap to a proper proportional coefficient in the main screen of the current device, you only need to set the scale parameter to 0.0 when calling the uigraphicsbeginimagecontextwitexceptions function.

Adjust local content to adapt to High-Resolution Display

If you want to paint different contents in a high resolution, you need to use the current proportional coefficient to correct the painting code. For example, assume that a view draws a border line of 1 pixel. If you use a uibezierpath object to draw a line in 2.0 width on a device with a proportional coefficient of 1.0, a line of 2 pixels is generated. In this case, the current line needs to be divided by the current proportional coefficient to get the width of 1 pixel.
Of course, changing the painting parameters based on the proportional coefficient may lead to unknown results. A line of 1 pixel width looks normal on some devices, but it looks so thin on high-resolution devices that it looks unclear. You need to decide whether to make changes based on the actual situation.


Explanation of proportional coefficient in core animation Layers

Applications that directly use the content provided by core animation layers need to adjust the code and consider the influence of the proportional coefficient. Generally, when you use the drawrect: Method of the view or the drawlayer: incontext: Method of the layer proxy, the system automatically considers the influence of the proportional coefficient and adjusts the painting environment. However, when performing the following operations on a view, it is necessary to understand or change the proportional coefficient:

• Create additional core animation layers, set different proportional coefficients, and combine them into the View content.
• Directly set the "contents" of the core animation Layer"

The core animation integration engine checks the contentsscale attribute of each layer and determines whether the layer contents needs to be scaled during integration. If you create a layers that is not associated with the view, the proportional coefficient of each new layer object is initialized to 1.0. If you do not change the initial proportional coefficient, and then directly draw the layer to a high-resolution display, the contents of the layer scales automatically to compensate for the difference caused by different proportional coefficients. If you do not want the contents of the layer to be scaled, you can set the proportional coefficient of the layer to 2.0. However, if the content after the setting is complete is not added to the display with the highest resolution, the existing content may appear smaller than expected. To fix this problem, you must use the layer at high resolution.

When you directly set the contents of the layer, it is particularly important to adjust the content of the layer to adapt to different proportional coefficients. The quartz image works directly at the pixel level and does not care about the proportional coefficient setting. Therefore, before creating a cgimageref object to set the contents of the layer, you need to check the current proportional coefficient and adjust the image size reasonably. It should also be noted that when you load images in the application bundle or use the uigraphicsbeginimagecontextwitexceptions function to create images, you must adjust the image proportional coefficient to be consistent with the layer proportional coefficient. If a high-resolution bitmap is not created, its scaling ratio is set as described previously.