1. | Build a Mobile Experience
www.innovationm.com
iOS - Best Architecture, Design and Coding
Practices
Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com
2. | Build a Mobile Experience
www.innovationm.com
iOS – Best Architecture, Design and Coding Practices
We have identified some of the best practices that we need to follow while working on
architecture, design and development of iOS applications. We will keep on adding more
and more to it. Stay tuned…
Best Coding Practices
Image files naming convention
There are four types of devices that we need to support while developing iOS
Application. These are:
1. iPhone (Non-Retina)
2. iPhone (Retina)
3. iPad (Non-Retina)
4. iPad (Retina)
Naming convention:
Image is username.png. There are 4 images created for supporting 4 types of devices.
Here is the naming convention:
iPhone:
username~iphone.png (Non-Retina)
username@2x~iphone.png (Retina)
iPad:
username~ipad.png (Non-Retina)
username@2x~ipad.png (Retina)
How to refer them in the code and storyboard
Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com
3. | Build a Mobile Experience
www.innovationm.com
Referring this image in the code:
[UIImage imageNamed:@"username"];
Referring this image in the storyboard:
iPhone storyboard:
<imageView userInteractionEnabled=”NO” contentMode=”scaleAspectFit”
horizontalHuggingPriority=”251″ verticalHuggingPriority=”251″ image= “username.png”
translatesAutoresizingMaskIntoConstraints=”NO” id=”4d0-HY-bjJ”>
<rect key=”frame” x=”11″ y=”14″ width=”23″ height=”23″/>
<autoresizingMask key=”autoresizingMask” widthSizable=”YES” heightSizable=”YES”/>
<constraints>
<constraint firstAttribute=”height” constant=”23″ id=”M1s-uZ-vgv”/>
<constraint firstAttribute=”width” constant=”23″ id=”lrU-RP-6NN”/>
</constraints>
</imageView>
iPad storyboard:
<imageView userInteractionEnabled=”NO” contentMode=”scaleAspectFit”
horizontalHuggingPriority=”251″ verticalHuggingPriority=”251″ image= “username.png”
translatesAutoresizingMaskIntoConstraints=”NO” id=”4d0-HY-bjJ”>
<rect key=”frame” x=”11″ y=”13″ width=”25″ height=”25″/>
<autoresizingMask key=”autoresizingMask” widthSizable=”YES” heightSizable=”YES”/>
<constraints>
<constraint firstAttribute=”width” constant=”25″ id=”NeQ-Pc-jIn”/>
<constraint firstAttribute=”height” constant=”25″ id=”v7K-G6-sTx”/>
</constraints>
</imageView>
Benefits:
1. When you run the app then OS will pick-up the right image for non-retina / retina
device and also for iPhone and iPad.
2. Ease of managing the images.
Source: http://blogs.innovationm.com/ios-best-architecture-design-and-coding-practices/
Corporate Office:
InnovationM Mobile Technologies
E-3 (Ground Floor), Sector-3, Noida 201301 (India)
t: +91 8447 227337 | e: info@innovationm.com