iOSのコードベースレイアウト

Transcript

1. iOSͷίʔυϕʔεϨΠΞ΢τ Mobile Act TOKYO #5 @shtnkgm

2. iOS Engineer Shota Nakagami @shtnkgm

3. ࿩͢͜ͱ • iOSͷUIϨΠΞ΢τख๏ͷൺֱ • ίʔυϕʔεϨΠΞ΢τ Tips

4. UIͷϨΠΞ΢τख๏ • ϓϩάϥϜͰهड़ʢίʔυϕʔεʣ • Storyboard • Interface BuilderʢXIBʣ

5. ͦΕͧΕͷಛ௃

6. StoryboardͱXIBͷಛ௃

7. ྑ͍ͱ͜Ζ • ෳ਺ͷը໘αΠζͰ෼ذɺݟ͑ํνΣοΫʢSize Classesʣ • Ϗϧυલʹ੩తͳ੍໿ͷݕࠪ • Storyboardͷ৔߹͸Segue͕࢖͑Δ

8. ΠϚΠνͳͱ͜Ζ • ίϐϖ΍ɺΧελϜΫϥεԽͳͲͷ࠶ར༻ɾमਖ਼͕ͮ͠Β͍ • XMLͳͷͰίϯϑϦΫτͷղফɺίʔυϨϏϡʔ͕೉͍͠ • GUIͰΆͪΆͪ͠ͳ͍ͱԿ͕ઃఆͯ͋͠Δͷ͔ٯʹΘ͔Βͳ͍

9. ίʔυϕʔεϨΠΞ΢τͷಛ௃

10. ྑ͍ͱ͜Ζ • ίϐϖ΍ίʔυஔ׵ͳͲͰεϐʔσΟʹ࠶ར༻ɾमਖ਼͕Մೳ • ίϯϑϦΫτͷղফ΍ϨϏϡʔ͕͠΍͍͢ • Կ͕ઃఆͯ͋͠Δͷ͔Ұཡੑ͕͋Δ

11. ΠϚΠνͳͱ͜Ζ • UIKitͷϓϩύςΟ΍ϥΠϑαΠΫϧʹؔ͢Δ஌͕ࣝඞཁ • ࣮ߦ͢Δ·Ͱݟ͑ํ͸૝૾

12. Dependency Injectionͷҧ͍

13. Storyboard // NG: ίϯετϥΫλΠϯδΣΫγϣϯ͸ෆՄ let viewController = ViewController(dependency: Dependency()) //

    OK: ϓϩύςΟΠϯδΣΫγϣϯʹͳΒՄ let storyboard = UIStoryboard(name: "ViewController", bundle: nil) let viewController = storyboard.instantiateInitialViewController() viewController.dependency = Dependency()

14. XIB / ίʔυϕʔε class ViewController: UIViewController { let dependency: Dependency

    init(dependency: Dependency) { self.dependency = dependency super.init(nibName: nil, bundle: nil) } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } }

15. ൺֱ߲໨ Storyboard XIB ίʔυϕʔε ➡ Segue͕࢖͑Δ ✅ # GUIͰݟͯΘ͔Δ ✅

    ✅ $ αΠζ෼ذ͕༰қ ✅ ✅ % ੩తνΣοΫ ✅ ✅ &ίϯετϥΫλDI ✅ ✅ ♻ ࠶ར༻ੑ ✅ ( ίϯϑϦΫτ଱ੑ ✅ ) ϨϏϡʔ͠΍͢͞ ✅

16. I ! Code-based Laout

17. ίʔυϕʔεϨΠΞ΢τTipsʢ6ͭʣ

18. 1. Initialization Closure

19. class ViewController: UIViewController { let priceLabel = UILabel() // એݴ

    let imageView = UIImageView() // એݴ override func viewDidLoad() { super.viewDidLoad() priceLabel.numberOfLines = 2 // ϓϩύςΟઃఆ priceLabel.textColor = .red // ϓϩύςΟઃఆ priceLabel.font = .boldSystemFont(ofSize: 14) // ϓϩύςΟઃఆ imageView.contentMode = .scaleAspectFill // ϓϩύςΟઃఆ imageView.clipsToBounds = true // ϓϩύςΟઃఆ imageView.layer.cornerRadius = 4 // ϓϩύςΟઃఆ // addSubview, AutoLayout... } }

20. class ViewController: UIViewController { let priceLabel: UILabel = { let

    label = UILabel() label.numberOfLines = 2 label.textColor = .red label.font = .boldSystemFont(ofSize: 14) return label }() let imageView: UIImageView = { let view = UIImageView() view.contentMode = .scaleAspectFill view.clipsToBounds = true view.layer.cornerRadius = 4 return view }() override func viewDidLoad() { super.viewDidLoad() // addSubview, AutoLayout... } }

21. 2. Then

22. class ViewController: UIViewController { let priceLabel: UILabel = { //

    ܕΞϊςʔγϣϯ let label = UILabel() // ϩʔΧϧείʔϓͰͷ໋໊ label.numberOfLines = 2 // label label.textColor = .red // label label.font = .boldSystemFont(ofSize: 14) // label return label // ੜ੒ͨ͠Πϯελϯεͷreturn }() let imageView: UIImageView = { // ܕΞϊςʔγϣϯ let view = UIImageView() // ϩʔΧϧείʔϓͰͷ໋໊ view.contentMode = .scaleAspectFill // view view.clipsToBounds = true // view view.layer.cornerRadius = 4 // view return view // ੜ੒ͨ͠Πϯελϯεͷreturn }() override func viewDidLoad() { super.viewDidLoad() // addSubview, AutoLayout... } }

23. class ViewController: UIViewController { let priceLabel = UILabel().then { $0.numberOfLines

    = 2 $0.textColor = .red $0.font = .boldSystemFont(ofSize: 14) } let imageView = UIImageView().then { $0.contentMode = .scaleAspectFill $0.clipsToBounds = true $0.layer.cornerRadius = 4 } override func viewDidLoad() { super.viewDidLoad() // addSubview, AutoLayout... } }

24. Thenͷ࣮૷ public protocol Then {} extension Then where Self: AnyObject

    { public func then(_ block: (Self) throws -> Void) rethrows -> Self { try block(self) return self } }

25. 3. ΧελϜΫϥε

26. ΧελϜΫϥεͰ࠶ར༻ੑΛߴΊɺΑΓγϯϓϧʹ class ViewController: UIViewController { let priceLabel = PriceLabel() //

    ΧελϜΫϥεԽ let imageView = ItemImageView() // ΧελϜΫϥεԽ override func viewDidLoad() { super.viewDidLoad() // addSubview, AutoLayout... } }

27. 4. lazy var

28. private let captureButton = CaptureButton().then { $0.onTapped = { [weak

    self] in // selfࢀর͍ͨ͠ self?.camera.capture() // selfࢀর͍ͨ͠ } }

29. private let captureButton = CaptureButton().then { $0.onTapped = { [weak

    self] in // ίϯύΠϧΤϥʔ self?.camera.capture() // ίϯύΠϧΤϥʔ } }

30. lazy varͰॳظԽ஗ԆɺselfΛࢀরՄʹ private lazy var captureButton = CaptureButton().then { $0.onTapped

    = { [weak self] in self?.camera.capture() // OK } }

31. 5. SnapKit / PureLayout

32. NSLayoutAnchorʢiOS9ʙʣ button.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor).active = true button.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor).active = true button.topAnchor.constraintEqualToAnchor(view.topAnchor).active = true

    button.bottomAnchor.constraintEqualToAnchor(view.bottomAnchor).active = true

33. !

34. SnapKit / PureLayout // SnapKit button.snp.makeConstraints { $0.edges.equalToSuperview() } //

    PureLaout button.autoPinEdgesToSuperviewEdges()

35. // ಡΈ΍͍͢ button.snp.makeConstraints { $0.center.equalToSuperview() // ਌Ϗϡʔͷத৺ʹ $0.size.equalTo(CGSize(width: 64, height:

    64)) // αΠζࢦఆ } // Safe Areaʹ΋ϨΠΞ΢τΛషΓ΍͍͢ tableView.snp.makeConstraints { $0.top.bottom.equalTo(view.safeAreaLayoutGuide) // ্Լ͸Safe Areaʹ $0.leading.trailing.equalToSuperview() // ࠨӈ͸਌Ϗϡʔʹ }

36. ☺

37. 6. UIStackView

38. UIStackViewͰϨΠΞ΢τ͢Δ stackView.addArrangedSubview(label) stackView.addArrangedSubview(imageView) stackView.addArrangedSubview(button) label.snp.makeConstraints { $0.height.equalTo(20) } button.snp.makeConstraints {

    $0.height.equalTo(60) }

39. ·ͱΊ • ίʔυϕʔεϨΠΞ΢τͰ΋TipsΛ࢖͑͹؆͔ܿͭεϐʔσΟ • Ͳͷख๏΋Ͱ͖ΔΑ͏ʹ͓͖ͯ͠ɺ࢖͍෼͚͍ͨ

40. αϯϓϧίʔυ github.com/shtnkgm/ iOSUILayoutMethods

41. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ