SwiftUI 및 GraphQL을 사용한 Instagram 클론 앱 – HomeView

오늘은 GraphQL을 사용한 Instagram 클론 앱의 4부에서는 계속해서 SwiftUI를 배우고 홈 보기를 구축해 보겠습니다.

이전 글에서는 사용자를 등록하는 방법과 로그인하는 방법을 배웠고, Instagram 복제 앱에서 각각의 UI를 사용하여 프로필 보기를 만들었습니다. 오늘은 그 코드 중 일부를 재사용하여 많은 콘텐츠가 포함된 UIScrollView와 유사한 것을 만들어 보겠습니다.

안전벨트를 단단히 매고 시작해 봅시다!

더 나은 학습을 위해 소스 코드가 포함된 iOS Instagram 클론 프로젝트를 다운로드하세요.

빠르게 시작하고 싶으신가요?

허브에서 이 앱을 복제하여 번거로움 없이 바로 사용해보세요!

정확히 무엇을 만들 것인가

우리는 다음과 같은 뷰를 만들 것입니다:

앞서 살펴본 것처럼 SwiftUI를 사용하면 많은 구성 요소를 매우 쉽게 재사용할 수 있으므로 복잡한 인터페이스를 정말 쉽게 구축할 수 있습니다. 여기서 중요한 단어는 “재사용”입니다.

이미 하단 바를 코딩한 것을 기억하시나요? 여기에 재사용하겠습니다. 나머지는 모두 새로 만들었습니다.

VStacks와 HStacks는 다시 다루지 않을 것이므로 이 부분을 놓치셨다면 여기에서 다시 확인하세요.

UI 구성 요소

이 화면은 기본적으로 네 가지 구성 요소로 구성됩니다:

• 상단 바(카메라, Back4Gram 문자열, 집 아이콘, 종이 비행기 아이콘 포함)
• 히스토리 바(히스토리 아이콘 포함)
• 타임라인 상세 보기(실제 게시물 포함)
• 하단 바(재사용할 것)

만들어 봅시다!

상단 바

상단 바는 다섯 가지 구성 요소로 이루어져 있습니다:

• 카메라 버튼
• 백4그램 문자열
• 스페이서
• 집 버튼
• 종이 비행기 버튼

이미 배운 대로 버튼의 아이콘을 추가하고 코딩을 시작해 봅시다.

HomeView.swift 파일을 만들고 모든 항목의 크기를 적절하게 조정할 수 있도록 GeometryReader를 추가해 보겠습니다:

그리고 이전 튜토리얼과 마찬가지로 모든 것이 세로축으로 표시되므로 VStack을 추가해 보겠습니다:

상단 바는 가로로 정렬된 컴포넌트의 결합이 될 것이므로 HStack을 추가하여 만들어 보겠습니다:

그리고 마지막으로 우리가 사용할 컨트롤을 추가합니다:

어떻게 보이나요?

우리는 어디로 가고 있습니다!

이제

히스토리 바

히스토리 바는 그 자체로 복잡한 구성 요소입니다. 이전 UIKit의 UIScrollView와 비슷하지만 그 안에는 이미지로 구성된 컨트롤과 그 아래에 텍스트(일명 VStack)가 있습니다. 그 구조를 만들어 봅시다:

이를 기본 VStack에 넣는 것은 ScrollView를 추가하는 것만큼이나 쉽습니다. 그리고 더 멋지게 만들기 위해 가로로만 스크롤하고 스크롤 표시기를 숨기도록 하겠습니다:

를 생성하고 마지막으로 기본 VStack에 추가합니다:

모양을 확인합니다:

이제, 먼저 우리의…

하단 바

이제 재사용성을 즐겨봅시다. BottomBar.swift 파일에서 코드에 추가하기만 하면 됩니다:

그리고 전체 코드는 다음과 같습니다:

쉽지 않으셨나요? 어때 보이시나요?

멋지네요!

약간의 복잡성 추가

이 뷰에서 가장 복잡한 부분은 타임라인 상세 뷰입니다.

타임라인 뷰에서 했던 것과 일관성을 유지하기 위해 TimlineDetailView.swift라는 새 파일을 만들고 그 안에 타임라인 뷰에서와 마찬가지로 데이터를 저장할 새 구조체를 만들어 보겠습니다.

이미 타임라인뷰에 미리보기 구조체가 선언되어 있으므로 이를 재사용해 보겠습니다.

구조체에는 미리보기가 수신되므로 나중에 imageUrl을 검색할 수 있습니다:

이제 뷰 자체를 추가해 보겠습니다:

주요 콘텐츠도 VStack에 있을 것입니다:

그리고 이 VStack에는 네 가지 구성 요소가 있습니다:

• 로고, 텍스트 및 점 3개 버튼이 있는 HStack
• 글의 이미지
• 하트 버튼, 댓글 버튼, 종이 비행기 버튼 및 깃발 버튼이 있는 HStack
• “좋아요…” 및 “모든 댓글 보기” 텍스트가 포함된 VStack

이제 첫 번째 HStack을 추가하는 것부터 시작해 보겠습니다:

그리고 그 안에 컨트롤을 추가합니다:

그런 다음 이미지:

모든 버튼이 포함된 두 번째 HStack입니다:

그리고 그 컨트롤:

그리고 마지막으로 텍스트 VStack:

이제 타임라인 디테일 뷰 안에서 몇 가지 미리보기를 하드코딩해 보겠습니다:

그리고 마지막으로 미리보기 디테일뷰를 ScrollView에 추가하는 과정을 반복합니다:

마지막으로 이를 홈뷰에 추가해 보겠습니다:

마지막으로 결과를 확인해 봅시다:

얼마나 멋진가요!

결론

재사용성은 SwiftUI의 핵심입니다.

오늘 여러분은 이전 글에서 BottomView와 미리보기 구조체를 재사용하는 방법을 배웠습니다.

이제 몇 가지 기능을 추가할 때가 되었으니 기대가 됩니다.

계속 지켜봐 주세요!

참고 자료

• 이 시리즈의 1부는 Instagram 클론 앱입니다.
• 2부는 빠른 Instagram 클론입니다.
• 3부는 Instagram 프로필입니다.
• 4부는 Instagram 홈뷰입니다.
• 소스 코드가 포함된 iOS Instagram 클론 프로젝트를 다운로드하고 Back4App 사용을 시작하세요.

지금 Back4app에 가입 하고 Instagram 클론 앱 제작을 시작하세요.