부트캠핑 앱을 만들면서
사용자들이 찍은 캠핑 사진을 올리고,
방문했던 캠핑장도 기록하자! 라고 하니
그러면 또 댓글이 빠질 수 없다는 의견이 많아
댓글 기능을 만들고 있었습니다!
그런데 댓글을 작성하면 자연스럽게 작성한 댓글따라 아래로
화면이 이동해야될 것 같아서
이것 저것 생각해봤는데...
저번에 토이 프로젝트에서
채팅앱을 간단하게 구현한 적이 있었는데
거기서는 채팅을 입력하면 화면을 아래로 이동하기 위해
스크롤뷰를 위아래로 뒤집고, 좌우로 뒤집어서
자연스럽게 VStack의 아래로 쌓이도록 구현했었습니다!
이번에도 그렇게 구현해도 되겠지 생각해
댓글 스크롤뷰를 커스텀으로 만들었습니다!
기존 스크롤뷰 안에 코드를 넣듯이 커스텀 스크롤뷰 안에 코드를 넣어 사용하기 간편하게 구현했습니다!
과연..!
오오..! 한번만에 성공..!?
이라고 기뻐하다가...한 가지 문제점을 발견했습니다..
화면 밖으로 나가거나, 다른 화면에 가게 되면
초기 화면이 댓글의 가장 아래로 나오는...
저는 댓글보다는 컨텐츠가 처음에 딱 나오고!
댓글은 작성할때 아래로 내리고 싶었습니다!
그래서 찾아보다가
ScrollViewReader를 알게 되었습니다.
https://developer.apple.com/documentation/swiftui/scrollviewreader
ScrollViewReader | Apple Developer Documentation
A view that provides programmatic scrolling, by working with a proxy to scroll to known child views.
developer.apple.com
시점을 이동할 곳에 @Namespace로 변수를 만들고,
VStack안에 구성된 뷰에 id를 붙여줍니다.
여기서는 뷰의 가장 위에 구성되어 있는 diaruUserProfile에 topID를,
가장 아래에 EmptyView()를 만들어 bottomID를 붙여줬습니다.
그리고 ScrollViewReader의 proxy를 사용해서
적절하게 설정된 id로 이동할 수 있도록 구현했습니다.
아래 코드를 보시면
.OnAppear{ }, 화면이 나타날때 화면의 가장 위인 topID로 이동하고,
댓글 작성 TextField를 누르면 bottomID로 이동하도록 구현했습니다.
그렇게 하니..!
오오 생각한 것과 비슷하게 구현이 되었고, 추가로 부드럽게 애니메이션도 넣어줘서 훨씬 좋았습니다!
이제 디테일뷰에 들어왔을때는 메인 컨텐츠가 먼저 보이고,
댓글을 작성하기 위해 텍스트필드를 누르면 화면 가장 아래로 이동하게 되었습니다.
그런데 아래로 이동하는 시점을 텍스트필드를 눌렀을때로 설정하다 보니
댓글 작성 버튼을 눌렀을때는 아래로 이동하지 않아 이것도 수정해주었습니다.
아래 코드는 사용자가 설정한 사진이 있을때는 설정한 사진을, 사진이 없다면 디폴트 이미지를 띄우게 했고,
댓글 작성 TextField를 클릭하거나,
댓글 작성 완료버튼을 누르면 proxy를 아래로 이동하게 설정했습니다.
이제 진짜 과연...!
처음에 생각한 것 처럼 구현했습니다!
부트캠핑 출시하고 발표하는 날까지 화이팅 화이팅!!!
'SwiftUI Project > SwiftUI Troubleshooting' 카테고리의 다른 글
| [날씨의 i] WidgetKit 2탄! (서버와 데이터 연동하기, 위젯 구성하기) (0) | 2023.09.10 |
|---|---|
| [날씨의 i] 첫 WidgetKit 도전..! 험난했던 시작 (WidgetKit 추가와 AppGroup설정, UserDefaults로 데이터 공유) (0) | 2023.09.10 |
| [부트캠핑] 스켈레톤뷰 애니메이션 넣기, 1.1 업데이트 성공! (SDWebImage) (1) | 2023.06.10 |
| [부트캠핑] 좋아요와 댓글 숫자 오류 해결..!(EnvironmentObject 와 StateObject의 차이점!) (0) | 2023.02.21 |
| [부트캠핑] 이미지 로딩 개선! AsyncImage에서 SDWebImage로 변경 (0) | 2022.12.23 |
