[Android] ViewPager + TitleStrip(타이틀스트립)

뷰페이저를 슬라이드하면 알아서 위에있는 타이틀이 바뀐다.

저것이 바로 타이틀스트립!

이번 부스트코스 강의를 보고 처음 들어본것이다.

- 타이틀스트립 기능 : 현재 보여지고 있는 화면이 전체 프래그먼트 중 어느 것인지 알 수 있음.

타이틀스트립은, 뷰페이저 안에 child view로 선언 가능하다.

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v4.view.PagerTitleStrip
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:textColor="#FFFFFF"
        android:textSize="20sp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"/>
</android.support.v4.view.ViewPager>

그리고 어떤 텍스트를 보여줄지는 뷰페이저 어댑터 클래스에서 getPageTitle 메소드만 오버라이드 해주면 된다.

@Nullable
@Override
public CharSequence getPageTitle(int position) {
    return (position + 1) + "번째탭";
}

그럼 끝!

다음으로 탭스트립이다.

타이틀스트립과 디자인이 약간 다르다.

그리고 차이점은 클릭하면 탭처럼 전환된다는 것.

개인적으로 액션바에 탭을 추가하는것보다 탭 스트립이 디자인적으로도 더 예쁘다고 생각했는데, 각각의 필요성에 차이가 있기 때문에 분리되어있어야 하는 것 같다.

위에 예제는 총 3개의 탭 뿐이지만 마지막 탭이 보이지 않는다. 탭이  더 있다면 모르겠지만, 적은 경우 굳이 탭스트립으로 표현하지 않는 것이 나은 편이라고 생각한다.

타이틀스트립, 탭스트립이 적용된 예시는 아마도 대부분의 쇼핑앱에 있는 슬라이드쇼가 아닐까 싶다. 쿠x 앱을 보니 메인화면에 뷰페이저가 떡하니 보인다!!! 이처럼 상용화되어있는 앱들을 잘 살펴보면, 어떤 뷰들로 이루어져있는지 알 수 있다. (안드로이드 공부를 하면서 그쪽으로 더 많이 보이는것같다.. 직업병이 생기고있다!)

아무튼, 예쁘게 커스터마이징 하면 시중에 나와있는 앱처럼 멋있는 뷰를 만들 수 있는 자신감이 생겼다. 

- 전체코드

(1) activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v4.view.PagerTabStrip
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimary"
                android:textColor="#FFFFFF"
                android:textSize="20sp"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"/>
        </android.support.v4.view.ViewPager>
</RelativeLayout>

(2) MainActivity.class

public class MainActivity extends AppCompatActivity implements Fragment1.changeButtonEvent {
    private ViewPager viewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Fragment1 fragment1 = new Fragment1();
        Fragment2 fragment2 = new Fragment2();
        Fragment3 fragment3 = new Fragment3();

        viewPager = findViewById(R.id.pager);
        viewPager.setOffscreenPageLimit(3);
        ViewPagerAdapter adapter = new ViewPagerAdapter(getSupportFragmentManager());
        adapter.addItem(fragment1);
        adapter.addItem(fragment2);
        adapter.addItem(fragment3);
        viewPager.setAdapter(adapter);
    }

    class ViewPagerAdapter extends FragmentStatePagerAdapter {
        ArrayList<Fragment> list = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        public void addItem(Fragment fragment) {
            list.add(fragment);
        }

        @Override
        public Fragment getItem(int position) {
            return list.get(position);
        }

        @Override
        public int getCount() {
            return list.size();
        }

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            return (position + 1) + "번째탭";
        }


    }

    @Override
    public void onChangeButtonListener() {
        viewPager.setCurrentItem(1);
    }
}

(3) Fragment1.class (2, 3은 생략)

public class Fragment1 extends Fragment {
    changeButtonEvent listener;

    public interface changeButtonEvent{
        void onChangeButtonListener();
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState){
        final ViewGroup rootView = (ViewGroup) inflater.inflate(R.layout.fragment1, container, false);

        Button button = rootView.findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                listener.onChangeButtonListener();
            }
        });

        return rootView;
    }

    @Override
    public void onAttach(Context context) {
        super.onAttach(context);
        listener = (changeButtonEvent) context;
    }
}

생각해보기

1. 뷰 페이저에 탭스트립을 추가하면 어떻게 보일까요? 탭처럼 선택된다!
2. 스트립을 아이콘으로 보여주려면 어떻게 해야 할까요? background 속성을 표시하고자 하는 아이콘으로 설정하면 된다! (drawble xml을 직접 정의해서 추가해도 되겠다!)

출처 : 부스트코스 강의