Storage에서 이미지를 받아와 ViewPager에 보여주고 싶다면??

 

오늘은 storage에 저장 되어 있는 이미지를 받아와서 Viewpager에 넣어주고자 한다면

어떻게 해야하는지 정리를 해보았습니다!

 

저도 이번 프로젝트를 하며 처음 써보았는데

꽤나 골머리를 썼었습니다,,

 

지금부터 함께 봐보겠습니다!

 

 

 

Model 생성

 

이 부분이 필요한 이유는 이미지를 받아오기 위해서도 있지만

다음 작업에서 

Viewpager를 클릭했을 때 해당 이미지 이름이 저장되어있는 컬렉션의

정보를 가져와서 출력해야하기 때문입니다!

 

 

저는 작품의 이름과 제조년월, 작품 설명, 이미지를 받아왔습니다

또한 TimeStamp를 사용하여 시간순으로 정렬이 될 수 있게끔 구현했습니다!

 

 

 

데이터를 받아오는 클래스(DataSource) 생성

 

DataSource

 

이 부분은 Firestore나 Storage에서 데이터를 받아오는 코드를 구현해놓은 클래스입니다

현재 ViewPager에서 이미지 리스트를 보여줘야 하기 때문에

Storage에서 GalleryInfo 파일에 접근하여 

이미지 리스트를 가져오도록 구현했습니다!

 

 

 

 

 

DataSource와 ViewModel의 중간 역할인 Repository 생성

 

이 부분은 말 그대로 데이터를 받아오는 DataSource와 데이터를 받아서 구현하는 ViewModel 사이를 

연결해주는 매개체 역할을 하는 Repository를 생성했습니다

 

Repository

 

사실 저도 이번에 팀 프로젝트를 하면서 처음 써봤기 때문에 정확하게 어떤 역할을 하는 친구인지는 모르겠지만

강사님께서 중간다리 역할을 하는 친구라고 말씀해주셨습니다!!

 

 

 

ViewModel 생성

 

이제 ViewModel에서 화면에 보여주기 위한 작업을 진행하였습니다!

 

ViewModel

 

위의 코드를 통해 Storage에 저장되어 있는 이미지 리스트를 가져옵니다!

 

 

 

 

ViewPager에 포함되어있는 Fragment 

 

이 부분은 ViewPager에 보여지는 Fragment로서 Storage에서 받아온 이미지를 

보여주는 곳입니다!

 

 

여기서 setImage는 확장함수로 정의해둔 것인데

 

 

이렇게 Glide를 활용해서 이미지를 가져옵니다!

 

 

 

 

ViewPager를 포함하고 있는 Fragment

 

이제 최종적으로 ViewPager를 포함하고 있는 Fragment에서

이미지를 보이게끔 가져와야합니다!

 

 

 

위의 코드처럼 ViewModel을 Observe하며 이미지 리스트를 가져와 보여줍니다!