[안드로이드 코틀린] 뷰페이저 와 인디케이터(탭 레이아웃)인스타그램 사진 같이

위에 이미지 처럼 옆으로 넘기면 사진 혹은 이미지가 넘어가고 그 밑에 페이지 수와 몇번째 페이지인지 알 수 있게 하단에 동그라미를 표시 해놓는 어플리케이션을 많이 보셨을 겁니다 대표적으로 인스타그램을 들수가 있을 겁니다! 

 

요번엔 안드로이드 개발 할때 인스타그램 처럼 사진 혹은 이미지를 옆으로 넘길수 있고 페이지 수와 현재 페이지를 알 수 있게 뷰페이저 와 탭 레이아웃을 달아보고자 합니다!

 

처음에 res -> drawable 폴더에 

dot_indicator.xml , default_dot.xml , selected_dot.xml 

이렇게 세게의 xml 파일을 만듭니다 

 

default_dot.xml 

selected_dot.xml 

앞서 만든 두개의 xml 은 선택된 페이지를 나타내는 점 이미지 와 선택되지 않은 점의 이미지를 나타내는것입니다

dot_indicator.xml 

 

그리고 dot_indicator.xml 에 자신이 생각하는 조건에 맞게 item을 만들어줍니다

 

그리고 layout 폴더에 pager_adapter.xml 를 만들어 줍니다

 

pager_adapter는 뷰 페이지에 나타나는 화면을 담당합니다! 

 

activity_main.xml

 

 

뷰페이저는 이미지가 보여질 부분입니다 

TabLayout은 하단에 점을 의미하구 app:tabBackground="@drawable/dot_indicator" 을 하므로써 그 전에 만들어 놓은 점을 background로 사용합니다

이제 페이지를 넘기면 하단에 점도 페이지에 맞게 액션을 취합니다 

 

여기서 부터는 코틀린 파일 입니다

adapter

 

adapter 클래스의 역할은 뷰페이저의 이미지를 만들어주는 역할을 합니다 ! 중요!!!

 

adapter 클래스에서 뷰를 담당하는 xml은 앞서 만든 pager_adapter.xml 을 활용합니다 

 

이미지뷰와 텍스트 뷰를 findviewid() 로 찾고 index에 따라 텍스트뷰와 이미지뷰의 색을 다르게 할당 해보았습니다!

 

getCount 함수는 전체 페이지의 수를 의미합니다! 저는 4개로 고정하여 4개의 페이지가 생깁니다 

 

보통 개발할때는 arrayList를 받아 list의 사이즈를 반환합니다 

 

외부 스토리지에서 사진을 받아서 보여주고 싶은 경우에는 외부에서 사진들의 uri 가 있는 List를 adaper 클래스에 넣고 

페이지에 따라서 Glide를 이용해서 보여주시면 됩니다 ! 예제에서는 setBackGroundColor를 했지만 Glide 로 수정!

 

MainActivity

temp는 무시하셔도 됩니다! 

 

adapter 객체를 생성하고 뷰페이저에 adapter 를 넣어주시면 뷰페이저는 완성됩니다 ! 

단 여기서 끝내면 하단에 점은 나타나지 않습니다 탭 레이아웃에 뷰페이저를 넣어주어야 우리가 생각하는 점이 나타나게 됩니다! 

 

여기까지 간단하게 뷰페이저와 탭 레이아웃을 이용해서 circleIndicator 를 만들어 봤습니다 

 

혹시 코드가 필요하시면 댓글 달아주세요 ㅎㅎ

 

Reference

 

recipes4dev.tistory.com/148

안드로이드 뷰페이저 기본 사용법. (Android ViewPager)