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

Mobile Act TOKYO #5
https://mobileact.connpass.com/event/114398

Transcript

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

   View Slide

2. iOS Engineer
   Shota Nakagami @shtnkgm
   

   View Slide

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

   View Slide

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

   View Slide

5. ͦΕͧΕͷಛ௃
   

   View Slide

6. StoryboardͱXIBͷಛ௃
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

12. Dependency Injectionͷҧ͍
    

    View Slide

13. Storyboard
    // NG: ίϯετϥΫλΠϯδΣΫγϣϯ͸ෆՄ
    let viewController = ViewController(dependency: Dependency())
    // OK: ϓϩύςΟΠϯδΣΫγϣϯʹͳΒՄ
    let storyboard = UIStoryboard(name: "ViewController", bundle: nil)
    let viewController = storyboard.instantiateInitialViewController()
    viewController.dependency = Dependency()
    

    View Slide

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")
    }
    }
    

    View Slide

15. ൺֱ߲໨ Storyboard XIB ίʔυϕʔε
    ➡ Segue͕࢖͑Δ ✅
    # GUIͰݟͯΘ͔Δ ✅ ✅
    $ αΠζ෼ذ͕༰қ ✅ ✅
    % ੩తνΣοΫ ✅ ✅
    &ίϯετϥΫλDI ✅ ✅
    ♻ ࠶ར༻ੑ ✅
    ( ίϯϑϦΫτ଱ੑ ✅
    ) ϨϏϡʔ͠΍͢͞ ✅
    

    View Slide

16. I
    !
    Code-based Laout
    

    View Slide

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

    View Slide

18. 1. Initialization Closure
    

    View Slide

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...
    }
    }
    

    View Slide

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...
    }
    }
    

    View Slide

21. 2. Then
    

    View Slide

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...
    }
    }
    

    View Slide

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...
    }
    }
    

    View Slide

24. Thenͷ࣮૷
    public protocol Then {}
    extension Then where Self: AnyObject {
    public func then(_ block: (Self) throws -> Void) rethrows -> Self {
    try block(self)
    return self
    }
    }
    

    View Slide

25. 3. ΧελϜΫϥε
    

    View Slide

26. ΧελϜΫϥεͰ࠶ར༻ੑΛߴΊɺΑΓγϯϓϧʹ
    class ViewController: UIViewController {
    let priceLabel = PriceLabel() // ΧελϜΫϥεԽ
    let imageView = ItemImageView() // ΧελϜΫϥεԽ
    override func viewDidLoad() {
    super.viewDidLoad()
    // addSubview, AutoLayout...
    }
    }
    

    View Slide

27. 4. lazy var
    

    View Slide

28. private let captureButton = CaptureButton().then {
    $0.onTapped = { [weak self] in // selfࢀর͍ͨ͠
    self?.camera.capture() // selfࢀর͍ͨ͠
    }
    }
    

    View Slide

29. private let captureButton = CaptureButton().then {
    $0.onTapped = { [weak self] in // ίϯύΠϧΤϥʔ
    self?.camera.capture() // ίϯύΠϧΤϥʔ
    }
    }
    

    View Slide

30. lazy varͰॳظԽ஗ԆɺselfΛࢀরՄʹ
    private lazy var captureButton = CaptureButton().then {
    $0.onTapped = { [weak self] in
    self?.camera.capture() // OK
    }
    }
    

    View Slide

31. 5. SnapKit / PureLayout
    

    View Slide

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
    

    View Slide

33. !
    

    View Slide

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

    View Slide

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() // ࠨӈ͸਌Ϗϡʔʹ
    }
    

    View Slide

36. ☺
    

    View Slide

37. 6. UIStackView
    

    View Slide

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) }
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide