1. 程式人生 > >Learning Xcode As a Designer

Learning Xcode As a Designer

Color Your Images

One of the many hurdles for designers is having to create multiple assets for multiple instances in the App. Xcode can tint your images, you just need to know how as it’s not consistently used throughout.

A navigation bar button item can be tinted.
A button image can only be tinted if set to System. Pro tip: System will give you a nice transitioned pressed state. UIImage doesn’t allow you to easily tint your images unless in code, so more often than not, you should use UIButton instead. It has far more options.

Use Hex Colors

Coming from a world of Photoshop and Sketch, a lot of designers are used to the Hex code to apply the color. In order to use HEX code, you must download Hex Color Picker to add to your Colors inspector.

It’s also far more precise that the color picker tool.

Embed and Unembed

Think of Embed as Folders

in Photoshop. It allows you to group multiple elements into a UIView or UIScrollView. Since UIViews are super versatile for Canvas animations, organizational or selecting purposes, you may want to embed related elements together.

I love the Embed function so much that I added a custom keyboard shortcut the same as the Sketch shortcut for creating a folder.
As I’m creating multiple queued animations, I grouped those elements into multiple Embeds so I can animate them separately, at different delays.

Autolayouts

This is a feature that scares even the most experienced developers. So let me try to simplify it. It’s a tool that allows you to make your design adaptive. It’s like position: fixed and relative/absolute in CSS.

I want to make the white box horizontally and vertically centered within the canvas. First, let’s open Preview. As we can see here, in the iPhone 4, the white box is automatically resized incorrectly.
By Control dragging the box to the Superview (that’s how they call the canvas), I get the option to Center in Container. Hold Shift and click both Horizontal and Vertical. Then, you must set the width and height of the box.

Yep, that’s basically it. It takes a lot of practice for more complicated scenarios and I would suggest that you watch the WWDC video: Taking Control of Auto Layout in Xcode 5

If you want to save your developer’s time, you should definitely learn Autolayouts.

Dynamic Fonts

iOS 7 introduced the ability to set font sizes based on the user’s preference.

Even with custom fonts, you can set the user’s preferred size using iOS7's Text Styles.

Actions and Dialogs

In Xcode, you can create Action sheets and dialogs very quickly. Why spend so much time on stuff that Apple already perfected for you?

Use already made features so you can focus on the ones that sets your App apart.

Easily Use The Camera

With about 20 lines of codes, you can use the Camera feature in Xcode.

Sounds

Apps are just more fun with sound effects. You can play sounds with one line of code using SimpleAudioPlayer:

[SimpleAudioPlayer playFile:@”filename.mp3"];

Motion Effects

With one line of code using a SimpleMotionEffects, you create this effect:

[self.myView addMotionEffectWithMovement:CGPointMake(15, 15)];

Final Thought

If you start simple, it is possible to build an iOS App in 9 days. iOS Apps can be made as fast as Web apps and it’s just a matter of time until more designers come onboard. We tend to follow where the people who uses our products are.

I wrote a book