코드로 계산기 UI 만들기

개요

UI를 코드로 구현하면서, 생각보다 제대로 잘 되지 않는 느낌을 받았습니다.

구현하는 도중 문제가 발생했지만, 운이 좋게도 이번에는 하나의 스택뷰만 해결하면 같은 구조라 해결이 쉬웠고,

그 해결 과정을 공유합니다.

 

발단

UI로 코드를 구현하고 있었고, 아무래도 Stroyboard처럼 눈으로 실시간으로 보면서 하는게 아니다보니,

그리고 내가 직접 UI들을 만지며 배치하는 것이 아니다보니, 아직 생각한 것만큼 자유롭게 배치하기는 조금 힘들었습니다.

 

코드로 가장 기본이 되는 view를 구현했을때 이러한 모습으로 구현되었습니다.

왼쪽으로 치우쳐져 있고, 사이즈가 제대로 출력되지 않았습니다.

 

전개

Trouble 1.

 

let btn8 = UIButton().then {
    $0.setTitle("8", for: .normal)
    $0.titleLabel?.font = UIFont.boldSystemFont(ofSize: 30)
    $0.backgroundColor = UIColor(red: 58/255, green: 58/255, blue: 58/255, alpha: 1.0)
    $0.frame.size = CGSize(width: 80, height: 80) //문제의 코드
    $0.layer.cornerRadius = 10
}

 

버튼들마다 이렇게 개별로 선언하여 생성하였지만, frame.size가 제대로 작동하지 않아 생긴 원인이었습니다.

해당 코드를 삭제하고 

AutoLayout 부분에서 버튼들의 사이즈를 지정해주었습니다.

 

이 부분입니다.

[btn7, btn8, btn9, btnPlus].forEach {
    horizontalView.addArrangedSubview($0)
    $0.snp.makeConstraints {
        $0.width.height.equalTo(80)
    }
}

 

 

Trouble 2.

Trouble 1에서 버튼들이 이상하게 출력되는 문제를 해결했습니다.

이번에는 또다른 문제로 버튼이 왼쪽으로 조금 치우쳐져 있는 문제가 있었습니다.

 

 

 

view.addSubview(horizontalStackView)
horizontalStackView.snp.makeConstraints {
    $0.top.equalTo(numberLabel.snp.bottom).offset(60)
    $0.leading.trailing.equalToSuperview().inset(20)
}

이 부분의 코드로 해결했습니다.

수평 스택뷰의 AutoLayout을 설정하는 코드입니다.

이 스택뷰의 top. 즉 윗부분은 숫자들이 나오는  numberLabel의 아랫부분에서 60만큼 떨어트려 주고,

leading과 trailing 즉 왼쪽과 오른쪽은 양쪽 끝단으로 부터 20씩 띄워준다.

 

따라서 출력물은

 

정상적으로 한줄이 출력되게 되었습니다.

 

 

 

마무리

 

//버튼 배열 생성
        let btnTitles = [
            ["7", "8", "9", "+"],
            ["4", "5", "6", "-"],
            ["1", "2", "3", "*"],
            ["AC", "0", "=", "/"]
        ]
        for titles in btnTitles {   //horizontalStackView에 집어넣음.
            let btns = titles.map { makeBtn(title: $0) }
            let horizontalStackView = makeHorizontalStackView(btns)
            verticalStackView.addArrangedSubview(horizontalStackView)
        }
        
    }
    
    
    
    //StackView 구현을 위한 함수
    private func makeHorizontalStackView(_ views: [UIView]) -> UIStackView {
        let stackView = UIStackView(arrangedSubviews: views).then {
            $0.backgroundColor = .black
            $0.axis = .horizontal
            $0.spacing = 10
            $0.distribution = .fillEqually
        }
        views.forEach {
            $0.snp.makeConstraints {
                $0.width.height.equalTo(80)
            }
        }
        return stackView
    }
    
    //버튼 구현을 위한 함수
    private func makeBtn(title: String) -> UIButton {
        let btn = UIButton().then {
            $0.setTitle(title, for: .normal)
            $0.titleLabel?.font = UIFont.boldSystemFont(ofSize: 30)
            $0.backgroundColor = UIColor(red: 58/255, green: 58/255, blue: 58/255, alpha: 1.0)
            $0.layer.cornerRadius = 40
            
            //"AC"와 기호들을 포함하고 있다면, 배경색 주황색으로 변경.
            if ["+", "-", "*", "/", "=", "AC"].contains(title) {
                $0.backgroundColor = .orange
            }
        }
        return btn
    }

이후 함수 두개를 추가하여

버튼들을 구현하는 함수와 반복문을 사용해서 버튼 4개를 배열로 만들어서 HorizontalStackView를 생성하는 함수에 넣고

HorizontalStackView를 생성하는 함수를 만들어서 4개의 HorizontalStackView를 만들고 VerticalStackView에 넣어서

구현을 마무리 하였습니다.