Xcode Slicing Fine Solutions

slicing and picture stretching

The image slicing feature has been supported since Xcode 5, which is a very powerful feature that solves the tension problem of irregular images to some extent. However, many students do not know this function, or in the understanding of the function is not thorough, resulting in the use of such problems.

Simply put, this feature is used to stretch the picture, which is the visual version of the two methods: Stretchableimagewithleftcapwidth:topcapheight: Method (discarded) or Resizableimagewithcapinsets:resizingmode: Method

For example, the artist gives you such a bubble chart:

How to use this figure. Because chat bubbles will follow the amount of text content, such as these chat bubbles:

The background images of these chat bubbles are used by the artwork, but are stretched to the extent of the chat content. Because the art of the bubble picture is not a regular picture (four square), then how to stretch it becomes a problem. For example, some parts of the picture can be stretched, and some parts remain intact.

This is the origin of the above two functions. These two functions are used for stretching the "irregular" picture. They will "protect" certain parts of the picture, where the images are not stretched and the unprotected parts are stretchable. This "protected" part is generally located in the 4 corners of the picture. For example, the art of the bubble picture, we can protect its 4 corners, located in the four corners of the pixel is not stretched, but other pixels can be stretched.

As an example of the above bubble chart, let's see how we can stretch it with the slicing function. Simple Operation

Drag the picture to the assets. Note Slicing only supports images that are in Assets. Open Assets, select this image and you will see a show slicing button in the lower right corner:

Click on it, the image appears on the Start slicing button:

Click on this button and there are 3 icon buttons:

These 3 options indicate: stretched left and right, stretched up or down, stretched up and down.

For our bubbles, the upper and lower left stretches should be used. Because the chat content will make the bubbles grow longer, there will be a higher bubble. If the picture is only longer, then you can choose left and right stretching, so when you do not need to consider the drawing of the upper and lower tension, transduction when the left and middle to cut. Conversely, if the picture will only become high, then you can choose to stretch up and down, transduction when you press the upper and lower cut on it.

The latter two are relatively simple to cut, and we do not discuss this situation.

Select "Stretch up and down" and you'll see a few more dashed lines on the picture, dividing the graph into 9 areas:

These dashed lines are 3 vertical bars and 3 horizontal line respectively. Note that by default, the left 2 vertical lines and the top 2 horizontal lines will be stacked together, and you will not notice them.

Keep it that way, because the default Xcode makes a "smart" transduction of the picture, and in most cases, this kind of cut-off is what we need.

Open Main.storyboard, drag into a few different sizes of image view, and set the image property to this bubble chart. Run the app and you'll see that the picture is perfectly stretched according to the frame of the picture:

It's amazing that we didn't do anything except a few buttons. about slicing

What the hell did slicing do. Then look at Xcode's slicing interface.

Some of these areas are covered by the gray mask area. These areas are actually discarded. This means that the artwork will eventually be partially removed from Xcode (the gray part), and this looks like this:

This is the reason why the word slicing (cut chart). I zoomed in a little, notice that the area between the first horizontal line/vertical bar and the second horizontal/vertical bar is the horizontal, vertical two 1-pixel blue line of the intersection with the point marked red in the figure. These lines belong to the "sample area". The 4-corner area of four weeks is the "protected area". That is, when the picture is stretched, the "protected area" is displayed as is, not stretched, and the other "unprotected areas" are stretched by using "sample area" to replicate (there are two ways of copying it: tiling or stretching). The "sample" area is defined as the area between the first line and the second line. That is, the first horizontal line and the second horizontal line, and the area between the first and second vertical bars.

Note: The first and second lines are not completely coincident, and the spacing between the two will be 1 pixels apart, because the "sample" must have at least one pixel, otherwise no sample pixels can be copied when stretched.

If the picture is stretched horizontally (that is, transduction width beyond slicing), the area between the first 22 vertical bars is copied (stretched or tiled horizontally) to fill the extra area. If the picture is stretched vertically (that is, the height of the transduction after the height of the slicing), the area between the first 22 horizontal lines is copied to fill the extra area. If the picture is stretched horizontally and vertically at the same time, the horizontal and vertical two actions are performed simultaneously.

From the above, we can see that the default transduction operation of Xcode is not perfect. In fact, the protection area is still part of the area can be removed, because they also have a part of the area is a regular graph (rectangle), it is easy to "copy" the way to clone it. For example, the following image:

The red box area on the first line and the red box below the third line are the protected areas of the vertical stretch, but they are all regular shapes (rectangles) that can be cloned by "copying", so they can be completely cut off.
So we can adjust the position of the three horizontal lines and remove the two sections from the "Protected area":

The part that is actually retained should be:

In addition to the "protected area" that is not well copied, we have left only the "sample area" of 1 pixels. General steps for slicing

From the above example, we know that the slicing process can actually be divided into 3 steps: Cut off the superfluous part of the original image. The so-called superfluous part, which is the area in the picture that can be reproduced by simple stretching. This area has two, one is the horizontal copy area (the second vertical line and the third vertical line between the area), these areas are a continuous rectangular area, when the picture is stretched horizontally, the area is copied horizontally. The second is the vertical copy area (the area between the second horizontal line and the third horizontal line), which is also a contiguous rectangular area, which is obtained by vertical copying when the picture is stretched vertically. Because these zones can be simply copied through the Resizableimagewithcapinsets function, they are not required to be preserved, they can be populated at run time based on content, how much you want resizableimagewithcapinsets The number of functions is generated, so this part is superfluous and does not need to be placed in the picture, these pixels are generated by code. Delimit the "sample" area. Since replication is required, there must be a copy of the "sample". Correspondingly, the "sample" area will also be divided into two, one is a transverse copy of the sample, and the other is a vertical copy of the sample, respectively, as a copy of the horizontal and vertical replication samples. In most cases, the sample area only needs to be 1 pixels wide. After setting the sample area, the "Protected area" is automatically delimited. Because of a perfect stretch chart, except for the sample area, only the "protected area" is left (because the "superfluous" part has been removed in the 1th step). This step does not require any action, and when the previous step is done, it will naturally complete.

In summary, the purpose of the slicing is to remove the rules section of the diagram, leaving only the irregular parts and a sample of 1 pixels. The reason for this is that the rules section is easy to copy, and the irregular parts are not copied, only left intact. As to why the irregular part is not good to copy, it is necessary to ask resizableimagewithcapinsets function. Because the Resizableimagewithcapinsets function can only do a simple two-direction copy (that is, only a rectangular pixel fill), there is no "smart" to the extent that it can be copied along an irregular path (that is, a pixel fill of complex graphics). slicing convert to Resizableimagewithcapinsets function

In fact slicing can also be easily converted into resizableimagewithcapinsets function stretching. In the process of slicing, in order to achieve a perfect cut graph, sometimes must be on the dotted line pixel-level movement, for mouse operation, pixel movement is not convenient, this time we can use the properties panel in the slicing area to do:

Where: Left adjusts the position of the first vertical bar distance to the Ieft. Right adjusts the position of the third vertical bar distance to the left. Top adjusts the position of the first horizontal line from the top. Bottom adjusts the position below the third horizontal line statement. Center specifies how to extrude (copy): Tiles represents tiling, and streches represents stretching. Width adjusts the horizontal spacing between the first and second vertical bars. Height adjusts the vertical spacing between the first horizontal line and the second horizontal line.

These parameters do not look familiar (the first 5 parameters). Yes, it is the reason for the two parameters in Resizableimagewithcapinsets.

So with these parameters, you can convert the slicing in the diagram above into the Resizableimagewithcapinsets function implementation:

uiimage* image = [UIImage imagenamed:@ "Combined Shape3"];

image = [Image Resizableimagewithcapinsets:uiedgeinsetsmake (max, Max, Resizingmode:uiimageresizingmodetile)];
_imageview.image = image;

Build & Run, you will see the following effects:

What the hell is this? Notice the name of the picture file, the code is used Combined Shape3, but in fact this file is displayed in the Project Navigator as Combined Shape3@3x.png, which indicates that this is a device-related graphics file, and The Resizableimagewithcapinsets function is device-independent.

So you can remove the @3x from the file name and downgrade the image to a device-independent image. Alternatively, change the value of the parameter in the slicing Properties panel to device-independent pixel units by dividing it by 3, as follows:

image = [Image Resizableimagewithcapinsets:uiedgeinsetsmake (13.333, +) Resizingmode:uiimageresizingmodetile] ;

Run the APP and you'll see:

Perfect.