스팀 앱 개발기 #99 - 포스트의 이미지들을 보여 줄 뷰 페이저 화면 개발

dorian-mobileapp (64)in PIRCOIN · 해적 코인 • 11 months ago

시작하며...

간만에 새 화면 개발을 재개합니다. 지난 포스트에서 언급한 '포스트의 이미지들을 보여 줄 뷰 페이저 화면'입니다.

스크린샷

위 그림과 같이 태그 화면에서 포스트의 썸네일 이미지를 클릭하면, 포스트의 이미지들을 보여줄 뷰 페이저 화면으로 이동합니다. 이 곳에서 손가락으로 왼쪽 또는 오른쪽으로 스와이프하여 다음 또는 이전 이미지를 볼 수 있습니다.

개략적인 구현 방법

bridge.get_ranked_posts API로부터 받을 포스트 리스트에서요. 각 포스트는 "json_metadata"라는 메타데이터가 있구요. 거기에 이미지 리스트(키 값은 "image")가 있습니다. 시작할 뷰 페이저 화면에 이 리스트를 넘겨주면 됩니다.

dorian-steem-domain 모듈 작업 내용

PostItem 클래스
- imageURLs 필드 추가 (뷰페이저 화면에 전달할 이미지 리스트)

dorian-steem-data 모듈 작업 내용

PostItemDTO 클래스
- toPostItem() 메소드: PostItem 객체 생성시 이미지 URL 리스트를 imageURLs 필드에 지정

dorian-steem-ui 모듈 작업 내용

PostImagePagerState 클래스 추가
- 뷰페이저 화면의 상태 데이터 정의
- 이미지 URL 리스트 보유
PostImagePagerAdapter 클래스 추가
- 포스트 이미지 뷰페이저 뷰와 연결될 어댑터
- 이미지 URL 리스트로부터 각 이미지 로딩
PostImagePagerViewModel 클래스 추가
- 포스트 이미지 리스트를 담을 MutableStateFlow 정의
- 이미지 URL 리스트 업데이트할 updateImageURLs 메소드 정의
PostImagePagerActivity 클래스 추가
- 포스트 이미지 뷰페이저 화면 담당
- PostImagePagerViewModel 객체로부터 이미지 URL 리스트 수집 및 처리

다음 작업은...

포스트의 내용을 보여 줄 화면을 개발해볼까 합니다.

마치며...

이 뷰페이저 기능은 웨어인 안드로이드 앱에 이미 적용된 기능입니다. 재작년엔가 이 기능을 처음 보고 어떻게 구현했을까 참 궁금했었죠. bridge.get_ranked_posts API의 응답 자료를 분석한 후, 이게 어려운 작업은 아니라는 것을 파악할 수 있었습니다.

다음에 개발할 포스트 내용 화면은 좀 더 어려운 개발이 될 것입니다. 왜냐면요. 스팀잇 사이트에서 구현된 유튜브 화면 보여주기는 기존 안드로이드에서 공유된 오픈 소스 마크다운 뷰에서는 구현이 안 되어 있기 때문입니다. 스팀잇에서는 단순한 이미지 링크도 이미지로 변환하여 보여주는데요. 이것도 오픈 소스에서는 구현이 안 되어 있습니다. 이러한 기능들까지 개발하려면, 공수가 좀 들 것으로 예상됩니다. 일단 기존 오픈 소스 마크다운 뷰를 먼저 활용해볼 예정입니다.