[swift] Alamofire 걸음마 2 (기본 설정, SnapKit)

 

지난 번에는 cocoapods을 통해 Alamofire와 SnapKit을 추가하는 것까지 해보았는데요,

오늘은 기본 설정 및 SnapKit을 통 오토 레이아웃을 잡기를 해볼게요.

스따뚜~!

---

일단, 가장 중요한 건 우리가 추가한 Alamofire와 SnapKit을 import하는 것이에요.

그 전까지는 import를 해도 자동 완성이 되지 않았는데, 이제 자동완성이 되는 걸 확인할 수 있을거에요.

import UIKit
import SnapKit
import Alamofire

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
}

 

 

이제 imageView, Label, Button이 필요해요.

ViewDidLoad 위에 인스턴스를 하나씩 찍어낼게요.

 

 

'Get Temperature' myButton을 누르면, API에서 받아온 response를 mainLbl에 나오게 할 거에요.

imgView는 배경화면을 담을 거구요. (괜히 추가해봄) ㅎㅎ

import UIKit
import SnapKit
import Alamofire

class ViewController: UIViewController {

    let mainLbl = UILabel()
    let myButton = UIButton()
    let imgView = UIImageView()


    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
}

 

 

extension을 통해 기본적인 버튼, 레이블 설정 및 오토레이아웃을 잡아볼게요.

각 설정마다 함수를 만들어 놓으면 나중에 관리하기 편하기 때문에 총 3개로 나누어 봤어요.

이렇게 하고, configureUI 함수를 ViewDidLoad에서 실행만 해주면 되거든요.

//MARK: -UI
extension ViewController {
    final private func configureUI() {
        setAttributes()
        addTarget()
        setConstraints()
    }
    
    final private func setAttributes() {
        // 버튼, 레이블, 이미지뷰 기본 설정
    }
    final private func addTarget() {
        // addTarget 메서드
    }
    
    final private func setConstraints() {
        // 오토 레이아웃
    }
}

 

---

 

1. 버튼, 레이블, 이미지뷰 기본 설정

레이블의 text 및 색, 테두리 두께, 테두리 둥글기 등을 설정하구요,

버튼의 타이틀과 타이틀 컬러를 설정합니다.

그리고! 안 넣어도 상관없지만 그냥 넣어 본 이미지뷰도 있습니다.

//MARK: -UI
extension ViewController {
    final private func configureUI() {
        setAttributes()
        addTarget()
        setConstraints()
    }
    
    final private func setAttributes() {
        mainLbl.text = "No info"
        mainLbl.textColor = UIColor.darkGray
        mainLbl.layer.borderWidth = 1
        mainLbl.layer.cornerRadius = 10
        mainLbl.textAlignment = .center
        myButton.setTitle("Get Temperature", for: .normal)
        myButton.setTitleColor(.blue, for: .normal)
        imgView.image = UIImage(named: "cool-background")
    }
    
    final private func addTarget() {
        // addTarget 메서드
    }
    
    final private func setConstraints() {
        // 오토 레이아웃
    }
}

 

---

 

2. 오토레이아웃 설정

우선 foreach문을 통해 addSubview를 해주고요.

(foreach이 궁금하면 요기 -> foreach)

    final private func setConstraints() {
        [imgView, mainLbl, myButton].forEach {
            view.addSubview($0)
        }
    }

 

 

SnapKit 사용법은 간단해요. 아래처럼 사용하면 됩니다.

imgView.snp.makeConstraints { 
    //클로저
}

 

 

SnapKit을 이용한 오토 레이아웃은 translatesAutoresizingMaskIntoConstraints 속성을 false로 설정해주지 않아도 된답니다. (좋다,,,)

 

 

이제 하나씩 오토 레이아웃을 잡아볼게요.

첫 번째로 imgView는 배경으로 이용할 거니까, Superview와 같은 크기면 되겠져?

SnapKit에서 그걸 설정할 때는 아래와 같이하면 끝이에여!!

    final private func setConstraints() {
        [imgView, mainLbl, myButton].forEach {
            view.addSubview($0)
        }
        
        imgView.snp.makeConstraints { (make) in
            make.top.leading.trailing.bottom.equalToSuperview()
        }
        
    }

 

대박아닌가요??

NSLayoutConstraint를 이용했을 때는 4줄이 필요했을텐데, 이건 1줄로 끝이에요! (좋아,,,)

        NSLayoutConstraint.activate([
            imgView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
            imgView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
            imgView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
            imgView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
        ])

 

 

그리고 클로저기 때문에 (make) in 부분을 생략하고 $0로 파라미터를 사용해도 되겠쥬?

 

 

mainLbl은 정중앙에 와야하기 때문에 Superview의 centerX, centerY와 맞춰주어야 하는데요. 

이것도 centerX, centerY를 따로 설정해줄 필요 없이 center로 설정해주면 됩니다.

width오 height를 사이즈로 설정할 때는 equalTo(사이즈)를 써주면 돼요.

 

 

마지막으로 버튼은 레이블 밑에 놓아야겠죠.

그럴 때는 offset을 써주면 되는데요. 120만큼 떨어지길 원하므로 아래처럼 설정해주세요.

 

    final private func setConstraints() {
        [imgView, mainLbl, myButton].forEach {
            view.addSubview($0)
        }
        
        imgView.snp.makeConstraints { 
            $0.top.leading.trailing.bottom.equalToSuperview()
        }
        
        mainLbl.snp.makeConstraints {
            $0.center.equalToSuperview()
            $0.width.equalTo(120)
            $0.height.equalTo(40)
        }
        
        myButton.snp.makeConstraints {
            $0.top.equalTo(mainLbl.snp.bottom).offset(120)
            $0.centerX.equalToSuperview()
        }        
        
    }

 

SnapKit에서는 offset과 inset을 이용해 constraints를 조정할 수도 있죠

 

---

3. ViewDidLoad에서 함수 실행해주기

정성껏 만든 configureUI를 꼭 ViewDidLoad에서 실행해주세요.

이걸 잊는 경우가 많답니다.

 

전체 코드로 한 번 볼게요!

import UIKit
import SnapKit
import Alamofire

class ViewController: UIViewController {
    
    let mainLbl = UILabel()
    let myButton = UIButton()
    let imgView = UIImageView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
        view.backgroundColor = .white
        
    }
}

//MARK: -UI
extension ViewController {
    final private func configureUI() {
        setAttributes()
        addTarget()
        setConstraints()
    }
    
    final private func setAttributes() {
        mainLbl.text = "No info"
        mainLbl.textColor = UIColor.darkGray
        mainLbl.layer.borderWidth = 1
        mainLbl.layer.cornerRadius = 10
        mainLbl.textAlignment = .center
        myButton.setTitle("Get Temperature", for: .normal)
        myButton.setTitleColor(.blue, for: .normal)
        imgView.image = UIImage(named: "cool-background")
        
    }
    final private func addTarget() {
        myButton.addTarget(self, action: #selector(getTempTapped(_:)), for: .touchUpInside)
    }
    
    final private func setConstraints() {
        [imgView, mainLbl, myButton].forEach {
            view.addSubview($0)
        }
        imgView.snp.makeConstraints {
            $0.top.leading.trailing.bottom.equalToSuperview()
        }
        
        
        mainLbl.snp.makeConstraints {
            $0.center.equalToSuperview()
            $0.width.equalTo(120)
            $0.height.equalTo(40)
        }
        
        myButton.snp.makeConstraints {
            $0.top.equalTo(mainLbl.snp.bottom).offset(120)
            $0.centerX.equalToSuperview()
        }
    }
}

 

---

오늘은 레이블, 버튼, 이미지뷰 딱 3개라 SnapKit를 제대로 사용하기에는 좀 부족했네요.

다음에 SnapKit만 다뤄야겠어요.

 

혹시라도 틀린 게 있다면 언제나 알려주십셔 슨배님덜!

 

그럼! 새해 복 많이 받으세요!!

새해는 돈쭐만 나기를 🙇🏻‍♀️🙇🏻‍♀️🙇🏻‍♀️🙇🏻‍♀️