탭 (Tab)

1. 실행 결과 화면

    

2. values/styles.xml

parent 정보를 NoActionBar로 변경하여 기존 액션바를 지운다.

<resources>
 
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
 
</resources>
 

3. build.gradle (app)

dependency에 com.android.support:design 추가

compile 'com.android.support:design:26.1.0'

4. acitivity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
 
    <!-- 상단의 액션바 부분과 가운데 내용이 보이는 부분이 함께 들어가면 겹쳐서 보이는 현상이 생긴다.
    CoordinatorLayout 을 사용하면 이를 해결하고 두 부분의 크기가 잘 맞게 보이게 한다. -->
    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
 
        <!-- 액션바 영역 -->
        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
 
            <!-- 액션바 타이틀 및 메뉴 아이콘 영역 -->
            <!-- elevation: 앞으로 튀어나와 보이는 효과 -->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/colorPrimaryDark"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                android:elevation="1dp">
            </android.support.v7.widget.Toolbar>
 
            <!-- 탭 영역 -->
            <!-- tabMode: 탭을 고정
                 tabGravity: 탭 버튼을 꽉 채워서 추가 -->
            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:elevation="1dp"
                android:background="@android:color/background_light"
                app:tabMode="fixed"
                app:tabGravity="fill"
                app:tabTextColor="@color/colorPrimary"
                app:tabSelectedTextColor="@color/colorAccent">
            </android.support.design.widget.TabLayout>
 
        </android.support.design.widget.AppBarLayout>
 
        <!-- 화면 영역-->
        <!-- layout_behavior: 액션바와 프레임 레이아웃 간의 위치를 잡아 준다. -->
        <FrameLayout
            android:id="@+id/frame_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
 
    </android.support.design.widget.CoordinatorLayout>
</RelativeLayout>
 

5. tab_fragment1.xml

tab_fragment2.xml, tab_fragment3.xml 동일

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@android:color/holo_blue_light"
    android:gravity="center">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="첫 번째 화면"
        android:textAlignment="center"
        android:textSize="30sp"
        android:textColor="@android:color/white"/>
</LinearLayout>
 

6. TabFragment1.java

TabFragment2.java, TabFragment3.java 동일

package com.tistory.qlyh8.pracitice;
 
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
 
public class TabFragment1 extends Fragment{
 
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        ViewGroup rootView = (ViewGroup) getLayoutInflater().inflate(R.layout.tab_fragment1, container, false);
        return rootView;
    }
}
 

7. MainActivity.java

package com.tistory.qlyh8.pracitice;
 
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
 
public class MainActivity extends AppCompatActivity  {
 
    TabFragment1 tabFragment1;
    TabFragment2 tabFragment2;
    TabFragment3 tabFragment3;
    Toolbar toolbar;
    TabLayout tabLayout;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // 액션바 설정
        toolbar =  findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
 
        tabFragment1 = new TabFragment1();
        tabFragment2 = new TabFragment2();
        tabFragment3 = new TabFragment3();
 
        // 기본 화면으로 TabFragment1 화면 설정
        getSupportFragmentManager().beginTransaction().add(R.id.frame_layout, tabFragment1).commit();
 
        // 탭 설정
        tabLayout = findViewById(R.id.tab_layout);
        tabLayout.addTab(tabLayout.newTab().setText("탭 1"));
        tabLayout.addTab(tabLayout.newTab().setText("탭 2"));
        tabLayout.addTab(tabLayout.newTab().setText("탭 3"));
 
        // 탭 별 화면 설정
        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                Fragment selectedFragment = null;
 
                switch (tab.getPosition()) {
                    case 0:
                        selectedFragment = tabFragment1;
                        break;
                    case 1:
                        selectedFragment = tabFragment2;
                        break;
                    case 2:
                        selectedFragment = tabFragment3;
                        break;
                    default:
                        break;
                }
 
                getSupportFragmentManager().beginTransaction().replace(R.id.frame_layout, selectedFragment).commit();
            }
 
            @Override
            public void onTabUnselected(TabLayout.Tab tab) {}
 
            @Override
            public void onTabReselected(TabLayout.Tab tab) {}
        });
    }
}

8. 참고

ActionBar Tabs with Fragments: https://github.com/codepath/android_guides/wiki/ActionBar-Tabs-with-Fragments

출처: https://www.edwith.org/boostcourse-android/lecture/17077/