[FragmentTabHost] Fragment + Tab Host를 이용해 탭메뉴 만들어 보기

tab menu를 만드는 방법은 여러가지가 있지만, 각자 특색이 있다.

tab host를 쓰는 방법과 tablayout을 쓰는 방법이 있는데, tabhost는 각각의 탭 backgroundColor를 바꿀 수 있는 반면 스크롤이 되지 않고 [ 구현을 더 해야한다]. 반면에 tablayout을 하게되면 스크롤을 자연스럽게 구현해 주는 반면 tab 각각의 색을 변경할 수가 없다.

이 포스팅에선 Fragment + tab host를 이용해 탭메뉴를 구현해 보기로 한다.

<android.support.v4.app.FragmentTabHost
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TabWidget
            android:id="@android:id/tabs"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="0"/>

        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0"/>

        <FrameLayout
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>

    </LinearLayout>

</android.support.v4.app.FragmentTabHost>

일단 이와 같이 xml을 구현한다.

public class MainActivity extends FragmentActivity {
    FragmentTabHost host;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main3);

        host = (FragmentTabHost) findViewById(android.R.id.tabhost);
        host.setup(this, getSupportFragmentManager(), R.id.content);

        TabHost.TabSpec tabSpec1 = host.newTabSpec("tab1"); // 구분자
        tabSpec1.setIndicator("1"); // 탭 이름
        host.addTab(tabSpec1, Fragment1.class, null);

        TabHost.TabSpec tabSpec2 = host.newTabSpec("tab2");
        tabSpec2.setIndicator("2");
        host.addTab(tabSpec2, Fragment2.class, null);

        TabHost.TabSpec tabSpec3 = host.newTabSpec("tab3");
        tabSpec3.setIndicator("3");
        host.addTab(tabSpec3, Fragment3.class, null);

        TabHost.TabSpec tabSpec4 = host.newTabSpec("tab4");
        tabSpec4.setIndicator("4");
        host.addTab(tabSpec4, Fragment4.class, null);

        host.getTabWidget().getChildAt(0)
                .setBackgroundColor(Color.parseColor("#3C989E"));
        host.getTabWidget().getChildAt(1)
                .setBackgroundColor(Color.parseColor("#5DB5A4"));
        host.getTabWidget().getChildAt(2)
                .setBackgroundColor(Color.parseColor("#F4CDA5"));
        host.getTabWidget().getChildAt(3)
                .setBackgroundColor(Color.parseColor("#F57A82"));

        host.setCurrentTab(0);
        TextView temp = (TextView) host.getTabWidget().getChildAt(0).findViewById(android.R.id.title);
        temp.setTextColor(Color.parseColor("#000000"));

        host.setOnTabChangedListener(new TabHost.OnTabChangeListener() {
            @Override
            public void onTabChanged(String tabId) { // 탭 변경시 리스너
                for (int i = 0; i < host.getTabWidget().getChildCount(); i++) {
                    TextView tv = (TextView) host.getTabWidget().getChildAt(i).findViewById(android.R.id.title); // 탭에 있는 TextView 지정후
                    if (i == host.getCurrentTab())
                        tv.setTextColor(Color.parseColor("#000000")); // 탭이 선택되어 있으면 FontColor를 검정색으로
                    else
                        tv.setTextColor(Color.parseColor("#ffffff")); // 선택되지 않은 탭은 하얀색으로.
                }
            }
        });
    }
}

이와같이 구현하면 된다. 코드자체는 쉽다. 이렇게 각각의 Fragment를 연결해준 후에 각각의 Fragment에서 코드를 작성하면 된다.

Fragment 기본 코드는 다음과 같다.

public class Fragment1 extends Fragment {


    public Fragment1() {
        // Required empty public constructor
    }


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

}

여기서 주의할 점은 메인 엑티비티에서 Fragment를 사용해야 하므로 FragmentActivity를 상속받아야 한다는 것이다.