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

스토리보드로 구현하는 방법은 다른 기초 앱을 몇번 만들어봤기 때문에

계산기 앱을 구현하는 것도 할만 하다는 느낌이 들어서

아직 해보지 않은 코드베이스로 구현을 도전해보려고 한다.

 

Lv1 : 속성 규약에 맞게 "12345" viewController에 구현하기

 

Lv 1 은 강의를 보면 쉽게 따라할 수 있었다.

배경색을 넣고

주어진 속성 규약에 맞게 configureUI 메서드 안에 레이블의 특성을 넣고

스냅킷을 활용한 addSubview 코드 구현, 오토레이아웃 구현

 

 

Lv 2 UIStackView 생성하기

 

스토리보드로는 버튼을 여러개 두고 스택으로 묶으면 된다.

그리고 오토레이아웃 설정.

코드베이스로는 모른다.

강의에서는 나오지 않는다.

 

이젠 서칭을 하며 찾아보아야 한다.

 

개발자에게 가장 좋은 서칭방법

스택오버플로우 활용, 공식문서 활용
->  찾은 구현법 노션에 정리하기
검색 팁:  programmatically 활용 (코드로만 구현하는 방법)

 

구글에 how to make stackview programmatically in swift 를 검색하여 찾아보았다.

 

스택뷰를 넣는 모양이다.

일단 해보자

 

눈에 보이는 대로 , 과제 규약에 맞춰 스택뷰를 일단 확인해보기 위해 초록색으로 해보았다.

 

 

constraint를 어떻게 구성해야 할 지 아직 감이 안온다.

버튼이랑 대충 비슷하게 해보았다.

 

나오지 않는다

top, leading, height .... 아 width 가 빠진 것 같네?

width를 추가해주니 나오긴 한다

크기는 바꿔주면 되지만

위치가 이상하다

내가 생각했던 건 스택뷰의top 이 레이블의 bottom 에서부터 밑으로 100 만큼 떨어지길 원했다.

뭔가 잘못된 것 같다.

 

hierarchy 가 코드베이스에서도 되려나? 하고 눌러봤는데 된다

잘은 모르겠지만 뭔가 이상하다

레이블의 바텀으로부터 위로 100 만큼 스택뷰의 top 이 올라가있는 것 같다.

 

이번엔

label.snp.bottom 을 label.snp.top 으로 바꿔보았다.

레이블의 top 으로 부터 아래로 100 떨어진 스택뷰의 top

방향은 내가 원했던 방향이다.

label.snp.bottom  .inset(100) 은 위로

labe.snp.top . inset(100) 은 아래로

같은 inset 인데 bottom 과 top이 바뀌니 방향이 달랐다.

나는 bottom에서 아래로 가고 싶다고..

 

이번엔 bottom  .offset 으로 바꿔보았다.

 

이해가 어려워 정리된 블로그를 찾아보았다.

 

https://yujinn.tistory.com/4

[Swift] Snapkit - inset, offset 언제 사용해야할까?

inset : superview, subview 관계에서 subview가 superview로부터 간격을 주고 싶을 때 사용
offset : 부모자식관계가 아닌 뷰로부터 간격을 주고 싶을 때 사용, bottom ore trailing은 음수(-) 사용

offset	inset
element와의 간격에 사용	superview와의 간격에 사용
"겉"을 기준으로 간격을 잡음	"안"을 기준으로 간격을 잡음
좌측 상단(0, 0)을 기준으로 확장되는 "겉"을 의미 -> 오른쪽에서 왼쪽, 아래에서 위 방향은 음수값(-)을 가짐	안쪽 방향에 대해서 모두 양수값을 가짐 -> 오른쪽에서 왼쪽, 아래에서 위 방향도 양수값(+)을 가짐

 

스냅킷을 사용하지 않으면 constraint로 설정해주면 된다.

 

NSLayoutConstraint와 스냅킷 코드 비교

https://mini-min-dev.tistory.com/79

[Library] AutoLayout을 짧은 코드로 구현하려면, SnapKit

 

---

이제 넓이랑 다른 부분을 맞춰보자

 

스택뷰 완성

이제 버튼 4개를 스택뷰안에 넣기만 하면 된다.

스토리보드는 그냥 묶으면 되는데

코드로 어떻게 묶어야 할까 ?

버튼을 스택뷰에 넣는 방법 검색

 

이런식으로 하면 된단다.

 

버튼을 하나씩 추가하여 넣어보았다.

 

특성에 대한 설정

 

스택뷰에 넣기

 

추가로 크기 설정도 해주었다

 

 

완성

level 2 구현이 되었다.

 

버튼이 4개다 보니 겹치는 코드들을 묶는 방법이 있을텐데

일단 구현해보는 것이 먼저라고 판단하여 하나씩 넣어보았다.

 

이런식으로 스택뷰 4줄을 만들고 버튼을 넣고 하면 Level 3 까지 구현이 되겠지만

반복되는 코드를 함수나 클로저 등으로 묶는 방법을

먼저 알아보고 그 다음을 진행하는 것이 좋을 것 같다. 

 

과제 내 힌트

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

 

메서드를 이용하면 위와같은 스택 뷰 생성을 반복할 때 도움이 될 것 같다.

어떻게 구현하는 것이 좋을까 ?