preface
Stretching scenarios are common in large project development, and in these scenarios.9 images can be extremely useful. For example, when developing prompt bubbles, the bubble background should be extended as the number of words increases, and this bubble background is used.9 Figure (as shown below)
format
- The suffix format of the.9 figure is.9.png
role
- 9 The figure can be stretched, such as horizontal and vertical extension, while the clarity remains unchanged.
- Make a picture to achieve a variety of stretching effects, reduce the use of UI cut map, reduce package volume.
In the original drawing provided by UE, there will be black lines around the picture, and these black horizontal lines are exactly the principle of drawing.9.
9 diagram principle, black line function
- The top line represents the part of the horizontal extension where all other positions remain the same.
- The bottom line represents the horizontal display area when the content is extended horizontally.
- The vertical line on the left represents the vertical extension, while other positions remain unchanged. Here the horizontal line is the vertical extension.
- The vertical line on the right represents the display area in the vertical direction when extending vertically.
Import a.9 image into Android Studio’s Drawable folder, as shown below.
The three pictures on the right, i.e.9. Vertical stretching, horizontal stretching, horizontal and vertical stretching at the same time.
9 Display area of the figure content
Once you understand what the black bars do, it’s easy to customize the display area for the content of the.9 figure. Just move the position of the four black horizontal lines and the part that forms the intersection of the two rectangles (the pink area below) to view.
Notice the stretching of the tip triangle
It is worth noting that if the.9 drawing is bubble-shaped and has a pointed triangle, if you do not want to change the shape of the triangle when the image is stretched, you can cut the black line at the top or left for stretching into two parts, as shown below. This can be avoided.9 The figure also stretches the triangle region.
The error is that the Angle of the tip triangle is also changed.
Inside margin problem
Since the display area of the.9 figure is stretchable, when the black line does not fit close to the edge of the 9 figure, but is separated by a distance, that distance is the inner margin of the.9 figure. The length of the four black lines connecting the pink area in the figure below, i.e. the size of the inner margin.
When you use the.9 diagram in your layout code, you don’t need to write the padding. If you write a padding property, it will conflict with the inner margin of the.9 image and become invalid.
Margin problem
9. The UI display area in Android Studio is clearly set to be close to the top edge area, but why is it separated from the top when running on the real machine?
- The reason for this is that.9 images have a margin like margin, the distance between the image and the black line.
The four black boxes present in the figure below are the margin background of figure.9.
If you want to solve this problem without margins, you need UE to re-crop a new picture and cut off the distance between the picture and the black line.
Compile failure problem
When using a.9 diagram as a background, it is sometimes possible to fail a compilation.
AAPT: error: file failed to compile.
Copy the code- This is most likely due to the lack of a black line on one side, so that the content display area is not defined in the.9 figure, resulting in compilation failure.
- The solution is to stretch the black lines so that the black lines appear all around the image, showing the content in the display area of.9.
More technical articles welcome to pay attention to the public account Xiong.