[kotlin] TabLayout 만들기

 

 

이런식으로 TabLayout과 Viewpager를 사용해서 클릭했을때 해당하는 프레그먼트로 이동하도록 만들어볼것이다 

 

먼저 TabLayout과 ViewPager를 사용해서 레이아웃을 디자인해준다

나는 조금 더 예쁘게 디자인해주고 싶어서 코드들을 추가해주었다

style에 TabLayoutText를 만들어서 폰트,텍스트 크기, 텍스트 스타일 등을 추가한뒤

레이아웃 부분에 app : tabTextAppearance = "@style/TabLayout" 을 써줘서 글자를 예쁘게 꾸며줬다

그리고 사이의 간격을 띄우고싶어서 아래 코드를 추가해줬다

app:tabMaxWidth="0dp"
app:tabGravity="fill"
app:tabMode="fixed" 

간격 띄우는 코드

 

<?xml version="1.0" encoding="utf-8"?>

<layout>
    <androidx.constraintlayout.widget.ConstraintLayout
        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=".recipebook.CommentActivity">



        <com.google.android.material.tabs.TabLayout
            android:id="@+id/recipe_content_tb"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:tabIndicatorColor="@color/main"
            app:tabIndicatorFullWidth="false"
            app:tabIndicatorHeight="3dp"
            app:tabRippleColor="#00ff0000"
            app:tabSelectedTextColor="@color/main"
            app:tabTextAppearance="@style/TabLayoutText"
            app:tabMaxWidth="0dp"
            app:tabGravity="fill"
            app:tabMode="fixed" />


        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/recipe_content_vp"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            app:layout_constraintTop_toBottomOf="@+id/recipe_content_tb"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"/>



    </androidx.constraintlayout.widget.ConstraintLayout>

</layout>

activity_tab_layout.xml

 

 

그리고 눌렀을때 이동할 프레그먼트들을 생성해준다. 

class CommentFragment : Fragment() {

    private lateinit var binding : FragmentCommentBinding


    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = FragmentCommentBinding.inflate(inflater, container, false)
        return binding.root

    }


}

CommentFragment.kt

 

class ReviewFragment : Fragment() {

    private lateinit var binding: FragmentReviewBinding

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = FragmentReviewBinding.inflate(inflater, container, false)
        return binding.root
    }



}

ReviewFragment.kt

 

 

 

 

이제 어뎁터를 생성해줘야한다 

어뎁터에서 fragment의 개수를 작성해주고, 아까 만든 Fragment 2개를 연결해준다

class FragmentAdpater(fragment: TabLayoutActivity) : FragmentStateAdapter(fragment) {


    // 2개의 fragment만들거임 (개수 2개)
    override fun getItemCount(): Int = 2

    override fun createFragment(position: Int): Fragment {

        // position에 따라(댓글 ,요리 후기에 따라) 다른 fragment 보여줌
        return when (position) {
            0 -> CommentFragment()
            else -> ReviewFragment()
        }
    }


}

FragmentAdapter.kt

 

 

 

마지막으로 TabLayoutActivty로 돌아가서 TabLayout에 들어갈 텍스트를 작성해준다

그리고 viewpager와 어뎁터를 연결해주는 작업을 해주면 적용이 되는것을 볼수있다 

class TabLayoutActivity : AppCompatActivity() {


    lateinit var binding : ActivityTabLayoutBinding

    // TabLayout에 들어갈 텍스트
    private val tabTitleArray = arrayListOf("댓글", "요리 후기")



    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityTabLayoutBinding.inflate(layoutInflater)
        setContentView(binding.root)


        binding.apply {

            // viewpager와 어뎁터 연결
            recipeContentVp.adapter = FragmentAdpater(this@TabLayoutActivity)

            // TabLayout에 들어갈 텍스트적음
            TabLayoutMediator(recipeContentTb, recipeContentVp) {
                    tab, position ->
                    tab.text = tabTitleArray[position]
            }.attach()
        }


    }
}

TabLayoutActivty.kt