안드로이드 탭레이아웃 (Tab Layout) 프래그먼트 구현하기

 계발에서 개발까지 

 

스와이프 기능이 있는 탭레이아웃(TabLayout) 프래그먼트 구현하기

탭레이아웃을 이용하여 스와이프 기능이 있는 프래그먼트를 한번 구현해보겠습니다. 텝이아웃도 UI를 구성하는데 있어서 자주 사용하기 때문에 알아두면 유용하게 사용이 가능합니다. 어뎁터를 사용해서 구현하며 어렵지 않습니다.

 

build.gradle(app)

시작전에 구글머티리얼 디자인의 탭레이아웃을 사용하기 위해서 밑에 코드를 추가하고 오른쪽 상단의 Sync Now을 눌러주시길 바랍니다.

dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test.ext:junit:1.1.2'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.3.0'


	 //추가
    implementation 'com.google.android.material:material:1.2.1'

}

 

activity_main.xml

일단 activity_main에 구현해주겠습니다. 일단 TabLayout와 ViewPager를 이용해서 Fragment를 전환할꺼기 때문에 이 두개를 작성해주시면 됩니다. 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">



    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="?actionBarSize"
        app:tabIndicatorColor="#000000"
        app:tabSelectedTextColor="#000000"
        app:tabTextColor="#3F51B5" />

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

app:tabIndicatorColor  //탭 레이아웃 스와이프시 밑에 움직이는 바 의 색상
app:tabSelectedTextColor // 탭 선택시 탭의 텍스트 색상
app:tabTextColor="#3F51B5" //디폴트 텍스트 색상

 

이렇게 구현하면 activity_main의 구성은 끝났습니다. 그리고 저는 탭을 2개를 사용하기 때문에 Fragment 2개의 레이아웃을 구현해주겠습니다. 

 

fragment1.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:background="#321321"
    android:layout_height="match_parent"
    android:orientation="vertical">

</LinearLayout>

 

fragment2.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:background="#123123"
    android:orientation="vertical">

</LinearLayout>

그냥 이렇게 대충? 구현해주겠습니다. 실제 UI를 구성해주시면 됩니다.  이제 MainActivity와 Fragment를 구성해주겠습니다.

 

MainActivity.java

public class MainActivity extends AppCompatActivity {

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


        ViewPager pager = findViewById(R.id.pager);
        TabLayout tabLayout = findViewById(R.id.tab_layout);


        pager.setOffscreenPageLimit(2); //현재 페이지의 양쪽에 보유해야하는 페이지 수를 설정 (상황에 맞게 사용하시면 됩니다.)
        tabLayout.setupWithViewPager(pager); //텝레이아웃과 뷰페이저를 연결
        pager.setAdapter(new PageAdapter(getSupportFragmentManager(),this)); //뷰페이저 어뎁터 설정 연결


    }
    static class PageAdapter extends FragmentStatePagerAdapter { //뷰 페이저 어뎁터 


        PageAdapter(FragmentManager fm, Context context) {
            super(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);

        }


        @NonNull
        @Override
        public Fragment getItem(int position) {
            if (position == 0) { //프래그먼트 사용 포지션 설정 0 이 첫탭
                return new TabFragment1();
            } else {
                return new TabFragment2();
            }

        }


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

        @Nullable
        @Override
        public CharSequence getPageTitle(int position) {
            if (position == 0) { //텝 레이아웃의 타이틀 설정
                return "Tab_1";
            } else {
                return "Tab_2";
            }
        }
    }

}

필요할거같은 주석은 달아놨는데 혹시 여기서 응용하거나 추가하고싶은 조건이 있을 경우 댓글을 남겨주세요. 

(알면 답해드리겠습니다 ㅎㅎㅎ;;)

이제 Fragment 두개를 작성해보겠습니다.

 

TabFragment1.java

public class TabFragment1 extends Fragment {

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

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }
}

 

TabFragment2.java

public class TabFragment2 extends Fragment {


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

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }
}

자 이렇게 하면 스와이프 기능이 있는 탭레이웃을 구현이 끝났습니다. 이제 입맛에 맞게 사용하시면 됩니다.

그 외의 프래그먼트를 이용한 화면전환의 예제가 제 블로그에 많습니다.

 

수고하셨습니다 ★

더 많은 정보

↓↓↓

 https://deumdroid.tistory.com/