Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

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

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

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

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

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

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

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

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

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