예나아빠_개발

TabLayout _ 코틀린

탭레이아웃 사용하기

탭레이아웃을 사용하기 위한 디펜던시 추가.

프로젝트 생성 후 build.gradle(app) 아래 코드를 추가.

dependencies {

...

...

implementation 'com.android.support:design:x.y.z //추가.

}

3개의 프래그먼트를 뵤여주기 위해 탭 레이아웃 과 뷰페이저를 xml에 등록함.

//////////////////////////////////////////////////////////////////////////////////////////

xml 소스 구성.

activity_main.xml

상단 

//////////////////////////////////////////////////////////////////////////////////////////

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

<android.support.constraint.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=".activity.MainActivity">

    <android.support.design.widget.TabLayout

        android:id="@+id/tabLayout"

        android:layout_width="match_parent"

        android:layout_height="?android:attr/actionBarSize"

        app:layout_constraintBottom_toTopOf="@+id/viewPager"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toTopOf="parent"

        >

    </android.support.design.widget.TabLayout>

    <android.support.v4.view.ViewPager

        android:id="@+id/viewPager"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/tabLayout">

    </android.support.v4.view.ViewPager>

</android.support.constraint.ConstraintLayout>

//////////////////////////////////////////////////////////////////////////////////////////

하단

//////////////////////////////////////////////////////////////////////////////////////////

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

<android.support.constraint.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=".MainActivity">

    <android.support.v4.view.ViewPager

        android:id="@+id/viewPager"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        app:layout_constraintBottom_toTopOf="@+id/tabLayout"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toTopOf="parent">

    </android.support.v4.view.ViewPager>

    <android.support.design.widget.TabLayout

        android:id="@+id/tabLayout"

        android:layout_width="match_parent"

        android:layout_height="?android:attr/actionBarSize"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/viewPager">

    </android.support.design.widget.TabLayout>

</android.support.constraint.ConstraintLayout>

//////////////////////////////////////////////////////////////////////////////////////////

뷰 페이저 안에 탭 레이아웃 포함.(상단.)

//////////////////////////////////////////////////////////////////////////////////////////

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

<android.support.constraint.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=".activity.MainActivity">

    <android.support.v4.view.ViewPager

        android:id="@+id/viewPager"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintLeft_toLeftOf="parent"

        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintTop_toTopOf="parent">

        <android.support.design.widget.TabLayout

            android:id="@+id/tabLayout"

            android:layout_width="match_parent"

            android:layout_height="?android:attr/actionBarSize">

        </android.support.design.widget.TabLayout>

    </android.support.v4.view.ViewPager>

//////////////////////////////////////////////////////////////////////////////////////////

MainActivity.kt 소스 작성.

탭레이아웃을 구성하기 위한 ui 정의 및 프래그먼트 데이터 생성.

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        setContentView(R.layout.activity_main)

        setupUI()

    }

    //UI 초기화.

    private fun setupUI() {

        setupTabLayout()

    }

    // 탭 레이아웃 설정.

    private fun setupTabLayout() {

        val pageAdapter = MainViewPagerAdapter(setFragmentList(), supportFragmentManager)

        viewPager.adapter = pageAdapter

        tabLayout.setupWithViewPager(viewPager)

    }

    // 프래그먼트 리스트 설정.

    private fun setFragmentList(): List<Pair<Fragment, String>> {

//        val pageList = listOf(

//            Pair(MainFragment_1.newInstance(), "first"),

//            Pair(MainFragment_2.newInstance(), "first"),

//            Pair(MainFragment_3.newInstance(), "first")

//        )

//        return pageList

        return listOf(

            Pair(MainFragment_1.newInstance(), "first"),

            Pair(MainFragment_2.newInstance(), "second"),

            Pair(MainFragment_3.newInstance(), "third")

        )

    }

    // 프래그먼트 리스트 설정.

    private fun setFragmentList2() = listOf(

        Pair(MainFragment_1.newInstance(), "first"),

        Pair(MainFragment_2.newInstance(), "second"),

        Pair(MainFragment_3.newInstance(), "third")

    )

}

//////////////////////////////////////////////////////////////////////////////////////////

ViewPagerAdapter 소스(FragmentPagerAdapter)

class MainViewPagerAdapter(val pageList: List<Pair<Fragment, String>>, fragmentManager: FragmentManager) :

    FragmentPagerAdapter(fragmentManager) {

    override fun getItem(position: Int): Fragment {

        return pageList[position].first

    }

    override fun getCount(): Int {

        return pageList.size

    }

    override fun getPageTitle(position: Int): CharSequence? {

//        return super.getPageTitle(position)

        return pageList[position].second

    }

}

//////////////////////////////////////////////////////////////////////////////////////////

보여줄 프래그먼트 소스.

private const val ARG_PARAM1 = "param1"

private const val ARG_PARAM2 = "param2"

class MainFragment_1 : Fragment() {

    private var param1: String? = null

    private var param2: String? = null

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)

        arguments?.let {

            param1 = it.getString(ARG_PARAM1)

            param2 = it.getString(ARG_PARAM2)

        }

    }

    override fun onCreateView(

        inflater: LayoutInflater, container: ViewGroup?,

        savedInstanceState: Bundle?

    ): View? {

        return inflater.inflate(R.layout.fragment_main_fragment_1, container, false)

    }

    companion object {

        // param을 null로 처리하면 인자를 따로 추가 안해도 된다.

        // 인자값을 추가할 경우 해당 데이터가 저장된다.

        @JvmStatic

        fun newInstance(param1: String? = null, param2: String? = null) =

            MainFragment_1().apply {

                arguments = Bundle().apply {

                    putString(ARG_PARAM1, param1)

                    putString(ARG_PARAM2, param2)

                }

            }

    }

}

//////////////////////////////////////////////////////////////////////////////////////////

탭 레이아웃 기본 정리