Meaning of the middle line on xcode asset slicing?

Question

Official documentaion:

https://help.apple.com/xcode/mac/8.0/#/deve65bd8d0d

3 vertical lines: - left line shows the left unstretchable area - right line shows the right unstretchable area But can't understand what does the middle vertical line actually do. Could you explain how does it work?

Inheritance

Answer 1

But can't understand what does the middle vertical line actually do. Could you explain how does it work?

The middle line controls the width of the resizable part of the image. When you're done with vertical slicing, you end up with three parts: the left part, the right part, and a center part that will be stretched (or tiled) to let the image fill whatever space you need. The center part is the area between the left and middle lines. Notice that the area between the middle and right lines is shaded, indicating that that part of your original image will be removed from the sliced asset.

Note that you can also slice horizontally or horizontally and vertically. If you slice in both directions, you end up with what's known as a nine patch image, where there are unstretchable parts for the four corners, horizontally stretchable parts for the top and bottom edges, vertically stretchable parts for the left and right edges, and a vertically and horizontally stretchable center section.

Gielgud

Note that if you are tiling instead of stretching then the middle bit is the size of the individual tiles that will be repeated. – Carnivore

That's right. You can switch between stretching and tiling in the Attributes Inspector. – Gielgud

@Gielgud could you please also add more info about tiling/stretching? Usually I use such slicing when the resulting image should look like the same independently on using of stretching or tiling. And the official documentation doesn't provide all the necessary info about it. – Inheritance

@VyachaslavGerchicov I'm not sure what more there is to say about it beyond just explaining that tiling vs. stretching applies to the stretchable parts of the image - the center and the edges, but not the corners. Tiling means that the given part of the image will be expanded by copying that part over and over to fill the space, just like floor tiles. Stretching means that the part will be expanded by scaling that part. If you're filling the space with a gradient, you probably want stretching; if you're filling it with a repeating pattern, you probably want tiling. – Gielgud

@Gielgud I understand the difference between stretching and tiling. I mean how the application determines what to use - stretching or tiling and how can programmer influence on this behaviour – Inheritance

@VyachaslavGerchicov Just select the behavior you want in the Attributes inspector in the editor, as I said. You can see it in the picture at the bottom of the "official documentation" you linked in your question -- it's the menu labelled "Center" with a popup that's set to "Tiles". If you want to change the behavior programmatically, you can set the resizingMode property for the image after you've loaded it. – Gielgud