Your (Forgotten) Friend Inside Xcode - Interface Builder

Transcript

1. Your (Forgotten) Friend Inside Xcode...
2. Interface Builder
4. I can't imagine how anybody is able to build an app with IB and not going crazy. — Me, about 3 years ago
5. ! No reusablity Conflicts when working with others Fragile AutoLayout support
6. Agenda 1. AutoLayout 2. Reusability 3. Collaboration & Organization 4. Behaviours
7. ! AutoLayout
8. - (void)layoutSubviews { [super layoutSubviews]; CGFloat inset = ContentPadding().left + 20; CGSize contentSize = CGRectInset(self.bounds, inset, 0).size; CGRect frame = self.imageView.frame; frame.origin.x = floorf((self.bounds.size.width - frame.size.width) / 2); frame.origin.y = floorf(self.center.y - frame.size.height); self.imageView.frame = frame; _titleLabel.frame = (CGRect){ .origin = {inset, CGRectGetMaxY(frame)}, .size = {contentSize.width, 80} }; }
9. layoutSubviews
10. ♻ Reusability
11. Reusable Interface Components
12. Reusing UITableViewCells and UICollectionViewCells
13. Reusable "Use UITableViewCells in a type-safe way, without manipulating their String-typed reuseIdentifiers" https://github.com/AliSoftware/Reusable
14. What about ordinary views? — You
15. Roadblocks ! Xib Loading ! Xib Referencing
16. Xib Loading let nib = UINib(nibName: "RandomView", bundle: nil) let view = nib.instantiateWithOwner(nil, options: nil).first as? RandomView ! import Reusable class RandomView: UIView, NibLoadable { // The rest of the view code goes here } let view = RandomView.loadFromNib()
17. Xib Referencing: Option A // RandomView.swift override func awakeAfterUsingCoder(aDecoder: NSCoder) -> AnyObject? { if subviews.count > 0 { return super.awakeAfterUsingCoder(aDecoder) } let view = self.dynamicType.loadFromNib() // Transfer some common properties view.translatesAutoresizingMaskIntoConstraints = translatesAutoresizingMaskIntoConstraints // frame, backgroundColor, alpha, ... // Transfer Constraints for placeholderConstraint in constraints { // Check out the example project } return view }
18. Xib Referencing: Option B // RandomView.swift required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) let nibView = self.dynamicType.loadFromNib() nibView.translatesAutoresizingMaskIntoConstraints = false addSubview(nibView) nibView.leadingAnchor.constraintEqualToAnchor(leadingAnchor).active = true nibView.trailingAnchor.constraintEqualToAnchor(trailingAnchor).active = true nibView.topAnchor.constraintEqualToAnchor(topAnchor).active = true nibView.bottomAnchor.constraintEqualToAnchor(bottomAnchor).active = true }
19. ! " Collaboration & Organization
21. This begs for problems
22. Modularize Your UI
23. One Storyboard Per Context
24. Example Stories → Registration / Login → Onboarding → Settings
25. Refactoring Storyboards
26. Secondary Views
27. The Hidden View Problem
28. Secondary Views
30. Working with Designers !
31. Colors !
32. enum AppColors { static func blackColor() -> UIColor { return UIColor(red: 0.000000, green: 0.000000, blue: 0.000000, alpha: 1.000000) } static func grayColor() -> UIColor { return UIColor(red: 0.265146, green: 0.265153, blue: 0.265149, alpha: 1.000000) } }
33. ~/Library/Colors/UIKonf.clr
34. ✨ Behaviours
35. Behaviours are... ... specific. ... isolated. ... reusable. ... composable.
36. Example Behaviours → Animations → Text Validations → Keyboard Handling
37. Limitations → Documentation → Passing objects using segues → Source Control
38. Conclusion → Keep your IB-Files small and modular → Use IB where it makes sense ... → ... and code where it does not
39. ☕ ! https://github.com/fonkadelic/UIKonf