Autoplay custom iOS keyboard
What constraints should Interface Builder add to a custom keyboard to act exactly like the built-in keyboard when the user changes orientation like in the images below (all buttons stretch horizontally and shrink vertically with equal spacing between them). In the meantime, there is no need to know about it. ”
source to share
It's pretty easy (if you know how to autostart).
So first of all, just drag and drop the buttons (or UIView) that you would like to have in the background. And manually place them the way you like.
And I would start from the first line (Q ~ P), the constraints could be configured like this
Q -> leading space for container: 4px
P -> trailing space for container: 4px
QW, WE, ER, RT, TY, YU, UI, IO, OP have horizontal space like 4px
The interesting part is to define the width, just let QW, WE, ER, RT, TY, YU, UI, IO, OP have the same width. Why are we setting this limit? Because after you have set the Q-Leader, P-Trailing and all gaps, by setting them to equal widths, automatically allow all buttons in the first row to equally distribute the rest of the keyboard width (this is our button width). Recall that WERTYUIOP must center y to Q.
Now you have just defined the first line with the width of the button.
How do you determine the height? The idea is the same, the total keyboard height consists of the top edge (top gap Q) and bottom margin (gap below space or 123), line spacing and 4 * button height.
So, you can set constraints like this using Q, A, Z and 123 to define the height of the button.
Q -> top space for container: 4px 123 -> bottom space for container: 4px QA, AZ, Z-123, all have a vertical space of 4px and then set their heights to equal, just like what we did for the width of the buttons.
Then you can add constraints on WP to have equal height with Q (we just defined height for Q, A, Z, 123).
Now the first line is correctly defined, then we'll look at the second line. We need a reference base for the x position of the second row, you can add a G constraint for the horizontal horizontal view of the container and then set the spacing for all buttons in the second row to be the same as in the first row (in this example, 4px) ... you have now identified the 2nd row.
For the 3rd row, it's very simple, you just need to place each button with a second row. For example,
Z -> center x - S -> equal width to S
Remember that we defined the y position and height for Z, so you don't need to do that anymore. For XM, center them on the Z for y, center them on the 2nd row button for x, equal to the width on the 2nd line and equal to the height on Z.
I hope you get the idea that the main part of autorun is to find the BASE, you need to start submitting so that all items know where they should be as the container resizes.
Hope it helps.
source to share