Smartphones and apps have changed our lives big time! There is no end to variety in apps for all business verticals and domains. New tools and technologies keep evolving to enhance the process of mobile application development. Android and iOS are the major players in the world of app market today. The number of iPhone users is increasing each day, which gradually resulted into increase in number of iPhone app downloads. However, iOS apps are not limited to iPhones; Apple has other devices too like iPad. Moreover, all iPhones and iPads have different screen sizes and resolution. So, the iOS applications should be such that they work well on all Apple devices. Creating a UI that looks great on all Apple devices doesn’t seem difficult anymore; thanks to Xamarin!
Xamarin and C# offers an excellent way to develop iOS applications that runs well and looks good on all Apple devices. ‘Xamarin designer for iOS’ tool was introduced which made it possible for the developers to create a full native user interface for iOS for the first time in Visual Studio and to the surprise of everyone, the ease of drag and drop was beyond the Mac based tools of Apple.
One of the best things about Xamarin designer is that, it allows the specification of the constraints on controls. The constraints can let you position and size the controls visually. Apart from positioning and re-sizing, you can also identify the way controls can be anchored to other controls and to the screen, as well as which controls should be resized to make the most out of the larger screens.
Well, the constraint interface is not tough. However, contradictory to that, it is not intuitive immediately too! You need to figure out how it works, or else you will get lost into it and it will be difficult to get out of it then. Here is the basic idea to create the dynamic layout of your iOS application:
Controlling The Position/ Resize Mode
When you click on the control on your storyboard, it gets selected and is ready for resizing, with small circles along the side and corners of the control. So, if you want to change its size, you can drag the small circles. You can drag the control itself, if you want to place it somewhere else on your storyboard layout. There is no X or Y coordinates. However, you can change it from the code.
Anchoring The Position of Control And Automatic Stretching
If your control is already into re-size mode and you click on it again, it goes into the anchoring mode. The small circle symbols on the sides will get converted into the T symbols, coupled with capital I symbols on the right and at the bottom.
- Constant distance between an edge and screen:
If you want a fixed distance between the left or right edge and the screen, you can drag the T on the left or right edge. There will be a small line that will represent anchor. One important thing to remember is that, till the time you specify all the constraints, the outline as well as T and I shaped handles will be orange in color. Once you specify all the constraints and all of them are configured, they will again turn into blue and white. If the outline or handles go red in color, you must understand that there constraints are conflicting and you must change it.
- Constant Distance Between Both Edges and Screen:
If you drag both; left and right edges, it means you want to maintain the specific distance between both edges and screen. This indicates you want to maintain the constant distance and you want to resize the control horizontally.
- Resize Vertically:
You can do the same for the top and bottom edges too, if you want to resize it vertically. However, if you want to anchor it to the top of the screen, all you have to do is drop the handle on the top edge of the control to the green bar at the top labeled ‘Top layout guide’. However, this is not true when it comes to the bottom of the screen. So, do not drop the handle on the bottom edge of the control to the bar labeled ‘Bottom layout guide’. Instead, you must go on the dotted line below the bottom green bar, as it represents the actual bottom of the screen.
- Removing Anchor:
It is extremely easy to remove the anchor. All you have to do is, click on the line that represents anchor and press the delete key. The only time it gets difficult is when the anchor lines are too small to click or there are other elements too close to click on anchor line.
- Removing Constraints:
If you want to remove all the constraints, all you need to do is select all of them and then click on red X button in the upper right corner of the screen of the tool which is there on the right of the word ‘CONSTRAINTS’.
Specifying The Fixed Size of Control
You might have one question in mind, “Among all these, what is the use of those two capital I handles on the bottom and right edge of the control?’ Well, the ‘I’ handles are used to specify the fixed size of the control, making sure it will not stretch.
Another question? How to specify the size? Here is the answer…
To specify the width, click on the ‘I’ handle of bottom edge carefully. Even if your mouse moves a little bit and you click at the wrong place, you will not be able to perform the desired action. So, If you click on the ‘I’ button and you see ‘=’ sign, quickly undo it by pressing ‘Ctrl + z’ and try again.
When you will ‘right click’ it, a small ‘pop up’ will appear. Click on ‘Width’
As soon as you click on it, a new line will appear at the bottom which indicates that the width should remain constant irrespective of the size and shape of the screen.
This was to specify the width! You can specify the height; by following the same process with the ‘I’ handle on the right edge of the control.
We, at Brainvire provide the best in class dot net application development services. So, if you are planning to get an app built for your business, you can request a free quote and we will be glad to take it further from there!
