iOS) TIL #21 계산기 앱 만들기 Lv 3~5 / 해설영상 6~8 추가

 

https://yjuni22.tistory.com/40

iOS) TIL #19 계산기 앱 만들기 - Lv 1, Lv 2

 

 

https://yjuni22.tistory.com/41

iOS) TIL #20 계산기 앱 만들기 Lv 2 UIView 와 UIButton

 

Lv 1 , 2 를 하고 나니 Lv 3 ~ 5 는 비교적 어렵진 않게 느껴졌다.

 

Lv 3 에서 해야할 것

• 버티컬 스택 뷰 만들기
• Lv2 에서는 가로 스택뷰만 구현했기 때문에 사용했던 가로 스택뷰의 코드 수정
• 버티컬 스택뷰에 올리기만 하면 되기 때문에 가로 스택뷰에 대한 직접적인 설정들이 없어져도 된다.

스택 뷰 에서의 크기 조정

스택 뷰 내에서 fillEqually 를 사용하기 때문에

버튼의 크기 등 직접적인 설정을 해주지 않아도

스택뷰의 크기에 따라 자동으로 버튼의 크기가 설정된다.

 

Lv 3 구현

 

hstacview 설정에 관련된 코드를 없애고 메서드만 이용하였다.

vstackView 를 만들어 버티컬 스택뷰 위에 addArrangedSubview를 통해 가로스택뷰 메서드를 바로 실행하여 코드를 정리했다.

 

 

Lv 4, 5

색상 바꾸기, 버튼 원형으로 만들기

 

 

이미 구현해둔 버튼 생성 메서드 내에서 삼항연산자를 사용해 연산버튼이라면 오렌지색으로 아니면 기존 설정한 색으로 정해지도록 코드 수정

cornerRadius를 40으로 설정 = 스택뷰의 높이와 너비, spacing 때문에 현재 버튼 크기가 80,80 으로 되어있기 때문에 절반인 40을 주면 원형이 됨.

 

 

Lv5 까지 구현 완료

 

계산기 앱이 아닌 계산기 UI 구현하기를 하였다. 

다음에는 버튼 액션까지 구현하여 계산기 동작이 되도록 해보아야겠다.

---

해설 영상 본 후

 

버튼 연결을 하기위한 코드를 버튼생성 메서드 안에 넣어주면 된다는 것을 파악

 

addTarget을 통해 직접 연결시켜 줄 수 있음. 맨 위 button1, 등의 저장속성은 따로 없어도 됨

( 메서드 안에서 객체 생성을 해주고 있기 때문 )

 

 

addTarget이 활성화 되기 위해서는 위와같은 관련 메서드가 필요함

buttonTapped 에서 sender.currentTitle 를 통해 어떤 버튼이 눌렸는지 알 수 있고

guard let 바인딩을 통해 그에 맞는 타이틀을 버튼 텍스트로 줘서

if 문에서 각각의 설정을 해주게 된다.

연산의 경우 힌트에 있는 연산 메서드를 이용하면 된다.

 

 

updateLabel 을 통해 레이블의 텍스트를 currenText로 업데이트 해줌

두자리 수 이상일 때 앞에 0 이 붙은 것을 날려주는 메서드를 추가

string.hasPrefix("0") :  접두어에 0 이 있는지 확인

string.dropFirst(갯수) : 앞에서 n개 버리고 나머지를 반환

 

---

연산메서드 관련 공식문서

 

https://developer.apple.com/documentation/foundation/nsexpression

NSExpression | Apple Developer Documentation