[Android] 안드로이드 TabLayout + Fragment ( feat.Adapter )

👼🏻 초보 안드로이드 개발자가 매번 구글링하기 싫어서 정리하는 블로그 👼🏻 

 

안녕하세요! 🙋🏻‍♀️

 

2022.01.04 - [Android/개발] - [Android] 안드로이드 BottomSheet ( feat.Fragment )

[Android] 안드로이드 BottomSheet ( feat.Fragment )

 

BottomSheet 에서 아주 살짝 다루어본 Fragment를 오늘 제대로! 한번 적용해서 써보겠습니다! 😆

 

 

 

보시는거와 같이

TabLayout 과 Fragment  두가지 기능을 사용해서 만들어볼거에요 😙

 

앱을 사용하다보면 저렇게 생긴 디자인들 많죠

저도 취준생 프로젝트 진행할때 저 기능을 사용해서 만들었던게 기억나네요!!!

 

자 바로바로 시작을 해보겠습니다!

 

 

뷰를 그리기 앞서

오늘 사용할

ViewPager2

라는 위젯에 프래그먼트를 너어 사용할건데,

이 위젯은 종속성을 추가해줘야합니다!

 

build.gradle(Module:app)

dependencies {

    ....
    implementation "androidx.viewpager2:viewpager2:1.0.0"
}

저 한줄만 추가해주고,

Sync Now 를 클릭하여 싱크해줍니다!

 

자 이제 준비물은 끝!

 

뷰를 그리러 갑니다 😝

 

activity_main.xml

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

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            />


        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            />
</LinearLayout>

 

아주 간단하죠?

 

이제 각 탭별 보여질 Fragment 를 생성해줍니다!

( "더보기" ⬅️ Fragment 생성 방법이 모른다면 눌러주세요 )

Fragment 생성 방법은

 

생성해 줍니다!!!!!!

이렇게 해야지 layout.xml 까지 함께 생성됩니다.

 

그 다음 Fragment 를 가보면

 



뭔가 엄청나게 적혀있는데 이 부분중,

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    return inflater.inflate(R.layout.fragment_ex_fragmenet, container, false);
}

 

" onCreateView " 만 빼고 지워줍니다.

---

( 🎶 각 Fragment 뷰에는 각자 본인이 하고싶은거 해보세용 )

 

 

반응형

 

 

자 이제 그러면 

MainActivity 넘어가기 앞서!

 

Adapter를 준비해줘야합니다!

 

TabPagerAdapter

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentActivity;
import androidx.viewpager2.adapter.FragmentStateAdapter;

public class TabPagerAdapter extends FragmentStateAdapter {

    Fragment[] fragments = new Fragment[] { new FirstFragment(), new SecondFragment(), new ThirdFragment() };

    public TabPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragments[position];
    }

    @Override
    public int getItemCount() {
        return fragments.length;
    }



}

 

원래 저희가 기존에 사용하던 Adapter 의 방법은 " BaseAdapter " 를 상속받아 사용했습니다!

하지만 ViewPager2 는  " FragmentStateAdapter " 를 상속받아 사용합니다!!!!

 

이제 정말 MainActivity 로 넘어가봅시다!

 

 

SMALL

 

 

MainActivity

import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;


public class MainActivity extends AppCompatActivity {

    // 전역변수
    TabLayout tabLayout;
    ViewPager2 viewPager;
    TabPagerAdapter adapter;

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

        // xml 연결
        tabLayout = findViewById(R.id.tab_layout);
        viewPager = findViewById(R.id.pager);

        // adapter 준비 및 연결
        adapter = new TabPagerAdapter(this);
        viewPager.setAdapter(adapter);

        // TabLayout, ViewPager 연결
        new TabLayoutMediator(tabLayout, viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                switch (position) {
                    case 0:
                        tab.setIcon(android.R.drawable.btn_star_big_off);
                        break;
                    case 1:
                        tab.setIcon(android.R.drawable.ic_menu_delete);
                        break;
                    default:
                        tab.setIcon(android.R.drawable.ic_lock_idle_lock);
                        break;
                }
            }
        }).attach();

    }
}

 

여기서 조심해야할것이

무조건!!!! TabLayoutMediator 선언하기전에 adapter 가 준비 되고, 세팅이 되어야합니다!!!!

안그러면 .attach() 이 부분에서 오류가 나요!!!!!!!!!

 

이로써 끝인데요!

만약만약 나는 아이콘이아니라 글씨를 지정하고싶다!

하는 분들은,

import androidx.viewpager2.widget.ViewPager2;

import android.os.Bundle;
import android.widget.TextView;

import com.google.android.material.tabs.TabLayout;
import com.google.android.material.tabs.TabLayoutMediator;


public class MainActivity extends AppCompatActivity {

    // 전역변수
    ...
    String[] str = new String[] { "첫번째", "두번째", "세번째"};

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

        ...

        // TabLayout, ViewPager 연결
        new TabLayoutMediator(tabLayout, viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                TextView textView = new TextView(MainActivity.this);
                textView.setText(str[position]);
                tab.setCustomView(textView);
            }
        }).attach();

    }
}

 

이런 방식으로 해주어도 됩니다!!

 

그럼 오늘은 끝!!!!!!!!!!

 

봐주셔서 감사합니다 🥰