[ Android ] Fixed Tabs + Swipe 앱 만들기

이번 튜토리얼에서는 Fixed Tabs Swipe 앱을 만들어 보겠습니다.

Fixed Tabs + Swipe는 좌측과 같은 레이아웃 인데요.

상단의 메뉴를 터치하거나 화면을 터치하여 옆으로 드래그 해주면

설정 되어있는 액티비티로 전환이 됩니다.


































1. 프로젝트 생성하기

먼저 안드로이드 프로젝트를 새로 만들어 줍니다.

프로젝트 생성 시 주의할 부분이 있는데요. Fixed Tabs + Swipe 프로젝트를 생성하기 위해서는  Minimum Required SDK의 버전이 최소 11로 설정 되어야 합니다. 설정을 완료 하셨으면 아래 화면이 나올때 까지 Next를 눌러 줍니다.

위 화면에서 Navigation Type을 Fixed Tabs + Swipe로 선택하고 Finish를 누르시면 기본적인 프로젝트가 생성됩니다.


2. SectionPagerAdapter 클래스 보기
프로젝트가 이미 완성되어서 그대로 사용하셔도 상관없습니다.
public class SectionsPagerAdapter extends public class public class SectionsPagerAdapter extends FragmentPagerAdapter { public SectionsPagerAdapter(FragmentManager fm) { super(fm); } @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. Fragment fragment = new DummySectionFragment(); Bundle args = new Bundle(); args.putInt(DummySectionFragment.ARG_SECTION_NUMBER, position + 1); fragment.setArguments(args); return fragment; } @Override public int getCount() { // Show 3 total pages. return 3; } @Override public CharSequence getPageTitle(int position) { Locale l = Locale.getDefault(); switch (position) { case 0: return getString(R.string.title_section1).toUpperCase(l); case 1: return getString(R.string.title_section2).toUpperCase(l); case 2: return getString(R.string.title_section3).toUpperCase(l); } return null; } }
SectionPagerAdapter 클래스를 보면 getItem() 함수에서 position을 받아 더미 클래스를 생성하고 TextView에 position 번호를 입력해 주고 있습니다.
position은 0부터 getCount()에서 받아오는 이전 값까지 나타냅니다.
getPageTitle() 함수도 position을 받아와 해당 Fragment 메뉴에 라벨을 입력하게 됩니다.


3. 새로운 클래스와 레이아웃 만들기
더미 클래스와 레이아웃을 대체할 새로운 클래스와 레이아웃을 만들어 보겠습니다.
import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class Fragment_Menu1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { } }
Fragment_Menu1 이라는 클래스를 생성하고 Fragment를 상속 받았습니다.
그리고 onCreateView() 함수를 오버라이드 하였습니다.

해당 Fragment에서 보여질 레이아웃 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:text="fragment main 1" /> </RelativeLayout>
TextView를 하나 추가하고 'fragment main 1'이라는 문구를 출력하게 하였습니다.

두 파일을 만들었으니 생성한 클래스에서 레이아웃 파일을 연결해 보겠습니다.
public class Fragment_Menu1 extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_main_1, container, false); return rootView; } }
Fragment_Menu1 클래스의 onCreateView() 함수에서 방금 생성한 fragment_main_1.xml 레이아웃을 연결하였습니다.

동일한 방법으로 클래스 이름과 레이아웃 이름, 그리고 레이아웃에서의 텍스트 내용을 숫자만 증가시켜 4개를 만들었습니다.

4. 메인 액티비티의 SectionPagerAdapter 수정
public class SectionsPagerAdapter extends FragmentPagerAdapter { public SectionsPagerAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { switch(position) { case 0: return new Fragment_Menu1(); case 1: return new Fragment_Menu2(); case 2: return new Fragment_Menu3(); case 3: return new Fragment_Menu4(); } return null; } @Override public int getCount() { // Show 3 total pages. return 4; } @Override public CharSequence getPageTitle(int position) { Locale l = Locale.getDefault(); switch (position) { case 0: return getString(R.string.title_section1).toUpperCase(l); case 1: return getString(R.string.title_section2).toUpperCase(l); case 2: return getString(R.string.title_section3).toUpperCase(l); case 3: return getString(R.string.title_section4).toUpperCase(l); } return null; } }
마지막으로 MainActivity에 존재하는 SectionPagerAdapter를 수정하겠습니다.
getItem()함수에는 position에 따라 3번에서 만들어준 클래스를 리턴해 주겠습니다.
getCount()는 총 4개의 메뉴를 생성 할 것이므로 기존 3의 값에서 4로 변경하였습니다.
getPageTitle()에서는 values -> styles.xml파일을 수정하여 텍스트를 하나 추가시켰습니다.

이제 빌드 후 실행을 시켜보면 완성 된 모습을 보실 수 있습니다.

다음 튜토리얼에서는 이번 튜토리얼에 이어서 ListView를 추가해 보도록 하겠습니다.