ViewPager에 TitleStrip/TabStrip 추가하기

TitleStrip이란?

ViewPager를 사용하면 좌우 스크롤 만으로 fragment들을 바꿔줄 수 있어 편리하다.

하지만 사용하다보면 현재 표시되는 fragment가 전체 fragment 중 어떤 것인지 알기 어려울 때가 있다.

이 때 TitleStrip을 이용하면 전체 fragment의 개수와 현재 표시되는 fragment의 번호를 표시해 줄 수 있다.

 

TitleStrip 사용법

먼저 ViewPager를 구현해야 하는데 이 글에서는 앞선 'ViewPager 사용법' 글의 코드를 사용하였다.

https://ju-hy.tistory.com/55

ViewPager 사용법

 

<androidx.viewpager.widget.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/textView" >

    <androidx.viewpager.widget.PagerTitleStrip
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="#70000000"
        android:textColor="#FFFFFF"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"/>

</androidx.viewpager.widget.ViewPager>

ViewPager를 구현했다면 액티비티의 레이아웃 파일에서 ViewPager 태그 안에 PagerTitleStrip 태그를 넣어주자.

그리고 원하는대로 TitleStrip의 크기, 색이나 글자 크기, 색 등을 지정해주면 된다.

 

@Nullable
@Override
public CharSequence getPageTitle(int position) {
    return "Page " + position;
}

다음으로 어댑터 클래스 내부에 getPageTitle 메소드를 override 하자.

이 메소드는 TitleStrip 안에 들어갈 문자열을 반환해주면 된다.

파라미터로 넘어온 position 값을 이용하여 적절한 문구를 만들어 반환해주자.

 

 

실행해보면 ViewPager 상단에 띠 형태로 현재 item의 위치가 표시되는 것을 볼 수 있다.

 

 

TabStrip 사용법

<androidx.viewpager.widget.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/textView" >

    <androidx.viewpager.widget.PagerTabStrip
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="#70000000"
        android:textColor="#FFFFFF"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"/>

</androidx.viewpager.widget.ViewPager>

TabStrip은 ViewPager에 추가해주었던 PagerTitleStrip을 PagerTabStrip으로 바꿔주기만 하면 된다.

 

TitleStrip과는 다르게 Strip 부분의 글자를 클릭하여 fragment를 전환할 수 있다.

 

 

Reference

[부스트코스]안드로이드 프로그래밍

https://www.edwith.org/boostcourse-android