1

I'm a newbie in mobile technology and developing an iOS application using Xamarin.iOS in VisualStudio. I got a basic doubt while designing the screen for the devices.

  1. How to design a screen for an iOS application which can be responsive for all the devices like 4,4s,5,5s, 6, 6 Plus?
  2. If it cannot be made responsive, is it wise to use seperate layout for each device's resolution?
  3. Is there a way to change the storyboard of the ViewController dynamically? So that I can make several storyboards for each device (Not sure it's a good approach)

Please find the attached for more detail

enter image description here

Community
  • 1
  • 1
Nagaraj .
  • 425
  • 1
  • 5
  • 13

2 Answers2

2

Use Auto Layout. Here are two Xamarin guides on how to use it

http://developer.xamarin.com/guides/ios/user_interface/designer/designer_auto_layout/

http://developer.xamarin.com/guides/ios/user_interface/controls/part_7_-_layout_options_and_themes/

Jason
  • 86,222
  • 15
  • 131
  • 146
  • I have already enabled auto layout property and have set the constraints for each elements. Here is a basic simple example. I created a layout for 3.5" simulator and placed an image with the constraints (87px from Top) which needs to be extended automatically when it goes to 4" screen. But I find no difference even in the 4" inch simulator at runtime. The image stays at the same place and doesn't get moved even a single point. – Nagaraj . Nov 07 '14 at 09:30
  • Without a detailed description of everything you did with constraints, it is not possible to debug. You might have set too many of them. – miguel.de.icaza Nov 07 '14 at 20:13
  • Please see the my attachment I newly added. Can you tell me what I'm doing wrong in that? – Nagaraj . Nov 08 '14 at 10:32
0

With XCode 6 and a current version of Xamarin Studio, you can use storyboards with adaptive layouts. They are supposed to be backwards compatible at least to iOS 7 and probably iOS 6 as long as you set the compilation target to the correct OS version, although some size classes might not be supported on older devices. Make sure you test the layout in the simulator before committing. Adaptive (responsive) storyboards allow you to create a single storyboard which covers all device configurations, and are preferable to creating individual storyboards for each layout. This link has an excellent guide to how this works with XCode, and I recommend you have a look at it.

The biggest challenge when doing this is using Xamarin Designer, which is more quirky and not quite as polished as XCode. There are some key points you should keep in mind (Xamarin Studio 5.9.3):

  1. Make sure you read the Auto Layout With the Xamarin Designer guide first, and use manually-specified constraints to responsively position your controls

  2. As the tutorial says, start by creating a very general layout using the "View as: Generic" in the Xamarin Storyboard Designer menu. You can preview how the layout will look on different devices, orientations and OS versions by selecting from the "View as" menu.

  3. Every control and every constraint can either be "Installed" (active) or "Uninstalled" (not active) for each of the 4 combinations of Size Classes. In line with point (2), all your constraints should be exclusively installed for the "width any, height any" size class except those that require special treatment for a particular size class.

  4. You add a size class customization to a control or constraint with the gear at the bottom of the "Widget" or "Layout" property section, respectively. You delete the customization with the minus on the left side of this panel. Note that if you select a specific size class in the top-left corner of Xamarin Designer, any constraint changes that you make will get added to the selected size class! This functionality can be non-intuitive, so be careful and check the Properties window when you've made a change.

  5. To see or edit a specific constraint, select the control, select "Layout" in the Properties window, click the gear next to the constraint and click "Select and edit". At the bottom of the tab that opens is the size class installation properties of this particular constraint, and you need to customize this for the controls/constraints that require custom behavior in your responsive design.

Hope this helps.

Community
  • 1
  • 1
Geir Smestad
  • 1,344
  • 2
  • 15
  • 25