탭(Tab) 쉽게 만들어 보자

탭(Tab) 쉽게 만들어 보자

구성을 설명하자면 뼈대가 되는 Activity 위에 Fragment로 화면을 변경해 주는 것이다.

프로젝트를 생성한다. Blank Activity로 생성!

1. gradle의 dependencies에 코드를 추가한다.

dependencies {
    compile fileTree(include: ['*.jar'], dir: 'libs')
    compile 'com.android.support:appcompat-v7:23.4.0'
    compile 'com.android.support:support-v4:23.4.0'
    testCompile 'junit:junit:4.12'
    compile 'com.android.support:design:25.2.0'
}

2. TabFragment1, TabFragment2, TabFragment3와 BlankFragment 의 이름으로 Fragment 4개를 생성한다. 

TabFragment1, TabFragment2, TabFragment3는 화면 전환이 되면 알아 볼 수 있도록 TextView 등을 추가한다.

BlankFragment에는 빈 화면이 되도록 구성한다. 

3. MainActivity에 다음과 같이 작성한다. 

public class MainActivity extends AppCompatActivity {

    private TabLayout tabLayout;

    private android.support.v4.app.Fragment fragment;
    private android.support.v4.app.FragmentManager fragmentManager;

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

        // Tab
        fragmentManager = getSupportFragmentManager();

        // Adding Toolbar to the activity
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        // Initializing the TabLayout
        tabLayout = (TabLayout) findViewById(R.id.tabLayout);
        tabLayout.addTab(tabLayout.newTab().setText("First"));
        tabLayout.addTab(tabLayout.newTab().setText("Second"));
        tabLayout.addTab(tabLayout.newTab().setText("Third"));
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);


        fragment = new TabFragment1();
        fragmentManager.beginTransaction().replace(R.id.content_main, fragment).commit();

        // Set TabSelectedListener
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                switch (tab.getPosition()) {
                    case 0:
                        fragment = new TabFragment1();
                        fragmentManager.beginTransaction().replace(R.id.content_main, fragment).commit();
                        break;
                    case 1:
                        fragment = new TabFragment2();
                        fragmentManager.beginTransaction().replace(R.id.content_main, fragment).commit();
                        break;
                    case 2:
                        fragment = new TabFragment3();
                        fragmentManager.beginTransaction().replace(R.id.content_main, fragment).commit();
                        break;
                    default:
                        fragment = new TabFragment1();
                        fragmentManager.beginTransaction().replace(R.id.content_main, fragment).commit();
                }

            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }
}

4. layout의 activity_main.xml을 다음과 같이 작성한다. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.sauce.mytablayout.MainActivity">

    <!--Custom Toolbar-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?attr/colorPrimary"
        android:minHeight="?attr/actionBarSize"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    <fragment
        android:id="@+id/content_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:name="com.sauce.mytablayout.BlankFragment" />

</LinearLayout>