[Lv_3,4,5] 수직 스택뷰 구현 및 버튼 UI 개선 #29
Conversation
✨ Lever 3 기능 구현 - 4개의 가로 스택뷰가 있는 세로 스택뷰 생성
✨ Level 4 기능 구현 - 연산 버튼 색상 변경
✨ Level 5 기능 구현 - 버튼 UI 원형으로 변경
|
|
||
| let label = UILabel() | ||
| var verticalStackView = UIStackView() | ||
| let buttonDatas = [["7", "8", "9", "+"], ["4", "5", "6", "-"], ["1", "2", "3", "*"], ["AC", "0", "=", "/"]] |
There was a problem hiding this comment.
와, 저 이렇게 정리되어있는 거 너무 좋아요!!
진짜 UI가 연상되게 아래처럼 정리하는 건 어떻게 생각하세요?
let buttonDatas = [
["7", "8", "9", "+"],
["4", "5", "6", "-"],
["1", "2", "3", "*"],
["AC", "0", "=", "/"],
]
| let title = buttonDatas[verIndex][horIndex] | ||
| let color = Int(title) == nil ? .orange : UIColor(red: 58/255, green: 58/255, blue: 58/255, alpha: 1.0) |
There was a problem hiding this comment.
버튼 이름이랑 색깔 설정이 두 줄로 끝나버리니까 너무 깔끔해요!
[verIndex][horIndex].. 2중배열을 이렇게 표현하니까 훨씬 직관적이네요!
| keypad.layer.cornerRadius = 80 / 2 | ||
|
|
||
| keypad.snp.makeConstraints() { | ||
| $0.width.height.equalTo(80) |
There was a problem hiding this comment.
cornerRadius를 단순히 40이 아닌 80 / 2로 놓으시는 점이, UI 확장성을 염두에 두시는 게 느껴집니다!
버튼타이틀을 선언하실 때도 2차원 배열로 놓아주셨는데, 거기다 배열만 추가했을 때 버튼이 그대로 이쁘게 생성되면 너무 좋을 것 같아요!
There was a problem hiding this comment.
80이라는 값도 frame을 사용하려고 했는데 적용이 잘 안돼서 아쉬워요..
| private func makeButton(verIndex: Int, horIndex: Int) -> UIButton { | ||
| let keypad = UIButton() | ||
| let title = buttonDatas[verIndex][horIndex] | ||
| let color = Int(title) == nil ? .orange : UIColor(red: 58/255, green: 58/255, blue: 58/255, alpha: 1.0) |
There was a problem hiding this comment.
버튼의 컬러 변경을 상항 연산자로 표현하는거 굿이에요~~!!
There was a problem hiding this comment.
감사합니다ㅎ 다만, UIColor 코드가 조금 기네요..
| // 버튼 생성 | ||
| private func makeButton(verIndex: Int, horIndex: Int) -> UIButton { | ||
| let keypad = UIButton() | ||
| let title = buttonDatas[verIndex][horIndex] |
There was a problem hiding this comment.
이렇게 표현할 수도 있군요!! 한 수 배워갑니다😈
✨ Level 6-7 기능 구현 - 텍스트 라벨과 키패드 버튼 연동 구현
✨ Level 8 기능 구현 - calculate 메서드 구현 및 예외 상황 처리
✨ 계산기 기능 구현
♻️ MVC 구조로 리팩토링
| // | ||
| import Foundation | ||
|
|
||
| class CalculatorModel { |
There was a problem hiding this comment.
계산 로직을 별도의 객체로 책임분리한 점 좋습니다!
계산 로직을 잘 나타낼 수 있는 클래스 이름을 선택하면 더 좋을 것 같아요~~!
| } | ||
|
|
||
| // 수식이 유효한지 확인 | ||
| private func isValidExpression(_ text: String) -> Bool { |
There was a problem hiding this comment.
수식이 유효한지 확인하는 기능을 Bool을 반환하는 함수로 감싸주신 점 굉장히 좋다고 생각해요!
|
|
||
| import SnapKit | ||
|
|
||
| class CalculatorView: UIView { |
There was a problem hiding this comment.
별도의 뷰로 작성해 주셨군요! 좋습니다~!
|
|
||
| class CalculatorView: UIView { | ||
|
|
||
| var label = UILabel() |
There was a problem hiding this comment.
이러한 라벨, 스택뷰, 버튼데이터는 internal로 노출되어야 할 이유가 있을까요? (저도 몰라서 여쭤봐요!)
| return nil | ||
| } | ||
| } | ||
| # iOS 계산기 어플 |
개요
키패드 UI를 구현하며, 버튼의 UI와 색상을 개선했습니다.
주요 구현 사항
1. 키패드 UI 구현
configureVerticalStackView()horizontalStackView)를 생성하고, 이를 수직 스택뷰(verticalStackView)의 하위에addArrangedSubview()로 추가했습니다.makeHorizontalStackView()makeButton()UIButton을 생성하여 키패드 버튼의 UI를 정의합니다.2. 연산 버튼 색상 변경
buttonDatas의 값을Int로 변환할 수 없는 경우(연산 버튼), 해당 버튼에 오렌지 색상을 적용했습니다.3. 버튼 UI 개선
cornerRadius를width의 절반으로 설정하여 원형 버튼을 구현했습니다.