5

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?

Vyachaslav Gerchicov
  • 2,317
  • 3
  • 23
  • 49

1 Answers1

9

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.

Caleb
  • 124,013
  • 19
  • 183
  • 272
  • 2
    Note that if you are tiling instead of stretching then the middle bit is the size of the individual tiles that will be repeated. – Fogmeister Jan 10 '18 at 13:59
  • That's right. You can switch between stretching and tiling in the Attributes Inspector. – Caleb Jan 10 '18 at 14:06
  • @Caleb 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. – Vyachaslav Gerchicov Jan 11 '18 at 08:08
  • @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. – Caleb Jan 11 '18 at 14:33
  • @Caleb 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 – Vyachaslav Gerchicov Jan 12 '18 at 09:26
  • @VyachaslavGerchicov Just select the behavior you want in the Attributes inspector in the editor, as I said. You can see it in the [picture](https://help.apple.com/xcode/mac/8.0/en.lproj/Art/AC_slicing_resizable_area.png) 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. – Caleb Jan 12 '18 at 12:04