[CloneApp] (UIKit) toss 앱 클론코딩 - (2) Home 탭 UI 만들기

toss 앱 클론코딩 두번째. 홈뷰를 만드는 중이다. 이번에 개발하면서 목표로 세웠던 것을 지키면서 공부하느라 조금 시간이 오래걸렸다. ^___^ (바본가 ㅠ)

출처 - 최고심

• 기초 개념도 놓치지 않고 확실하게 하고 넘어갈 것
• 개발 과정을 기록할 것
• 구현하려고 하는 UI 컴포넌트가 있다면, 충분히 고민하고 구현할 것

 

---

 

🔵 구현하려고 하는 화면

• 1번화면의 선물상자그림은 x 누르면 없어지는 광고(?)뷰임
• 광고뷰(?)가 없는 화면을 구현할 예정!

 

 

🔵  '토스뱅크, 자산, 소비' 를 어떻게 구현해야할까

🔹 UICollectionView로 구현하는게 맞을까

https://github.com/DeveloperAcademy-POSTECH/CCC-1st-Toss-Brown/pull/7

[FEAT] Home 탭 collection view 생성 by deslog · Pull Request #7 · DeveloperAcademy-POSTECH/CCC-1st-Toss-Brown

 

1차적으로 내가 고민했던 부분이다. 과연 홈탭의 가장 초반 화면에서 '토스뱅크, 자산, 소비' 세개의 둥근모서리 사각형 리스트를 무엇으로 구현해야할까? 같은 모양의 사각형이 세번 반복된다고 생각하여 초반에 collectionView로 구현하기로 결정했다.

구현하고 싶은 화면!

collectionView로 임시데이터를 넣어서 구현한 모습

근데 구현을 해보고 나니까 고민이 생겼다. 나는 CollectionView는 '많은 데이터를 내장된 scroll을 통해서 무한(?)하게 생성할 수 있다는점'과 'reusable'하다는 점이 가장 큰 장점이라고 생각한다. 하지만 지금 구현한 것은 단순 "토스뱅크, 자산, 소비" 세개의 데이터만 필요로하고, 아이폰의 사진 앱 처럼 무한하게 scroll 될 필요가 없다. 그렇다면 collectionView로 구현하는게 맞는지 의문이 들었다.

물론 scrollview로 구현할 수는 있다. 하지만 collectionView의 장점을 적절하게 사용하지 못하는 상황이기 때문에 굳이 collectionView를 사용하지 않아도 되겠는데? 라는 생각이 들었다.

 

🔹 그래서 생각한 방식, UIStackView를 이용해보자

해당 고민에 대해서 멘토에게 이야기해보았다. 멘토는 collectionView로 구현해도 좋지만 내 의견처럼 collectionView의 장점을 충분히 활용하지 못하는 상황이라 stackview를 사용하면 더 간단하게 구현할 수 있을 것 같다고 조언해주었다.

UIStackView를 아예 몰랐던 터라, 조금 찾아보고 같이 문화센터에 참여하는 멘티들의 코드를 참고해서 공부를 시작했다.

Stackview를 이용하면 'SwiftUI'와 비슷한 방식으로 구현이 가능한것 같았다. SwfitUI에서는 뷰를 만들기 위해서 Vstack, Hstack, Zstack을 쌓고 그 위에 UI 컴포넌트를 올려준다. UIKit의 UIStackView도 스크롤이 내장되어있고, StackView 위에 원하는 UI 컴포넌트를 순서대로 올려주면 되는 것이었다.

https://developer.apple.com/documentation/uikit/uistackview

Apple Developer Documentation

 

위 사진이 stackView를 그림으로 표현한 것인데, distribution으로 방향(?)을 설정해주고, 그 안에 하늘색 UI컴포넌트를 넣으면, 동일한 spacing 간격을 주면서 리스트처럼 보여지게 해준다.

그래서 나는, '토스뱅크', '자산', '소비' 세 개의 UI 컴포넌트를 각각 따로 만들어 준 다음, 세 개를 stackview에 올려주는 방식으로 구현 방식을 바꾸었다.

https://github.com/DeveloperAcademy-POSTECH/CCC-1st-Toss-Brown/issues/9

[FEAT] Home 탭 CollectionView -> UIView로 변경 · Issue #9 · DeveloperAcademy-POSTECH/CCC-1st-Toss-Brown

 

---

 

🔵 UIScrollview, UIStackView 이용하기

 

 

🔵 dummy data 만들기

 

 

🔵 table view 레이아웃.. 수정하기...

레이아웃 대참사가 일어났다.

왜이랭

hierarchy 를 살펴보니, table view를 안고있는(?) 맨 하위 stackView의 크기가 굉장히 얇게 잡혀있었다. 이 stackView의 레이아웃을 수정해주면 될 것 같았다.

// stackView의 layout
extension HomeCell {
    func setupViews() {
        addSubview(cellStackView)
        cellStackView.snp.makeConstraints {
            $0.edges.equalToSuperview()
        }
    }
}

stackView에 edges를 superview에 잘 맞춰주었는데, 왜 stackview는 아주 얇게 나온느건가?

stackview의 superView는 scrollView인데, scrollview는 아래 hierarchy를 보면, 꽉찬 뷰이다. 왜 안맞춰지는거지? 내가 snapkit에 대한 이해가 부족해서 그런건가..

UIScrollView의 모습

🔹 해결 방식

이 문제를 해결한 방식은 다음과 같다. UIScrollview 위에 비어있는 UIView를 올려서 UIView 하위에 StackView를 넣어주었다.

private func setupLayout() {
    view.addSubview(scrollView)
    scrollView.snp.makeConstraints {
        $0.edges.equalToSuperview()
    }
    scrollView.addSubview(contentView)
    contentView.snp.makeConstraints {
        $0.edges.equalToSuperview()
        $0.width.equalToSuperview()
    }
    contentView.addSubview(homeListStackView)
    homeListStackView.snp.makeConstraints {
        $0.leading.equalToSuperview().inset(16.0)
        $0.trailing.equalToSuperview().inset(16.0)
        $0.top.equalToSuperview()
        $0.bottom.equalToSuperview()
    }
}

이렇게 하니까 아래처럼 내가 원하는 형태로 stackView의 크기가 꽉찬 모습으로 구현되었다.

여기서 궁금한점은, 이렇게 StackView위에 비어있는 UIView를 꼭 올려서 맞춰주어야하는가? 이다. 

 

🔵 tableviewCell에 UIImage와 UILabel이 안뜨는 문제

위에 리스트에 왜 검정색 네모네모만 떠있냐.. cell에 uiimage와 uilabel을 넣어주었는데, 들어가지 않고 구현되었다. (이럴수가!) 분명히 cell에서 addsubview가 안되었거나, dummy data가 전달되지 않았나보다.

 아니나다를까 이렇게 class 앞에 cellList를 변수로 선언해주었는데, 이를 받지 않은것이다! (dummy data가 안들어오는 상황) 이는 cell의 레이아웃을 설정해주는 function에 구현되지 않았던게 문제였는데, 여기다가 데이터를 받을 수 있게 해주면 된다.

tableViewDataSource에서 이 setup() function을 이용해서 cell을 뿌려주는데, 여기에 데이터가 들어오지 않고, 진짜 레이아웃만 뿌려준 것이다. 여기다가 데이터를 넣어주면 된당.

이렇게 cellList에 파라미터 row로 받은 것을 넣겠다고 선언~~ 이렇게하면?!?! 정상적으로 출력이 될까 두근두근

짜잔 ^__^ 일단 UILabel로 이루어진 Title과 SubTitle이 안뜬다. 이미지만 레이아웃으로 잡힌 상황! (hierarchy를 확인해보니까 UIImage 뒤에 어디에도 UILabel에 없다 그냥 이것도 addsubView가 안된듯?!) 이제 이걸 해결해보자.

 

🔵 UILabel 어딨니

지금 빌드를 해보면, 아래처럼 출력된다.

은행 로고 사진이 저렇게 길면 안되고, 저 안에 title 과 subTitle이 들어가야하는데, hierearchy를 살펴보아도 title과 subTitle이 그 어디에도 구현되어있지 않아있다. 여기서 addsubview가 되지 않았나? 고민하던 찰나에... 은행 로고를 먼저 줄여서 label을 올려보고자 은행로고 이미지를 크기를 우선 줄이고자 했다.

일단 은행 로고가 저렇게 좌우로 길게 뜨는 이유

listImageView.snp.makeConstraints {
            $0.leading.equalToSuperview().inset(24.0)
            $0.width.height.equalTo(40.0)
            $0.top.equalToSuperview().inset(20.0)
            $0.trailing.equalToSuperview().inset(20.0)
        }

레이아웃을 잘못잡았다! trailing으로 잡으니까 trailing부분이 20 만 남기고 길어진것. 여기서는 사진이 왼쪽으로 작게 들어가야 하므로 leading과, width, top, bottom 을 잡아야한다.

listImageView.snp.makeConstraints {
            $0.leading.equalToSuperview().inset(24.0)
            $0.width.height.equalTo(40.0)
            $0.top.equalToSuperview().inset(20.0)
            $0.bottom.equalToSuperview().inset(20.0)
        }

자 이렇게 이제 사진은 줄여졌다. 그다음 할일은 없어진 Label 출력시키기!! 이것도 아마 레이아웃에 문제가 있어서 출력이 안되는 확률 거의 뭐 99%..

근데 bottom으로 바꾸니까, UILabel이 등장했다.

아마 은행로고 이미지에 밀려서 레이아웃을 잡았어도, 뷰 내부에 출력되지 않았던 듯 싶다. 글자가 짤리고 그런 세밀한 레이아웃조절이 필요하지만 일단 해결!

 

🔵 레이아웃관련한 에러를 마주쳤당

⚠️ fatalError("Expected superview but found nil when attempting make constraint `equalToSuperview`.") 

주로 이 에러는 addsubview를 하지 않아서 생기는 문제이다. 하지만 나의 경우, addsubview는 했지만, switch 문을 사용하면서 뷰를 선택적으로 올려줘야했는데, 이과정에서 레이아웃을 잘못설정해서 뷰가 로드되지 않으면서! 문제가 발생했다. (equalToSuperView도 제대로 돌아가지 않았고, 묶여있는 auto layout이 전혀 작동되지 못하는 상황이었다.

https://didu-story.tistory.com/293

[Error] fatalError("Expected superview but found nil when attempting make constraint `equalToSuperview`.")

 

그래서 지금까지 완료한 화면은 , 이것

문제를 일으켯던 (왼편에 있는) 송금과 내역버튼도 정상적으로 뜨고, 모든게 일단 화면 안으로 등장했다. 드디어 ^__^

 

🔵 드디어 최종

이제 위에서 색을 다 없애주고 cornerRadius추가, 글자 위치 조정, 셀 높이 수정, 버튼 위치변경 등 레이아웃을 조금씩 손봐주고 아래와 같은 화면을 완성했다 ^___^

 

다음으로 할 작업은.. 버튼눌렀을때 화면이동하는거랑 부가적인 것들을 좀 구현해서 홈화면을 완벽하게 구현해볼 생각이다!

 

👉 전체코드 https://github.com/DeveloperAcademy-POSTECH/CCC-1st-Toss-Brown

GitHub - DeveloperAcademy-POSTECH/CCC-1st-Toss-Brown: 문화센터 1기 3번째 Clone App - TOSS