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 작업은 끝났습니다!
반응형