프래그먼트 + ViewPager

이전 포스팅에서 언급했듯이 Fragment 동작에 ViewPager 를 연결해 보도록 하겠습니다.

기본적인 ViewPager는 SDK 에서 제공하지 않고 

android.support.v4 에서 제공하고있으니

해당 jar 를 추가해야 합니다.

ViewPager Reference

http://developer.android.com/reference/android/support/v4/view/ViewPager.html

Project Properties -> Java Build Path -> 에서 위와같이 SDK가 설치된 경로에서 jar 파일을 Add 시키면 됩니다.

기존 main,xml 에서

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="fill_parent"

    android:orientation="vertical" >

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:orientation="vertical" 

        android:layout_weight="0.2">

        <LinearLayout

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:orientation="horizontal" >

            <Button

                android:id="@+id/btn_01"

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:layout_weight="1"

                android:text="버튼1" />

            <Button

                android:id="@+id/btn_02"

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:layout_weight="1"

                android:text="버튼2" />

            <Button

                android:id="@+id/btn_03"

                android:layout_width="fill_parent"

                android:layout_height="wrap_content"

                android:layout_weight="1"

                android:text="버튼3" />

        </LinearLayout>

    </LinearLayout>

    <!-- 프래그먼트 노출 영역 -->

    <android.support.v4.view.ViewPager

        android:id="@+id/pager"

        android:layout_weight="0.8"

        android:layout_width="match_parent"

        android:layout_height="fill_parent"

        android:orientation="vertical"

        >

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

    <LinearLayout

        android:visibility="gone"

        android:id="@+id/target_fragment"

        android:layout_width="match_parent"

        android:layout_height="fill_parent"

        android:orientation="vertical" />

</LinearLayout>

기존 LinearLayout 부분을 GONE 시키고 그 위치에 ViewPager 를 얹혀 두었습니다.

코드 부분은 간단하게 직관적인 클래스를 바로 적용했습니다. 기본개념을 이해 하기 좋게?.

MainActivity.java

public class MainActivity extends FragmentActivity implements OnClickListener{
	private Button mBtn01, mBtn02, mBtn03; //프래그먼트 이동 버튼
	
	private Fragment frReplaceFragment = null;
	
	/**
	 * ViewPager 관련 추가
	 */
	private ViewPager mViewpager;
	private PagerAdapter mPagerAdapter;
	
	

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        mBtn01 = (Button)findViewById(R.id.btn_01);
        mBtn01.setTag(1);
        
        mBtn02 = (Button)findViewById(R.id.btn_02);
        mBtn02.setTag(2);
        
        mBtn03 = (Button)findViewById(R.id.btn_03);
        mBtn03.setTag(3);
        
        mBtn01.setOnClickListener(this);
        mBtn02.setOnClickListener(this);
        mBtn03.setOnClickListener(this);
        
        mViewpager = (ViewPager)findViewById(R.id.pager);
        mPagerAdapter = new FragmentStatePagerAdapter(getSupportFragmentManager()) {
			
			@Override
			public int getCount() {
				// TODO Auto-generated method stub
				return 3;
			}
			
			@Override
			public Fragment getItem(int position) {
				switch (position) {
				case 0:
					frReplaceFragment = new FirstFragment();
					break;
					
				case 1:
					frReplaceFragment = new SecondFragment();
					break;
					
				case 2:
					frReplaceFragment = new ThirdFirstFragment();
					break;

				default:
					break;
				}
				return frReplaceFragment;
			}
		};
		mViewpager.setAdapter(mPagerAdapter);
        
//        setFragmentChange(1);
    }
    
    @Override
    public void onClick(View v) {
    	/**
    	 * 버튼 동작 변경.
    	 */
    	Log.d(">> ",  "" + (Integer)v.getTag());
    	switch (v.getId()) {
    	
		case R.id.btn_01:
//			Toast.makeText(this, "01", Toast.LENGTH_SHORT).show();
//			setFragmentChange((Integer)v.getTag());
			mViewpager.setCurrentItem((Integer)v.getTag() - 1);
			break;
			
		case R.id.btn_02:
//			setFragmentChange((Integer)v.getTag());
			mViewpager.setCurrentItem((Integer)v.getTag() - 1);
			break;
			
		case R.id.btn_03:
//			setFragmentChange((Integer)v.getTag());
			mViewpager.setCurrentItem((Integer)v.getTag() - 1);
			break;
			

		}
    	
    }
    
    //프래그먼트 이동
    public void setFragmentChange(int fragmentIdx){
    	Log.d(">>>>", "FragmentIdx : " + fragmentIdx);
    	switch (fragmentIdx) {
		case 1:
			frReplaceFragment = new FirstFragment();
			break;
		case 2:
			frReplaceFragment = new SecondFragment();
			break;
		case 3:
			frReplaceFragment = new ThirdFirstFragment();
			break;

		default:
			break;
		}


		// replace fragment
		final FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
		transaction.replace(R.id.target_fragment, frReplaceFragment);
		
		//Fragment Stack 추가
//		transaction.addToBackStack(null);

		// Commit the transaction
		transaction.commit();
    }
    

}

바뀐 부분은 기존 프래그 먼트 이동시 setFragmentChange 를 사용했으나

ViewPager가 View를 직접관리 하므로 FragmentStatePagerAdapter 를 통해 화면 전환이 되게 됩니다.

결과 화면

012

좌우로 플리킹 Swipe 하면 동작하게 되고, 버튼 클릭이벤트는

mViewpager.setCurrentItem((Integer)v.getTag() - 1);  

ViewPager에 인덱스만 셋팅하는 것으로 끝이납니다.

다음엔 이 화면에 

NavigationDrawer 

요놈을 연결해 보도록 하겠습니다.

참고소스 : 댓글ㄳ~ !!

FragmentTest_step2.zip