ViewPager와 TabLayout을 함께 사용하는 방법은?

Q1: ViewPager와 TabLayout을 함께 사용하는 기본적인 방법은 무엇인가요?
A1: Android에서 ViewPager와 TabLayout을 함께 사용하려면, ViewPager에 FragmentPagerAdapter 또는 FragmentStatePagerAdapter를 설정하고, TabLayout과 ViewPager를 `setupWithViewPager(viewPager)` 메서드로 연결합니다. 이렇게 하면 탭을 클릭할 때 페이지가 전환되고, 페이지를 스와이프할 때 탭도 자동으로 변경됩니다.

---

Q2: ViewPager 대신 ViewPager2를 사용할 경우, TabLayout과 어떻게 연동하나요?
A2: ViewPager2를 사용하는 경우, TabLayoutMediator 클래스를 사용해 TabLayout과 ViewPager2를 연결합니다. 예를 들어:

```java
TabLayoutMediator mediator = new TabLayoutMediator(tabLayout, viewPager2,
(tab, position) -> {
tab.setText("Tab " + (position + 1));
});
mediator.attach();
```

이렇게 하면 TabLayout과 ViewPager2가 동기화됩니다.

---

Q3: FragmentPagerAdapter와 FragmentStatePagerAdapter의 차이는 무엇이며, 어느 것을 사용하는 것이 좋은가요?
A3:
- `FragmentPagerAdapter`: 페이지 수가 적고 고정되어 있을 때 사용합니다. 프래그먼트를 메모리에 계속 유지합니다.
- `FragmentStatePagerAdapter`: 페이지 수가 많거나 동적으로 바뀔 때 적합하며, 프래그먼트를 메모리에서 제거하고 상태만 저장합니다.
일반적으로 메모리 효율을 위해 FragmentStatePagerAdapter를 권장합니다.

---

Q4: 탭의 제목(Text) 설정은 어떻게 하나요?
A4: 내 ViewPager 어댑터 클래스에서 `getPageTitle(int position)` 메서드를 오버라이드하여 각 탭에 표시할 제목(String)을 반환하면 됩니다. 예를 들어:

```java
@Override
public CharSequence getPageTitle(int position) {
return tabTitles[position];
}
```

TabLayout과 연동 시 자동으로 탭에 제목이 표시됩니다.

---

Q5: 커스텀 탭 뷰(Custom Tab View)를 사용하려면 어떻게 해야 하나요?
A5:
1. `TabLayout.Tab` 객체별로 `setCustomView(view)`를 호출하여 직접 만든 레이아웃을 적용합니다.
2. 또는 `TabLayoutMediator` 의 탭 구성 람다 내에서 `tab.setCustomView()`를 호출합니다.
예:

```java
tab.setCustomView(R.layout.custom_tab_layout);
```

이후 필요에 따라 뷰 요소를 변경할 수 있습니다.
---

Q6: ViewPager와 TabLayout을 사용할 때 주의할 점은 무엇인가요?
A6:
- ViewPager 어댑터가 `getCount()`에서 반환하는 페이지 수와 TabLayout 탭 수가 일치해야 합니다.
- `setupWithViewPager`를 호출하기 전까지 ViewPager 어댑터를 반드시 설정해야 합니다.
- 뷰 페이저의 페이지 변경 이벤트와 탭 선택 이벤트가 자동으로 연동되므로, 별도의 리스너 중복 등록에 주의하세요.

---

Q7: XML에서 TabLayout과 ViewPager를 배치하는 기본 예시는?
A7:

```xml
android:id="@+id/tabLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />

android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
```

TabLayout을 화면 상단에 배치하고, ViewPager가 나머지 공간을 차지하도록 설정하는 것이 일반적입니다.

---

Q8: TabLayout과 ViewPager 연동 시, 페이지 상태 저장 및 복원은 어떻게 관리해야 하나요?
A8: FragmentPagerAdapter 또는 FragmentStatePagerAdapter는 프래그먼트 상태를 자동으로 관리합니다. 다만 액티비티나 프래그먼트가 재생성될 때 어댑터가 동일한 FragmentManager와 태그로 초기화되어야 상태가 제대로 복원됩니다. 일반적으로 별도의 추가 처리가 필요 없습니다.

---

Q9: Kotlin과 함께 ViewPager2, TabLayout을 사용하는 예시는?
A9:

```kotlin
val tabLayout: TabLayout = findViewById(R.id.tabLayout)
val viewPager2: ViewPager2 = findViewById(R.id.viewPager2)

viewPager2.adapter = MyFragmentStateAdapter(this)

TabLayoutMediator(tabLayout, viewPager2) { tab, position ->
tab.text = "Tab ${position + 1}"
}.attach()
```

간단히 `TabLayoutMediator` 객체 생성 후 `attach()` 하면 연동됩니다.

---

위 내용을 참고하여 ViewPager와 TabLayout 연동을 구현하면 쉽게 탭과 페이지 스와이프 기능을 완성할 수 있습니다.

ViewPager의 Adapter는 어떻게 구현하나요?

ViewPager의 setOffscreenPageLimit 메서드는 무엇을 하나요?

안드로이드에서 `ViewPager`와 `TabLayout`를 함께 사용하는 방법은 상대적으로 간단합니다.

이 두 컴포넌트를 조합하면 사용자에게 여러 페이지를 쉽게 전환할 수 있는 인터페이스를 제공할 수 있습니다.

아래에서는 단계별로 이들을 설정하는 방법을 설명합니다.

1. Gradle 의존성 추가 먼저 `build.gradle` 파일에 필요한 의존성을 추가해야 합니다.

최신 AndroidX 라이브러리를 사용하는 것이 좋습니다.

```groovy dependencies { implementation 'androidx.viewpager2:viewpager2:1.0.0' implementation 'com.google.android.material:material:1.5.0' } ```

2. 레이아웃 파일 만들기 `activity_main.xml` 파일을 생성하거나 수정하여 `TabLayout`과 `ViewPager`를 추가합니다.

```xml ```

3. Fragment 만들기 각각의 탭에 해당되는 Fragment를 만들어야 합니다.

예를 들어, 세 개의 탭이 있다고 가정할 경우 다음과 같이 Fragment 클래스를 만들 수 있습니다.

```kotlin class TabFragment : Fragment() { private lateinit var tabView: View override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View? { tabView = inflater.inflate(R.layout.fragment_tab, container, false) // Fragment의 초기화 코드 return tabView } } ``` 이 Fragment는 탭의 콘텐츠를 담고 있습니다.

필요에 따라 여러 Fragment를 작성할 수 있습니다.



4. 어댑터 만들기 `ViewPager`에 사용할 어댑터를 만들어야 합니다.

이를 위해 `FragmentStateAdapter`를 상속받은 클래스를 생성합니다.

```kotlin class ViewPagerAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) { private val fragmentList = listOf( TabFragment1(), TabFragment2(), TabFragment3() ) override fun getItemCount(): Int = fragmentList.size override fun createFragment(position: Int): Fragment = fragmentList[position] } ``` 여기서 `TabFragment1`, `TabFragment2`, `TabFragment3`는 각각의 탭에 해당하는 Fragment의 클래스 이름입니다.



5. MainActivity에서 설정하기 이제 `MainActivity`에서 `TabLayout`과 `ViewPager`를 연결하겠습니다.

```kotlin class MainActivity : AppCompatActivity() { private lateinit var viewPager: ViewPager2 private lateinit var tabLayout: TabLayout override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) viewPager = findViewById(R.id.view_pager) tabLayout = findViewById(R.id.tab_layout) val adapter = ViewPagerAdapter(this) viewPager.adapter = adapter TabLayoutMediator(tabLayout, viewPager) { tab, position -> when (position) { 0 -> tab.text = "탭 1" 1 -> tab.text = "탭 2" 2 -> tab.text = "탭 3" } }.attach() } } ```

6. 결과 확인하기 이제 앱을 실행하면 `TabLayout`과 연결된 `ViewPager`를 통해 각 탭을 선택할 수 있으며, 각각의 탭에 해당하는 Fragment가 보여질 것입니다.

이러한 기본적인 설정을 통해 `ViewPager`와 `TabLayout`을 함께 활용할 수 있습니다.

각 탭 및 Fragment의 내용을 자유롭게 수정하여 더욱 풍부한 사용 경험을 제공할 수 있습니다.