foreword
This article only represents my own understanding of UI Jiugongge. If there is any mistake, I hope everyone can point it out.
principle
Jiugongge refers to 9 grids when UI is sliced, and the stretching principle of 9 grids: 1, 3, 7, 9 are not stretched; 2, 8 are stretched horizontally; 4, 6 are vertically stretched; the so-called stretching is actually Whether deformation occurs, horizontal stretching means that only horizontal stretching will produce deformation, vertical stretching will not produce deformation, and the same is true for others.
Do you know the number of Jiugongge on the left and right of the picture below?
The first thing to explain is that the order of the Jiugongge is fixed, that is, the Jiugongge must exist, so the order of the left side in the Jiugongge is 4, and the right is 5; so when stretching the UI horizontally, you can only change the deformation of 5 and vertically Both 4 and 5 will be deformed when stretched, as shown in the following two pictures
Summarize
The UI nine-square grid is the key to making UI. The essence of the UI nine-square grid is based on whether it is deformed. Remembering the function of each grid of the nine-square grid can cope with the ever-changing UI with the same UI principle.