Scaling issues with Android image resources

1 . Image Scaling after alignment problem

in the Android development, how to use pictures is a headache for many developers. The most common problem is debugging a good UI on a phone , which can deform on a different dpi phone.

A Ndroid provides a different fit dpi dpi dpi all use a set of pictures, the size of the application will expand sharply, this is not the result we want to see.

if only a set of pictures, but there is drawable , drawable-mdpi , drawable-hdpi In each of the directories to be placed in DPI on the device is displayed correctly? This problem can not give a simple answer, only according to the specific situation analysis.

First of all, we need to understand the consequences of placing images in these directories:

q   drawable directory: This is the so-called" default "directory. If you put the picture here, from the final effect, and put in drawable-mdpi

Q drawable-nodpi directory: Images placed in this directory are loaded into memory and will not be scaled, so-called non-scaling means a 72x72 pixels of a picture, the size in memory is still 72x72 pixels. But on different devices, this picture will look the same size.

q drawable-mdpi,drawable-xdpi,dreawable-xhdpi: If you put the picture in these and dpi -related directories will not be scaled when the program is running on devices of the same dpi , when running at DPI On different devices, scaling is based on the conversion relationship between DPI.

for put indrawable-nodpithe picture below is relatively simple and does not need much explanation. But for pictures placed in other directories,AndroidWhat is the purpose of scaling the picture? In fact the purpose and inLayoutused in FilesDPAs the quantity unit, is to let a picture in differentDPIlooks the same size on the device. For example, a card placed indrawable-mdpidirectory, the size is72x72picture of the pixel, if run inmdpion the device, size or72x72pixels, but runs indrawable-hdpion the device, the dimensions are amplified to108x108pixels.

Wouldn't it be nice to zoom in to make the app adapt to different screens without taking into account the effects of image zooming? Why do developers still feel a headache? This is because in development, many UI effects are achieved through jigsaw puzzles, and if the two images are scaled and cannot be aligned, even if there is only one pixel, the effect will be dimmed. To solve this problem, let's start by looking at how Android is scaled.

AndroidFour of the most commonDPIis aldpi(120dpi),mdpi(160dpi),hdpi(240dpi) andxhdpi(320dpi). These four kinds ofDPIthe ratio is120:160:240:320, after the simplification is3:4:6:8. Placed inmdpidirectories under the file, in differentDPIscaled size on the device isN*3/4,N*4/4,N*6/4and theN*8/4(Nas the picture size), if you want to place themdpiThe image is scaled to the best, the size of the picture must be4multiples, otherwise the algorithm in the process of processing the picture, will not proportionally add or delete a few rows (or a few columns) of pixels, so the two pictures of the lines in the zoom may be staggered to each other several pixels. In the same vein, putldpiunder the picture, the size is best3a multiple of; put inhdpiunder the picture, the size is best6a multiple of; put inxhdpiunder the picture, the size is best8the multiple. Of course we are not asking every picture to conform to this rule, but it is necessary to do so for images that need to be aligned accurately. so a set of pictures in which directory is not the key, the key is to determine the size of the picture.

Note that the picture scaling problem that is discussed here refers to the scaling that occurs when a picture is loaded into memory. In addition, manyWidgetsThe image is also scaled again when it is used. Of courseAndroidmethods are also provided to prohibitWidgetsZoom. For example, the most commonly usedImageViewclass can be set by setting theScaleTypeproperty is "Center"to disable scaling, or toImageViewthe width and height are set to "wrap_content". But to be clear, it's set up to letImageViewdo not scale the picture, the picture will be loaded when the system is scaled, many developers here confused, thought set upWidgetsprohibit zoom, the display will be the same as the original, tossing for a long time do not know where the problem.

If you are using the widget ui dpi Devices of almost the same size, their screen resolution may also be slightly different, so if you scale according to the width of the screen, maybe some devices look perfect, and some devices are still misaligned. In this case, if you want to achieve the best results, you can only be based on dpi ui

2 . Scaling of ninepatch images

Ninepatch picture is Android a special picture format defined in the image, which is divided into a picture by marking it at the edge of the normal picture . 9 part of it. As shown below:

theNinepatchwhen the graph is scaled, the picture1,3,7,9Four Corners remain unchanged. 2number and8area horizontal scale,4number and6area is scaled vertically,5area is fully scaled.

but toNinepathThe biggest misconception about pictures is thatNinepatchthe Four corners are absolutely non-scaled. Unless the picture is placed in the directorydrawable-nodpior run on the sameDPIon the device,Ninepathwhen the picture is loaded into memory, it will be based onDPIthe ratio is scaled. The so-called Four corners do not scale, refers to the load into memory, and then call the scaling function to zoom, the size of the four corners will no longer change. So we're making rounded corners.ninepathcThe figure should be noted that the size of the specified Four corners should also conform to the preceding rules, depending on the directoryDPIto determine the pixel size of the four corners.

3.     Assign a picture to density

A Ndroid dpi bitmap Class or bitmapdrawable setdensity () and settargetdesnsity ()

Publicfinal class Bitmap implements Parcelable {

public void setdensity (intdensity);

   ......

}

Publicclass Bitmapdrawable extends Drawable {

public void settargetdensity (intdensity);

   ......

}

when these two methods are called, the picture will not follow the default density to scale, but according to our designated density .

Scaling issues with Android image resources