App Production: Constraints

What it is?/How it works?

The definition a the term constraint is something which is a limitation or restriction. In the case of swift the constraints are the factor which allocates the positioning of the object on the screen, it limits and restricts the position or movement of the objects you have in the view. It allows you to compare the position of the object to the edge of the view or to another object in that view. In theory this gave us the opportunity to have our app display the same proportion on different screen sizes.

How we had to use it?

The reason why we had to use constraints accompany for different sizes, as we wanted to be able for people with iPhone4s to iPhone6 to all be able to use our app in the same way. As our app design is quite simple, features a vary of buttons and images all similar sizes, our task was the keep the spacing between the buttons and their sizes the same and it was also important to keep the image ratio intact so it doesn’t look stretched of the original.

As an example the main question page included lots of constraints and was the trickiest to make work, due to the amount of elements in that view. There is 4 buttons all the same size, so the constraints had to keep the spacing between the buttons; the positioning of the button and the all of sizes the same, there is a image button at the top of the view which is square so again the constraints had to keep the positioning and it also had to keep the ratio of the original image so it didn’t create a stretched image. Finally there was a row of images at the bottom of the view for the progress bar, the constraints for this section the same as the other elements, it had to keep the positioning, all the images the same size and the ratio of the images.

The problems we had with it?

We knew what we had to in theory, but because of a lack of knowledge in using constraints and not much being documented on the topic we found really hard to make the responsive for all the iPhone sizes. Our problem was that when the app was run on a smaller screen for example iPhone4s’s 3.5 inch screen all of the option buttons was all squashed together and the top play button stayed the same size as on a big screen so was to big for the smaller screen and the progress images did the same thing.

How we fixed the problem?

After consulting our teacher, we found out that most of the constraints were good but the thing that making the app look squashed were the constraints which had a constant. A constant is value which always stays the same no matter the situation. The constraints which had a constant was the size of the play button image which is why it was so big on the small screen and some of the spacing constraints had constant values. So once we changed these constants to flexible values which change depending on the screen size we fixed our original problem.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s