Android ViewPagerStrip 예제

이번에 해볼 예제는 여러 장의 페이지를 한번에 표현할 수 있는 뷰페이저를 해볼 것입니다.

그 중에서도 support Library v4에 있는 탭이 움직이는 뷰페이저를 사용하였습니다.

뷰페이저의 특징은 위의 탭을 기준으로 손쉽게 페이지 이동이 가능하다는 점과,

스와이프동작으로도 페이지간 이동이 가능해서 많은 양의 정보를

보기 쉽게 구현 할 수 있는 장점을 지녔습니다.

프로젝트의 구성은 Fragment를 전제적으로 구성하고 컨트롤할 MainActivity와 

각각의 Fragment를 담당할 Fragment1, 2, 3

마지막으로 Fragment를 관리할 ViewPagerAdapter

이렇게 구성이 되어있습니다.

우선 프로젝트를 시작하기 전, value - string.xml 폴더에 Fragment1~3 값을 입력해 놓습니다.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">PagerTabStrip Tutorial</string>
    <string name="Fragment1">This is Fragment 1</string>
    <string name="Fragment2">This is Fragment 2</string>
    <string name="Fragment3">This is Fragment 3</string>

</resources>

첫번째로 각각의 Fragment를 작성해놓겠습니다.

본 프로젝트는 예제로 해보며 기능에 대한 이해를 우선시 하고 있기 때문에

특별한 화면 구성 없이 뷰 가운데 TextView만 위치시켜 페이지가 이동하는 것을 확인하는 것으로 하겠습니다.

fragmenttab1.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/Fragment1" />

</RelativeLayout>

fragmenttab2.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/Fragment2" />

</RelativeLayout>

fragmenttab3.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="@string/Fragment3" />

</RelativeLayout>

layout에서 특별한 위젯 없이 TextView만 사용했기 때문에

레이아웃을 불러오는 것으로 코드가 끝납니다.

그 외 Fragment에서 특별한 동작에 대한 코드는 onCreateView 메소드에 

추가적으로 입력하면 될 것입니다.

다음으로 FragmentTab1.java입니다.

package com.project9.viewpagertabstriptutorial;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by ChoiMinSu on 2016. 4. 5..
 */
public class Fragment1 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        //Inflater를 사용해 Fragment에 사용할 layout을 불러온 후 return
        //해당 Fragment에 대한 기능적인 코드를 이곳에 작성하면 된다
        View v = inflater.inflate(R.layout.fragment1, container, false);
        return v;
    }

}

FragmentTab2.java입니다.

package com.project9.viewpagertabstriptutorial;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by TonyChoi on 2016. 4. 5..
 */
public class Fragment2 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        //Inflater를 사용해 Fragment에 사용할 layout을 불러온 후 return
        //해당 Fragment에 대한 기능적인 코드를 이곳에 작성하면 된다
        View v = inflater.inflate(R.layout.fragment2, container, false);
        return v;
    }
}

FragmentTab3.java입니다.

package com.project9.viewpagertabstriptutorial;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by TonyChoi on 2016. 4. 5..
 */
public class Fragment3 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        //Inflater를 사용해 Fragment에 사용할 layout을 불러온 후 return
        //해당 Fragment에 대한 기능적인 코드를 이곳에 작성하면 된다
        View v = inflater.inflate(R.layout.fragment3, container, false);
        return v;
    }
}

ViewPagerAdapter.java입니다.

실질적으로 FragmentActivity 내에서 Fragment들의 이동이나, Tab의 타이틀을 지정할 수 있는

관리를 해주는 코드입니다.

getCount에 사용자가 사용할 페이지 수를 return 값에 넣어주고,

getPageTitle이 상단에 위치하게 될 탭 안에 타이틀을 입력하는 곳입니다.

getItem 메소드에서는 페이지 포지션 별로 자신이 표현하고자 하는 Fragment를 return해주면

원하는 페이지가 표현될 것입니다.

package com.project9.viewpagertabstriptutorial;

import android.content.Context;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

/**
 * Created by TonyChoi on 2016. 4. 5..
 */
public class ViewPagerAdapter extends FragmentPagerAdapter {

    final int PAGE_COUNT = 3;
    private String tabTitle[] = new String[]{"Tab1", "Tab2", "Tab3"};
    Context ctx;

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

    //뷰페이저 페이지 수를 지정
    @Override
    public int getCount() {
        return PAGE_COUNT;
    }

    //뷰페이저 내부 뷰를 지정(아이템 지정)
    @Override
    public Fragment getItem(int position) {
        //switch-case문을 사용하여 페이지 포지션 별로 그에 맞는 Fragment를 리턴하여 화면을 작성한다
        switch (position) {
            case 0:
                Fragment1 fragment1 = new Fragment1();
                return fragment1;

            case 1:
                Fragment2 fragment2 = new Fragment2();
                return fragment2;

            case 2:
                Fragment3 fragment3 = new Fragment3();
                return fragment3;
        }
        //페이지 포지션이 없는 곳으로 이동을 하려는 경우 null을 리턴하여 움직임이 없게 한다
        return null;
    }

    //페이지 타이틀을 지정
    //포지션을 이용하여 페이지별 이름을 다 다르게도 설정가능
    @Override
    public CharSequence getPageTitle(int position) {
        return tabTitle[position];
    }

}

이제  메인 액티비티를 작성해보도록 하겠습니다.

activity_main.xml입니다.

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.view.ViewPager
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.project9.viewpagertabstriptutorial.MainActivity">

    <android.support.v4.view.PagerTabStrip
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="10dp"
        android:paddingTop="10dp"
        />


</android.support.v4.view.ViewPager>

마지막으로 MainActivity.java입니다.

package com.project9.viewpagertabstriptutorial;

import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends FragmentActivity {

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

        //뷰페이저 세팅
        ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        //뷰페이저의 어댑터를 세팅
        viewPager.setAdapter(new ViewPagerAdapter(getSupportFragmentManager()));
    }
}

ViewPagerTabStripTutorial.zip

출처 : http://www.androidbegin.com/