MyCloud

[안드로이드] TabLayout과 ViewPager 만들기 본문

Programming/Android

[안드로이드] TabLayout과 ViewPager 만들기

Swallow Swalloow 2016.06.26 04:28



TabLayout 과 ViewPager


TabLayout은 안드로이드 서포트 디자인 라이브러리에 있는 클래스입니다.

이전에는 탭에 대한 애니메이션, 변화, 디자인을 직접 구현했다면 

이제 TabLayout 내에 있는 속성만으로 쉽게 컨트롤 할 수 있습니다.

자주 사용하는 xml 속성은 다음과 같습니다.




 XML Attributes

 Description 

 design:tabGravity

 탭의 정렬 방식을 선택

 fill : 너비를 모두 같게 표시

 center : 가운데 정렬하여 표시

 design:tabMode

 탭의 표시 방식을 선택

 Fixed : 모든 탭을 한번에 표시

 Scrollable : 일부 탭만 표시, 나머지 스크롤

 design:tabIndicatorColor

 현재 선택된 탭에 대한 색 지정

 design:tabTextColor

 탭에 적용할 기본 텍스트 색 지정

 design:tabSelectedTextColor

 현재 선택된 탭의 텍스트 색 지정








ViewPager는 탭에서 보여주는 화면에 해당합니다.

TabLayout과 연결된 리스너를 설정하여 동기화 시킬 수 있습니다.

그리고 ViewPager 역시 Adapter가 필요합니다. (v4.app.FragmentStatePagerAdapter)

TabLayout과 ViewPager에서 추가하게 되는 리스너는 크게 2가지 기능을 합니다.

첫번째는 탭을 선택했을 때 호출되는 리스너이며, 두번째는 뷰 페이저에서 스크롤 했을 때 호출되는 리스너입니다.




 Listener

 Description 

 TabLayout.onTabSelectedListener

 탭의 선택 상태가 변경될 때 호출되는 리스너

 addOnTabSelectedListener를 통해 설정

 setOnTabSelectedListener는 deprecated

 TabLayout.onPageChangeListener

 ViewPager에서 페이지의 상태가 변경될 때 

 페이지 변경 이벤트를 TabLayout에 전달하여  탭의 선택 상태를 동기화해주는 역할

 addOnPageChangeListener를 통해 설정



 






TabLayout 구현방법


1.

먼저 탭 레이아웃을 사용하기 위해 gradle에 dependency를 추가해줍니다.

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


2.

그리고 style.xml 에서 액션바를 제거한 다음, 탭으로 사용할 Fragment를 생성합니다.

3개의 탭을 만들기 위해 아래와 같은 코드를 다른 탭에도 생성해줍니다.

public class TabFragment1 extends Fragment {

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
return inflater.inflate(R.layout.tab_fragment_1, container, false);
}
}


3.

tab_fragment_1.xml 을 생성하여 화면을 구분하기 위해 TextView를 임시로 넣겠습니다.

위와 마찬가지로 다른 2개의 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"
android:orientation="vertical">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="This is Tab 1"
android:textAppearance="?android:attr/textAppearanceLarge"/>

</RelativeLayout>


4.

다음으로 FragmentStatePagerAdapter를 상속받는 TabPagerAdapter를 생성해줍니다.

탭이 변할때마다 position을 받아 Fragment를 전환해주는 역할을 합니다.

public class TabPagerAdapter extends FragmentStatePagerAdapter {

// Count number of tabs
private int tabCount;

public TabPagerAdapter(FragmentManager fm, int tabCount) {
super(fm);
this.tabCount = tabCount;
}

@Override
public Fragment getItem(int position) {

// Returning the current tabs
switch (position) {
case 0:
TabFragment1 tabFragment1 = new TabFragment1();
return tabFragment1;
case 1:
TabFragment2 tabFragment2 = new TabFragment2();
return tabFragment2;
case 2:
TabFragment3 tabFragment3 = new TabFragment3();
return tabFragment3;
default:
return null;
}
}

@Override
public int getCount() {
return tabCount;
}
}


5.

마지막으로 MainActivity에서 Toolbar, TabLayout, ViewPager를 생성하고 설정시켜야 합니다.

그리고 ViewPager와 TabLayout에 각 리스너를 달아줍니다.

public class MainActivity extends AppCompatActivity {

private TabLayout tabLayout;
private ViewPager viewPager;

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

// 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("Tab One"));
tabLayout.addTab(tabLayout.newTab().setText("Tab Two"));
tabLayout.addTab(tabLayout.newTab().setText("Tab Three"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);

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

// Creating TabPagerAdapter adapter
TabPagerAdapter pagerAdapter = new TabPagerAdapter(getSupportFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(pagerAdapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

// Set TabSelectedListener
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {

@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
}

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

}

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

}
});

}
}


전체 코드는 다음 깃헙 링크에 공개되어 있습니다.

https://github.com/Swalloow/AndroidStudy/tree/master/MyTabLayout





37 Comments
댓글쓰기 폼