[Android] TabLayout 탭 레이아웃 만들기!!(유튜브 탭 레이아웃)

안드로이드 탭 레이아웃을 만드는 방법을 알아보자.

우선 레이아웃부터 정의하면 아래와 같다.

1-1. XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

                <android.support.design.widget.TabLayout
                    android:id="@+id/tabLayout"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    app:tabGravity="fill"
                    app:tabIndicatorColor="@color/colorAccent"
                    app:tabMode="scrollable" />

            </android.support.v7.widget.Toolbar>

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

1-2 의 경우 유튜브의 가로 모드에서 볼 수 있는 탭과 툴바가 한 줄에 위치한 모양으로 아래와 같다.

이처럼 구성하면 가로모드일때 화면을 더욱 효율적으로 사용할 수 있는것 같다.

1-2. XML

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    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">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            app:tabIndicatorColor="@color/colorAccent"
            app:tabGravity="fill"
            app:tabMode="scrollable" />

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

이제 어답터를 만들고

2. TabAdapter

public class MainTabAdapter extends FragmentPagerAdapter {
    private final List<Fragment> mFragments = new ArrayList<>();
    private final List<String> mFragmentTitles = new ArrayList<>();

    public MainTabAdapter(FragmentManager fm) {
        super(fm);
    }

    public void initFragment(Context mContext) {
        mFragments.add(new Fragment_1());
        mFragmentTitles.add("1");
        mFragments.add(new Fragment_2());
        mFragmentTitles.add("2");
        mFragments.add(new Fragment_3());
        mFragmentTitles.add("3");
    }

    @Override
    public Fragment getItem(int position) {
        return mFragments.get(position);
    }

    @Override
    public int getCount() {
        return mFragments.size();
    }

    @Override
    public CharSequence getPageTitle(int position) {
        return mFragmentTitles.get(position);
    }
}

적용하면 끝~

3. MainActivity

ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
TabLayout tabLayout = (TabLayout) findViewById(R.id.tabLayout); 
MainTabAdapter mainTabAdapter = new MainTabAdapter(getFragmentManager());
viewPager.setAdapter(mainTabAdapter);

tabLayout.setupWithViewPager(viewPager);