Friday 15 August 2014

ios8 - iOS Custom Keyboard Autolayout -



ios8 - iOS Custom Keyboard Autolayout -

what constraints should add together in interface builder custom keyboard deed built in 1 when user changes orientation in images below (all buttons stretch horizontally , shrink vertically equal spaces between them).

this pretty easy (if know how autolayout).

so first of all, drag buttons(or uiview) you'd have background view. , manually layout them wanted.

and start first row (q~p), constraints setup this

q -> leading space container: 4px

p -> trailing space container: 4px

q-w, w-e, e-r, r-t, t-y, y-u, u-i, i-o, o-p has horizontal space 4px

the interesting part determine width, allow q-w, w-e, e-r, r-t, t-y, y-u, u-i, i-o, o-p have equal width. why setting constraint? because 1 time fixed q leading, p trailing , gaps, setting them equal width automatically allow first row buttons as share rest of keyboard width (which our button width). forgot mention, wertyuiop should center y q.

now determined first row button width.

how determine height? thought same, total keyboard height comprised of top margin(the gap on top of q) , bottom margin (the gap below space, or 123), gap between rows , 4 * button height.

so, can setup constraints this, utilize q, a, z , 123 determine button height.

q -> top space container: 4px 123 -> bottom space container: 4px q-a, a-z, z-123, have vertical space 4px , set height equal did button width.

then can add together constraints w-p, have equal height q (we determined height q, a, z, 123).

now first row determined, next consider sec row. need reference base of operations x position of sec row, can maybe add together constraint g center horizontally container view, setup gaps buttons in sec row same first row(in example, 4px). have 2nd row determined.

for 3rd row, easy, need position each button 2nd row. example,

z -> center x s -> equal width s

remember have determined y position , height z, no need anymore. x-m, center them z y, center them 2nd row button x, equal width 2nd row button , equal height z.

i hope idea, major part of autolayout find base, need have starting point start elements know should container view size changes.

hope helps.

ios8 autolayout nslayoutconstraint custom-keyboard

No comments:

Post a Comment