Android Swipe Views 예제

 지난 글에서 Swipe Views를 생성하는 방법과 기본적인 코드 동작방식을 설명한데 이어서 직접 예제를 작성해보았습니다. XML을 통한 UI구성이기 때문에 간단한 코드를 통해 Fragment를 상속받아 Swipe Views를 작성해보았습니다.

 Swipe Views의 기본적인 설명 글은 아래 글을 참고하세요.

    http://www.thdev.net/373

작성한 예제코드

 작성한 예제코드는 ActionBar를 사용하였기에 API 11(3.0)이상에서 동작합니다.

 Swipe Views를 생성하고, 각 페이지별로 Fragment 3개를 생성합니다. Fragment 별로 XML을 각각 불러오고 상황에 따라서 해당 Fragment에서 값을 처리합니다.

 각 페이지는 이전에 작성한 예제들과 웹뷰를 구성하였습니다. 웹뷰는 추후 별도의 글로 작성하고, 아래 기존예제를 참고하여 Swipe Views를 작성하였습니다.

 확장 리스트 뷰 작성 : http://www.thdev.net/368

 Parcelable 인터페이스 구현 : http://www.thdev.net/364

예제 코드

SectionsPagerAdapter.java

 - 각 페이지별로의 getItem을 처리하였습니다. 각각의 Fragment를 상속받는 클래스를 리턴하게 되며, Item별로 제목을 리턴하게 됩니다.

public class SectionsPagerAdapter extends FragmentPagerAdapter {
	Context mContext;

	public SectionsPagerAdapter(Context context, FragmentManager fm) {
		super(fm);
		mContext = context;
	}

	@Override
	public Fragment getItem(int position) {
		// getItem is called to instantiate the fragment for the given page.
		// Return a DummySectionFragment (defined as a static inner class
		// below) with the page number as its lone argument.
		switch(position) {
		case 0:
			return new ExpandableMainFragment(mContext);
		case 1:
			return new ParcelableExample(mContext);
		case 2:
			return new WebViewMainFragmnet(mContext);
		}
		return null;
	}

	@Override
	public int getCount() {
		// Show 3 total pages.
		return 3;
	}
	
	@Override
	public CharSequence getPageTitle(int position) {
		// TODO Auto-generated method stub
		switch (position) {
		case 0:
			return mContext.getString(R.string.title_section1).toUpperCase();
		case 1:
			return mContext.getString(R.string.title_section2).toUpperCase();
		case 2:
			return mContext.getString(R.string.title_section3).toUpperCase();
		}
		return null;
	}

}

Fragment를 상속받는 Class의 View 처리 - 확장 리스트 View 처리 부분

 - XML을 통한 처리를 하였기에 아래와 같이 간단한 코드가 만들어집니다.

 - View를 return 하여 처리하게 됩니다.

 - FragmentPagerAdapter의 getItem을 처리하면 아래의 onCreateView가 실행되게 됩니다. View는 직접 만들어도 되고, layout를 생성하여 만들어도 됩니다.

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
	Log.v("ExpandableMainFragment", "create");
	View view = inflater.inflate(R.layout.page_one_expandablelistview, null);
	
	mList = (ExpandableListView)view.findViewById(R.id.expandableListView);
	mList.setAdapter(new ExpandableAdapter(mContext, createData()));

	return view;
}

결과 화면

 3개의 Fragment로 구성하여 아래와 같은 결과물을 적용하였습니다. 첫 번째 페이지는 확장 리스트 뷰, 두 번째 페이지는 Parcelable, 마지막 페이지는 웹뷰를 구성하였습니다. 모두 Fragment를 통한 구성이기에 간단한 예제로 작성이 마무리 되었습니다. ActionBar 부분은 Parcelable 페이지 전환시에만 확인이 가능합니다. 그렇기에 3.0 이상에서만 확인이 가능합니다.

소스코드 다운로드

  http://db.tt/dGZ5ckDq