Posted in coding

Layout of a User Interface

After the initial look at Xcode, now is the time to start getting to grips with it. With the tutorials I’m using, I’m starting with the layout elements for the user interface (UI). At this stage, there’s no ‘real’ coding involved. But given how daunting this whole task seems to be, it’s nice to be eased in gently.

interfaceA lot of Xcode’s interface comes from elements that you can select, drag and drop onto the view screen. This, I guess, means that a lot of hard work is done for you – you’re just adapting what’s already there. The only real thing that takes time at this point – and even then, it’s not terribly difficult – is setting the constraints for how the elements should be positioned within the app.

Xcode’s view screen isn’t the true representation of an iPhone screen. Just dropping things in place, doesn’t mean that’s how they will appear when the user opens the app. So, you have to set constraints on how the element will be positioned (for example, how big an image should be and where it should sit on the screen). This means adjusting size ratios and x- and y-axis margins to make things fit. All of this in done from little tab buttons at the bottom of the view screen.

And it’s just a case of moving things about, then checking them in the simulator to see how they look, then adjusting them again if they’re not quite right.

This would normally be a straightforward process, except the MacBook I’m borrowing is apparently steam-powered and can’t run the simulator without crashing on me. Access to another Mac needs administrator permission, so the simulator won’t run at all. Hmmm, might have to hunt down another Mac I can use once I’ve made it through the tutorials and start developing my own app.

There are a couple of little things to look out for when creating these layouts, and their constraints. You have to think about the fact that an iPhone (or any device now) can be turned both portrait and landscape. When creating your UI, you’ve got to make sure the layout is correct for both. There’s a handy little tool for that too – at the bottom of the view, you’ll see wANY and hANY. This is the width and height, and by clicking on it you can adjust the view of the app and set the constraints to that view. Pretty handy.

These really are very early stages in my understanding of Xcode, but so far I’m pretty happy with how simple it is to use. Once we get to some coding, well see how confident I am then!

To follow the same tutorials as myself, check them out here.

And to see my video of the initial book content for my project, check it out here.

Advertisements

One thought on “Layout of a User Interface

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s