안드로이드 TabLayout + ViewPager 탭 레이아웃 + 뷰페이저 만들기

안녕하세요 알통몬입니다. 공감 및 댓글은 포스팅 하는데 아주아주 큰 힘이 됩니다!! 포스팅 내용이 찾아주신 분들께 도움이 되길 바라며 더 깔끔하고 좋은 포스팅을 만들어 나가겠습니다^^

이번 포스팅에서는 TabLayout + ViewPager를 사용해 좌 우로 슬라이딩이 돼는

액티비티를 만들어 보겠습니다.

먼저 Build.Gradle(app)에

dependencies {} 안에

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

를 선언해줍니다.

이제 아래 사진처럼 파일을 가지고 있으면 되는데요.

fragment1.xml과 fragment2.xml은 뷰 페이저 안에 들어갈 프래그먼트들이므로

원하시는대로 디자인을 하시면 됩니다.

activity_main.xml

============================================================

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/activity_main"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:paddingBottom="@dimen/activity_vertical_margin"

    android:paddingLeft="@dimen/activity_horizontal_margin"

    android:paddingRight="@dimen/activity_horizontal_margin"

    android:paddingTop="@dimen/activity_vertical_margin">

    <android.support.design.widget.TabLayout

        android:id="@+id/sliding_tabs"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="#ffffff"

        app:tabGravity="fill"

        app:tabIndicatorColor="@color/colorPrimary" // 선택된 탭 색

        app:tabMode="fixed" // 각 탭들의 크기 비율

        app:tabSelectedTextColor="@color/colorPrimary" // 선택된 탭의 글씨색

        app:tabTextColor="#c9c9c9"> // 선택되지 않은 기본 탭의 글씨 색

        

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

<android.support.v4.view.ViewPager

            android:id="@+id/viewPager"

            android:layout_width="match_parent"

            android:layout_height="match_parent"

            android:gravity="center">

        </android.support.v4.view.ViewPager>

</RelativeLayout>

============================================================

MainActivity.java

============================================================

package pager.view.tap.tablayouts;

import android.os.Bundle;

import android.support.design.widget.TabLayout;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    TabLayout sliding_tab;

    ViewPager pager;

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        sliding_tab = (TabLayout) findViewById(R.id.sliding_tabs);

        pager = (ViewPager) findViewById(R.id.viewPager);

        pager.setAdapter(new FragmentAdpater(getSupportFragmentManager()));

        pager.setOffscreenPageLimit(2); // 안보이는 페이지 로딩해 놓을 갯수

        sliding_tab.addTab(sliding_tab.newTab().setText("tab1"), 0, true); // 페이지 등록

        sliding_tab.addTab(sliding_tab.newTab().setText("tab2"), 1);

        sliding_tab.addOnTabSelectedListener(pagerListener);

        pager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(sliding_tab));

    }

    TabLayout.OnTabSelectedListener pagerListener = new TabLayout.OnTabSelectedListener() {

        @Override

        public void onTabSelected(TabLayout.Tab tab) {

            pager.setCurrentItem(tab.getPosition());

            // 슬라이딩이 아니라 위에 페이지를 선택했을 때도 페이지 이동 가능하게.

        }

        @Override

        public void onTabUnselected(TabLayout.Tab tab) { }

        @Override

        public void onTabReselected(TabLayout.Tab tab) { }

    };

}

============================================================

FragmentAdapter.java

============================================================

package pager.view.tap.tablayouts;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentStatePagerAdapter;

public class FragmentAdpater extends FragmentStatePagerAdapter {

    public FragmentAdpater(FragmentManager fm) {

        super(fm);

    }

    @Override

    public Fragment getItem(int position) {

        switch (position) {

            case 0 : // 여기 서의 숫자와 MainActivity.java에서 addTab에서

                         탭 번호가 매칭이되느 겁니다.

                return new Fragment1();

            case 1 :

                return new Fragment2();

        }

        return null;

    }

    @Override

    public int getCount() {

        return 2; // 원하는 페이지 수

    }

}

============================================================

Fragment2.java // 프래그먼트들도 원하는대로 기능을 구현하면 됩니다.

============================================================

public class Fragment2 extends Fragment {

    @Override

    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {

        View view = inflater.inflate(R.layout.fragment2, container, false);

        // 원하느 코드 작성

        return  view;

    }

}

============================================================

이렇게 구현을 하면 결과적으로 아래 사진처럼 구현이 됩니다.

아래 사진은 구글에서 가져온 이미지에요 ㅎㅎ

이상입니다.

다음 포스팅에서는 Fragment에서 Dialog 띄우는 방법인 DialogFragment에 대해 공부하겠습니다~