Swift

Swift 간단한 계산기 앱 만들기 1

지용빡 2022. 1. 24. 19:41
반응형
StackView를 이용한 간단한 계산기 앱을 만들어 보겠습니다.

이런식으로

프로젝트 생성
  • iOS -> App -> Product Name을 지정하고 원하는 곳에 프로젝트를 생성하겠습니다.
Label 생성
  • 계산 결과값을 알려주는 Label을 생성하겠습니다.
  • Main.storyboard에 들어가 ViewController를 선택한 뒤 shift + cmd + l -> Label 드래그
Autolayout
  • Label에 제약 조건을 추가하겠습니다.
  • 자신이 원하는 위치에 제약조건을 추가해 주시면 됩니다.

UIView 생성
  • UIView를 생성해 주겠습니다.
  • 생성 후 제약 조건을 추가 하겠습니다.

Button 생성
  • 계산기 키패드를 만들기 위해 버튼을 생성하겠습니다.
  • UIView안에 버튼을 생성한 후 opt 버튼을 누른채로 드래그해서 아래와 같이 버튼을 복사하겠습니다.

Embed In View
  • 버튼을 가로로 한줄씩 잡아서 Horizontal StackView로 Embed In 시켜주겠습니다.

적용이 된 모습

  • 다시 적용된 5개의 StackView를 똑같은 방법으로 하나의 StackView로 만들겠습니다.

적용이 된 모습

StackView Autolayout
  • 전부 다 0으로 제약조건을 추가해주겠습니다.

우선 순위
  • StackView의 Bottom의 우선순위(priority)를 750으로 낮추겠습니다.
  • 우선순위를 낮춘 이유는 화면의 해상도가 커질수록 버튼의 크기도 커져야 되는데 버튼의 크기가 커진 만큼 버튼의 위치할 자리가 모자라서 제약조건 에러가 납니다.
  • Stack View의 사이즈를 먼저 화면에 맞게 구성하고 바텀의 간격을 맞춘다고 보면 되십니다.

Equal Heights
  • 5개의 Horizontal Stack View의 높이를 똑같이 하겠습니다.

StackView 속성 변경
  • 좌우 공간을 꽉 채우기 위해 StackView의 Aligment를 Fill로 해주겠습니다
  • Spacing은 8정도로 해주겠습니다.

적용이 된 모습

Equal Spacing
  • 5개 Stack View의 Distibution을 Equal Spacing으로 설정해 주겠습니다.
  • Spacing은 5로 설정해 주겠습니다.
  • 적용을 하면 Stack View 안에 버튼들 사이의 공간이 균등하게 적용된 것을 볼 수 있습니다.

버튼 Autolayout
  • Stack View안에 모든 버튼들을 체크해 주시고 Aspect Ratio 제약 조건을 추가하겠습니다.
  • Aspect Ratio는 해당뷰의 가로세로 비율을 고정 시켜줍니다.

  • 정사각형 버튼을 만들기 위해서는 맨 위의 버튼의 Multiplier를 1 : 1 비율로 변경하겠습니다.

  • 위에 왼쪽 버튼은 아래 버튼의 첫번째~세번째 버튼의 크기만큼 늘어나게 하겠습니다.
  • 마우스 오른쪽버튼으로 Button을 잡고 드래그해서 아래 세번째 버튼의 드랍을 해주고 Trailing으로 맞춰주겠습니다.

키패드 마저 꾸미기
  • 맨 아래 두번쨰 버튼을 지우고 맨 왼쪽 버튼을 위 두번째 버튼에 Trailing 해주겠습니다.
  • 아래와 같이 숫자랑 기호를 집어 넣겠습니다.
  • 버튼의 크기랑 스타일은 원하시는 색으로 꾸며줍니다.
  • 버튼의 백그라운드 색상도 변경하겠습니다.

버튼 둥글게 만들기 @IBDesignable @IBInspectable
  • @IBInspectable은 커스텀한 UIView 컴포넌트에서 보다 쉽게 Inspector창에서 속성을 적용할 수 있도록 도와주는 녀석이다.
  • @IBDesignable은 실시간으로 스토리보드로 연결해주는 녀석이다.
Cocoa touch class 파일 생성
  • 소스를 작성하기 위해 cocoa touch class 파일을 생성해줍니다.
  • 클래스명을 정해주시고 Subclass는 UIButton으로 해주겠습니다.
  • 그리고 소스를 작성해주시면 됩니다.
  • 참고 사이트
import UIKit

@IBDesignable

class RoundBtn: UIButton {
    
    @IBInspectable var isRound: Bool = false {
        didSet {
            if isRound {
                self.layer.cornerRadius = self.frame.height / 2
            }
        }
    }
}
  • 이렇게 작성을 해주시고 모든 버튼의 Class를 RoundBtn으로 바꿔주겠습니다. 
  • 그러면 애트리뷰트 인스펙터창에 Round Btn이 나옵니다.
  • On으로 바꿔주시면 적용이 됩니다.

이렇게 해서 계산기 UI 작업은 끝났습니다!

반응형