안드로이드에서 카톡방식의 ViewPager + Tab 레이아웃 구현

카카오톡 을 사용하시다보면 좌우로 화면을 넘겨서 탭을 이용할 수 있는데요,

예를 들면 친구탭에서 채팅탭으로 이동할때,

상단 탭을 누를수도 있지만, 

옆으로 쓰윽 밀어도 되지요?

이런 방식의 레이아웃을 구현하는 것을 정리해보려고 합니다.

1. 구조분석

상단에 3개의 탭메뉴가 있고, 

각 탭에 따라서, 3개의 페이지가 있는데요,

이 페이지들은  Fragment로 만들려고 합니다.

만들고자 하는 화면은 아래와 같습니다. 

움직임을 보여드릴수는 없지만, 

카톡처럼 좌우로 스와이핑되면서 탭간이동이 되는 화면입니다;;;.

2. 필요한 라이브러리 설정

오늘도 예외없이 라이브러리 설정 먼저하고 갑니다~.

dependency에서 design이라고 검색하시면 맨위에 나오는 라이브러리를 선택해주세요.

이번에 사용하는 라이브러리는 design support library인데요. 아래와 같습니다.

3. Fragments 생성

각 탭에서 보여줄 Fragment들을 생성해 놓겠습니다.

스와이핑해서 볼 화면들을 미리 준비해 놓는다고 생각해주시면 될 것 같아요.

fragment_page_one, two, three로 명하겠습니다. 

각 프래그먼트들은 구분될수 있도록 

XML파일에 page_one, page_two, page_three라고

텍스트를 올려놓겠습니다.

자동으로 생성된 프래그먼트에 

추후에, 프래그먼트의 static메소드로 객체를 생성해낼 수 있도록,

newInstance 메소드를 추가해줍니다.

4. Adapter 생성

이전에 RecyclerView할 때 사용했었는데요.

데이터와 UI를 연결할 때 Adapter라는 것을 가운데에 두고 연결을 하는데요.

여기서는 FragmentPagerAdapter를 사용하겠습니다.

TestPagerAdapter를 생성하겠습니다.

이때, FramentPagerAdapter를 상속하구요.

구현해야할 메소드는 getItem과 getCount입니다.

잠깐 삼천포로 빠져서,  FragemtPagerAdapter를 보고 가겠습니다.

FragmentPagerAdapter는 PagerAdapter를 상속받고 있는 추상클래스군요.

4-1. Adapter구현

삼천포에서 돌아와서 adapter를 구현하겠습니다.

먼저 getItem부분부터 볼께요~

말그대로 이페이지에 보여줄 아이템을 얻어와라라는 거죠.

저희가 생성했던 프래그먼트들을 가져올 것인데요.

여러가지 방법이 있지만, switch문으로 해보겠습니다.

다음은 getCount()보겠습니다. 페이지가 몇개인지를 return하는 것인데요.

이부분은 3개의 페이지를 만들 것이라서 3개로 넘겨줍니다.

5. XML에 ViewPager올리기

xml에서 뷰페이저를 찾아서 올려주면 됩니다.

6. Java파일에서 뷰페이저 연결

뷰페이저를 findlViewByID로 찾아주고,

당연히도, 어뎁터를 생성해서 setAdapter하는 과정을 거칩니다.

이때 인자로 fragmentManager를 요구하는데요.

getSupportFragmentManager()메소드로 쉽게 구할 수 있습니다.

7. XML에 탭추가하기

이제 뷰페이저가 되었으니 위에 탭을 추가해보겠습니다.

뷰페이저는 탭 밑에 있어야 하므로 layout_below를 이용합니다.

8. Java파일에서 탭설정

탭을 찾아오고, setupWithViewPager라는 메소드로 페이저를 찾아와 연결해줍니다.

9. 페이저의 제목을 탭어댑터에서 설정

위에서 구현했던 어댑터에 한가지 추가로 구현해줘야 할 것이 있습니다.

getPageTitle()이라는 메소드인데요.

탭의 제목을 알수 있도록 하자는 거죠,

여기까지해서, 카톡같이() 옆으로 휙휙 넘기면도, 탭을 눌러서 이동할 수 있는

레이아웃을 만들어 보았습니다.