Firebase에서 데이터를 받아와 ViewPager에 적용하기

2024. 4. 20. 21:33문제 해결

전 블로그에선 Storage에서 이미지 리스트를 받아와서 ViewPager에 보여주는 내용을 적었었습니다!

그래서 이번에는 ViewPager를 클릭 했을 때 해당 이미지를 포함하고 있는

Firestore의 컬렉션에 접근해서 해당 컬렉션의 데이터를 가져오는 것을 구현하려고 합니다!

 

 

이미지 이름으로 컬렉션에 접근하는 메서드 구현

 

ViewPager엔 이미지 밖에 없으므로

이미지의 이름으로 컬렉션에 접근할 수 있는 메서드를 만들어주었습니다

 

 

위의 코드를 보면 

galleryInfo가 컬렉션에 접근하는 객체이고

거기서 galleryInfoImg에 접근해서 매개변수로 받는 galleryImg의 이름을 가진 필드를 찾아줍니다

그래서 getGalleryByImage를 객체로 만들면

해당 필드에 접근할 수 있습니다!

 

 

 

Repository 구현

 

 

Repository 이렇게 작성을 해줬습니다

(왜 이렇게 하는 지는 전 블로그에 있습니다,,,ㅎ)

 

 

 

 

ViewModel 작업

 

 

ViewModel에서 전에 Repository 안에 정의해둔 

이미지의 이름으로 데이터를 가져오는 메서드를 가져옵니다

(GalleryFragment에서 사용하기 위해)

 

 

 

 

 

Viewpager에서 보여주는 GalleryFragment 작업

 

이제 위에서 이미지의 이름을 가지고 해당 필드에 접근하는 걸 구현했으니 

이미지의 이름을 넘겨주시만 하면 됩니다!

 

 

자 위의 코드는 ViewPager의 이미지를 클릭했을 때 발생하는 이벤트인데

빨간 밑줄이 쳐져 있는 부분은 이미지 Url을 이미지의 이름으로 바꿔주는 코드를 

확장함수로 만들어 사용한 부분입니다

Url을 이미지 이름으로 변환

 

 

 

이후 밑에 파란 밑줄은 위에 정의해둔 이미지의 이름으로 필드의 정보를 가져오는

객체를 만들어둔 것입니다

그래서 InfoOneActivity로 갈 때 이미지의 이름을 넘겨줘서

해당 이미지를 포함한 필드의 정보를 가져오게 할 수 있습니다!

 

 

 

InfoOneActivity 작업( ViewPager의 세부 정보를 보여줌)

 

이제 이 부분은 ViewPager의 항목을 눌렀을 때 

그 항목의 이름이라던지 가격, 제조년월들을 가져오는 부분입니다!

 

 

위의 밑줄 친 부분처럼 GalleryFragment에서 보낸 이미지 이름을 받아주고

그 이미지 이름으로 필드에 접근하는 객체를 만들어 주었습니다!!

 

 

이후 이렇게 출력을 해주었으며 

파란 밑줄을 친 부분은 이미지의 이름을 다시 Url로 바꿔주는 확장함수입니다!

 

 

 

 

지금 캡쳐가 오류가 나서,, 

구현은 되었으나 추후에 올리도록 하겠습니다!