[Project] 계산기 만들기(UI & 기능구현) ①

🧑🏻‍💻 간단한 계산기 앱 만들기

입문 강의에서 배운 것들을 복습하며 계산기 앱을 만들어봅시다.

• UILabel 로 숫자를 표시합니다.

• UIButton 으로 숫자와 연산 버튼들을 만듭니다.

• UIStackView 로 버튼들을 규칙성있게 배치합니다.

• AutoLayout 을 활용해서 레이아웃을 설정합니다.

• backgroundColor , layer.cornerRadius 등 다양한 속성들을 활용합니다.

• UIButton 의 addTarget 혹은 IBAction 으로 버튼을 클릭했을 때 이벤트를 설정합니다.

• 스토리보드 vs 코드베이스 UI

  • 두 가지 방법으로 모두 구현해보면 매우 좋은 연습이 됩니다.
  • 둘 중 하나만 연습한다면 코드베이스 UI 로 구현해보는 것을 추천합니다.

• 이 과제는 Lv.1 ~ Lv.8 의 단계로 이루어져 있습니다.
  - Lv.1 ~ Lv.5 : 반드시 구현 해보세요.
  - Lv.6 ~ Lv.8 : 실력 향상을 위해 연습해보세요.

Lv. 1
🧑🏻‍💻 UILabel 을 사용해서 수식을 표시할 수 있는 라벨을 띄웁니다.

• 속성
  • backgroundColor = .black
  • textColor = .white
  • 우선, 텍스트는 12345 로 고정
  • 텍스트 오른쪽 정렬
  • Font = 시스템 볼드체, 사이즈 60
• AutoLayout
  • leading, trailing = superView 로 부터 30 떨어지도록 세팅
  • top = superView 로 부터 200 떨어지도록 세팅
  • height = 100

Lv. 2
🧑🏻‍💻 UIStackView 을 사용해서 4개의 버튼을 모아 가로 스택뷰 생성. 왼쪽과 같이 구성해보세요.

• UIButton 속성
  • font = .boldSystemFont(ofSize: 30)
  • backgroundColor = UIColor(red: 58/255, green: 58/255, blue: 58/255, alpha: 1.0)
  • frame.size.height = 80
  • frame.size.width = 80
  • layer.cornerRadius = 40
• horizontalStackView 속성
  • axis = .horizontal
  • backgroundColor = .black
  • spacing = 10
  • distribution = .fillEqually
• horizontalStackView AutoLayout
  • height = 80

💡 힌트 💡
func makeHorizontalStackView (_ views: [UIView]) → UIStackView 와 같은 형태로 horizontalStackView 를 생성하는 메서드를 정의해두면 좋습니다. 똑같은 스택뷰 4줄이 필요하기 때문이죠.