[Android] Tab Navigation 구현하기
다음과 같이 클릭이나 스와이프를 통해 좌우 화면으로 이동할 수 있는 TabLayout을 구현해 보겠습니다.
1. Project 생성
2. Tab Layout 설정
TabLayout을 적용하기 위해서 Gradle > build.gradle(Module: app) 을 클릭하고 dependencise 부분에 다음과 같은 implementation 구문을 추가합니다.
implementation 'com.google.android.material:material:1.0.0'
이번 프로젝트에서는 TabLayout과 함께 Toolbar를 사용하는데 Toolbar를 사용하기 위해서는 value > style.xml을 클릭하고 다음과 같은 구문을 추가해줍니다.
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
3. 설정한 TabLayout과 Toolbar를 mainActivity에 추가
mainActivity 화면을 설정하는 activity_main.xml을 더블 클릭하고 다음과 같은 소스를 추가해줍니다.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="16dp"
tools:context=".MainActivity">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
/>
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/toolbar"
android:background="?attr/colorPrimary"
android:minHeight="?attr/actionBarSize"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
/>
<androidx.viewpager.widget.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="fill_parent"
android:layout_below="@id/tab_layout"
/>
</RelativeLayout>
4. Fragment 추가
tap 화면 마다 나타나는 화면은 "Fragment"를 사용해서 나타낼 수 있습니다.
Fragment를 추가하기 위해 MainActivity가 있는 폴더에서 오른쪽 마우스를 클릭하고
File > New > Fragment > Fragment(Blank)를 선택하고 Name은 "TabFragment1" 지정
Fragment Layout Name은 "tab_fragment1"으로 지정
아래 체크박스 두개는 해제해줍니다.
Tab이 세개 있는 화면을 만들 예정이라 같은 패턴으로 Fragement를 두개 더 만들어줍니다.
(ex. TabFragement2 - tab_fragment2 )
5. FragmentLayout 수정
생성한 Fragment를 간단하게 수정해보겠습니다.
res > layout > tab_fragment를 더블 클릭하고 다음과 같이 수정합니다.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".TabFragment">
<!-- TODO: Update blank fragment layout -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Fragment1"
android:textAppearance="?android:attr/textAppearanceLarge"/>
</RelativeLayout>
나머지 Fragment도 위의 소스처럼 수정합니다. android:text 부분만 다르게 설정 ( ex. tab_fragment2.xml - "Fragment2" )
6. PagerAdapter 추가
위에서 추가한 Fragment를 Activity에 각각 보여주려면 "PagerAdapter"를 추가해야 합니다.(adapter-layout manager)
MainActivity가 있는 폴더를 우클릭
File > New > Java Class 클릭
Superclass는 FragmentStatePagerAdapter 입력
생성하면 다음과 같이 빨간줄이 나타나는데 Alt + Enter를 눌려서 해결
그리고 소스를 다음과 같이 수정합니다.
package android.example.tablayout;
import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentStatePagerAdapter;
public class PagerAdapter extends FragmentStatePagerAdapter {
int mNumOfTabs;
public PagerAdapter(@NonNull FragmentManager fm, int NumOfTabs) {
super(fm, NumOfTabs);
this.mNumOfTabs = NumOfTabs;
}
@NonNull
@Override
public Fragment getItem(int position) {
switch (position){
case 0: return new TabFragment();
case 1: return new TabFragment2();
case 2: return new TabFragment3();
default: return null;
}
}
@Override
public int getCount() {
return mNumOfTabs;
}
}
7. Toolbar와 TabLayout MainActivity에 inflate(생성) 하기
main_activity.xml에 선언했던 Toolbar와 TabLayout을 MainActivity.java에서 선언해줘야합니다.
onCreate() 메소드 하단에 다음과 같이 소스를 수정해줍니다.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
androidx.appcompat.widget.Toolbar toolbar =
findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TabLayout tabLayout = findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Fragment1"));
tabLayout.addTab(tabLayout.newTab().setText("Fragment2"));
tabLayout.addTab(tabLayout.newTab().setText("Fragment3"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
}
8. ViewPager에 PagerAdapter 붙이기
tab 별 화면은 Fragment로 설정되고 각 Fragment는 ViewPager 안에서 보여지며 ViewPager는 PagerAdapter에 의해 manager ( 어떤 화면이 보여져야 하는지) 됩니다.
그래서 ViewPager에 PagerAdapter를 붙이는 과정이 필요합니다.
MainActivity.java의 onCreate() 하단에 다음과 같이 소스를 추가해줍니다.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
androidx.appcompat.widget.Toolbar toolbar =
findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
TabLayout tabLayout = findViewById(R.id.tab_layout);
tabLayout.addTab(tabLayout.newTab().setText("Fragment1"));
tabLayout.addTab(tabLayout.newTab().setText("Fragment2"));
tabLayout.addTab(tabLayout.newTab().setText("Fragment3"));
tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
final ViewPager viewPager = findViewById(R.id.pager);
final PagerAdapter adapter = new PagerAdapter
(getSupportFragmentManager(), tabLayout.getTabCount());
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
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){
}
});
}
9. Run
짜잔 완성입니다 :)
감사합니다!
참고 - Google Codelabs (https://codelabs.developers.google.com/)
이 글을 공유합시다
