[Android Tutorial] 좌우 스와이프 가능한 탭 기반의 앱 만들기

앱을 만들 때 좌측 상단에 햄버거 아이콘을 넣고 좌측에서 나오는 슬라이딩 메뉴를 활용하는 방식을 선호하는 편이다. 그런데 더 심플한 형태가 필요할 때가 많을 것 같아 ViewPager와 Tab이 모두 적용된 형태를 만들어봤다. 예전에는 프로요와 진저브레드가 호환되지 않는다는 이유로 ActionBar를 안 쓰고 ActionBarSherlock 라이브러리를 썼었는데, 이젠 다 지원되나보다. 새 프로젝트를 그 동안 너무 안 해본 것이 티가 남 프로요와 진저브레드를 아직까지 지원할 필요가 있을까도 싶지만, 그래도 지원 안 하면 괜히 찜찜.

일단, 아래와 같이 설정하면 Action Bar Tabs (with ViewPager) 앱이 만들어진다.

가장 눈에 거슬리는 것이 상단의 타이틀 바인데, onCreate 에 아래 두 줄을 삽입하고, onCreateOptionsMenu와 onOptionsItemSelected 모두 제거하면 된다.

actionBar.setDisplayShowTitleEnabled(false);
actionBar.setDisplayShowHomeEnabled(false);

이제 각 탭을 옮길 때마다 다른 Fragment를 호출하도록 변경할 필요가 있다. SectionsPagerAdapter 내 getItem 을 아래와 같이 수정한다.

@Override
public Fragment getItem(int position) {
if (position == 0)
return new RedFragment();
else if(position==1)
return new GreenFragment();            
else
return new BlueFragment();            
}

이렇게 수정하게 됨에 따라 PlaceholderFragment 는 더 이상 쓰이지 않으므로, PlaceholderFragment 클래스는 전부 삭제해도 무방하다.

Red, Green, Blue Fragment는 모두 아래와 같은 식이다.

public class RedFragment extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_red, container, false);

return view;
}

}

<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"
    android:background="#ff0000">

    <TextView
        android:id="@+id/txtRed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Red" />

</RelativeLayout>

그러면 아래와 같은 식으로 표시된다. 이제 각각의 탭에서 구현만 하면 된다.

본격적인 개발을 위한 준비 끝!