[메이플 캘린더] ViewPager2와 TabLayout으로 하이퍼스탯, 어빌리티 프리셋을 좌우 스와이프로 확인해보자

사용 의도

• 하이퍼 스탯과 어빌리티는 프리셋을 3개 가지고 있는데, 이것을 좌우 스와이프로 확인하도록 하고 버튼을 터치해도 좌우 스와이프 애니메이션이 발생하면서 프리셋을 바꾸도록 구현하고자 하였다.
  • 좌우 스와이프는 ViewPager2를 활용하면 되지만, 이것을 버튼과 어떻게 연계할지를 고민하였는데 TabLayout을 버튼 형식의 스타일로 만들고 TabLayoutMediator로 ViewPager2와 연동하는 것으로 구현할 수 있었다.

 

적용 방법

ViewPager2와 TabLayout을 배치한다.

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/shape_character">

            <com.google.android.material.card.MaterialCardView
                android:id="@+id/mcv_first_hyper_stat"
                android:layout_width="0dp"
                android:layout_height="0dp"
                android:layout_marginTop="@dimen/guideline_small"
                android:layout_marginBottom="@dimen/guideline_small"
                app:cardBackgroundColor="@color/character"
                app:cardCornerRadius="1dp"
                app:layout_constraintBottom_toTopOf="@id/mcv_second_hyper_stat"
                app:layout_constraintEnd_toStartOf="@id/gl_right_hyper_stat"
                app:layout_constraintStart_toEndOf="@id/gl_left_hyper_stat"
                app:layout_constraintTop_toBottomOf="@id/tv_title_hyper_stat"
                app:strokeWidth="0dp">

                <androidx.constraintlayout.widget.ConstraintLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@drawable/shape_character">

                    <androidx.viewpager2.widget.ViewPager2
                        android:id="@+id/vp_hyper_stat"
                        android:layout_width="0dp"
                        android:layout_height="0dp"
                        android:layout_marginBottom="@dimen/guideline_small"
                        android:background="@drawable/shape_default_stat"
                        app:layout_constraintBottom_toTopOf="@id/tl_hyper_stat"
                        app:layout_constraintEnd_toEndOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toTopOf="parent" />

                    <com.google.android.material.tabs.TabLayout
                        android:id="@+id/tl_hyper_stat"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@color/character"
                        app:layout_constraintBottom_toBottomOf="parent"
                        app:layout_constraintStart_toStartOf="parent"
                        app:layout_constraintTop_toBottomOf="@id/vp_hyper_stat"
                        app:tabBackground="@drawable/shape_hyper_stat_tab"
                        app:tabGravity="center"
                        app:tabIndicatorHeight="0dp"
                        app:tabTextAppearance="@style/HyperStatTabLayoutTextSize"
                        app:tabTextColor="@color/white1" />

                </androidx.constraintlayout.widget.ConstraintLayout>

            </com.google.android.material.card.MaterialCardView>

        </androidx.constraintlayout.widget.ConstraintLayout>

    </LinearLayout>

</layout>

 

• style.xml에서 TabLayout의 Text 스타일을 정의하여 사용한다.

Kotlin에서 TabLayoutMediator로 ViewPager2와 TabLayout을 연동한다.

class HyperStatFragment : BaseDialogFragment<FragmentHyperStatBinding>(R.layout.fragment_hyper_stat) {

    ...

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        ...
				
        initTabLayout()

        binding.vm = viewModel
        
        ...
    }
    
    ...

    private fun initTabLayout() {
        TabLayoutMediator(binding.tlHyperStat, binding.vpHyperStat) { tab, position ->
            tab.text = "Preset ${position + 1}"
        }.attach()
        for (i in 0 until 3) {
            val tabs = binding.tlHyperStat.getChildAt(0) as ViewGroup
            for (tab in tabs.children) {
                val lp = tab.layoutParams as LinearLayout.LayoutParams
                lp.marginEnd = 16
                tab.layoutParams = lp
                binding.tlHyperStat.requestLayout()
            }
        }
    }
}

• 각 페이지와 연동된 TabLayout 버튼의 Text를 초기화하고 margin을 부여한다.

 

결과

 

코드

GitHub - littlesam95/MapleCalendar: 🍄 메붕이들을 위한 이벤트 일정 알리미