[두깃] UI리팩토링, 토스트메세지 추가

UI리팩토링

클론코딩 강의를 듣다가 UI 제약을 거는 부분을 UIView를 extension 해서 함수 하나로 모두 처리하는 것을 보고 감명을 받아..

요 플젝에서도 적용해보기로 했다.

 

이건 제약만 걸어주는 코드로 함수하나로 처리할 수 있도록 만들어 놓은 것이다.

extension UIView {
    
    func anchor(top: NSLayoutYAxisAnchor? = nil,
                leading: NSLayoutXAxisAnchor? = nil,
                trailing: NSLayoutXAxisAnchor? = nil,
                bottom: NSLayoutYAxisAnchor? = nil,
                paddingTop: CGFloat = 0,
                paddingLeading: CGFloat = 0,
                paddingTrailing: CGFloat = 0,
                paddingBottom: CGFloat = 0,
                width: CGFloat? = nil,
                height: CGFloat? = nil) {
                // 제약 코드
                }
}

 

그러면 이렇게 anchor 함수만 호출해서 제약을 걸어줄 수 있었다.

// 이랬던 코드가
NSLayoutConstraint.activate([
    stackView.topAnchor.constraint(equalTo: view.layoutMarginsGuide.topAnchor, constant: 20),
    stackView.leadingAnchor.constraint(equalTo: view.layoutMarginsGuide.leadingAnchor),
    stackView.trailingAnchor.constraint(equalTo: view.layoutMarginsGuide.trailingAnchor),
    stackView.heightAnchor.constraint(equalToConstant: 40)
])

// 이렇게
stackView.anchor(top: view.layoutMarginsGuide.topAnchor,
                 leading: view.layoutMarginsGuide.leadingAnchor,
                 trailing: view.layoutMarginsGuide.trailingAnchor,
                 paddingTop: 20,
                 height: 40)

 

바꿔본 후기는 !  사실 바꾸고 나서는 생각보다 별 차이 없네..? 였는데 

이렇게 정리하면서 보니까 확실히 각 제약조건에 더 눈이 들어온다는 것을 느낄 수 있었다.

 

---

코드가 줄어드는 UI리팩토링은 반복되는 코드를 없애는 것이다.

두깃에서는 반복되는 UI가 별로 없기 때문에 .. ㅎㅎ

홈화면의 버튼 두개를 리팩토링 해보는 것으로.. 매우 간단!

let addRepositoryButton: UIButton = {
    let button = UIButton()
    button.setImage(systemName: "plus")
    button.tintColor = UIColor.fontColor
    return button
}()

let menuButton: UIButton = {
    let button = UIButton()
    button.setImage(systemName: "ellipsis")
    button.tintColor = UIColor.fontColor
    return button
}()

 

이렇게 이름만 다른 두개의 버튼을 doGitButton 으로 만들어주면 코드의 양을 줄일 수 있다. 

extension UIButton {
  
    func doGitButton(systemName: String) -> UIButton {
        let button = UIButton()
        button.setImage(systemName: systemName)
        button.tintColor = UIColor.fontColor
        return button
    }
}

let addRepositoryButton = UIButton().doGitButton(systemName: "plus")
let menuButton = UIButton().doGitButton(systemName: "ellipsis")

 

후에 비슷한 버튼을 추가할 때도 편리하게 사용할 수 있다.

 

 

토스트 메세지 추가

지인에게 "저장소를 추가할 때 추가되었다는 확실한 액션이 없다" 는 피드백을 들어서 반영해보도록 했다.

alert 창으로 띄우는 것은 여러개를 추가할 때 사용자에게 피곤한 일인 것 같아서 간단하게 보기만 할 수 있는 토스트 메세지를 추가해보는 것으로 결정,,

 

func showToastMessageLabel() {

    let toastMessageLabel = UILabel(frame: CGRect(x: view.frame.size.width/2 - 75,
                                                  y: view.frame.size.height - 100,
                                                  width: 160,
                                                  height: 35))
    toastMessageLabel.backgroundColor = UIColor.mainColor.withAlphaComponent(1.0)
    toastMessageLabel.textAlignment = .center
    toastMessageLabel.layer.cornerRadius = 10
    toastMessageLabel.clipsToBounds = true
    toastMessageLabel.text = "저장소가 추가되었습니다."
    toastMessageLabel.textColor = .white
    toastMessageLabel.font = UIFont.Font.regular14
    view.addSubview(toastMessageLabel)
    UIView.animate(withDuration: 0.7, delay: 1.0, options: .curveEaseOut) {
        toastMessageLabel.alpha = 0.0
    } completion: { _ in
        toastMessageLabel.removeFromSuperview()
    }

}

animate를 오랜만에 사용해봐서 잠시 해매고.. 

메세지를 1초동안 보여주고 후에 0.7초동안 투명도가 0이 되도록 설정해주었다.

---

 

근데 왜 앱스토어 리뷰가 안보일까..

 

앞으로 해보고싶은건

async await, 폰트추가, 위젯추가 MVVM 구조정도..?

더 나중에는

깃허브 로그인 연동으로 private 레포도 가져올 수 있게..!