[android] [kotlin] TabLayout과 ViewPager사용하기

TabLayout이란!! 

카카오톡, 페이스북, 구글 플레이스토어, 등에서 볼 수 있는 각각의 탭 메뉴 입니다.

그리고 각각의 페이지가 다른 화면을 가지기 위해 ViewPager를 사용합니다.

 

 

오늘은 탭을 네개 만들어봅시다!

 

 

우선 가장 기본적인 메인화면을 꾸며주고, 

activity_main.xml

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

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#8AAAE5"
            app:layout_scrollFlags="scroll|enterAlways">

            <TextView
                android:id="@+id/toolbar_tv"
                android:textSize="20sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/app_name"
                android:textColor="#fff" />

        </androidx.appcompat.widget.Toolbar>

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabBackground="@color/white"
            app:tabIndicatorColor="#8AAAE5"
            app:tabSelectedTextColor="#8AAAE5" />

    </com.google.android.material.appbar.AppBarLayout>

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</LinearLayout>

 

 

각각의 다른 화면을 가지도록 fragment를 만들어줍시다.

fragment를 잘 모른다면???

korean-otter.tistory.com/entry/android-kotlin-Fragment-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0

[android] [kotlin] Fragment 사용하기

 

여러 화면들과 코틀린 파일을 만들어준 후에는 . . . !

MainActivity.kt

class MainActivity : BaseActivity() {

    override var viewId: Int = R.layout.activity_main
    override var toolbarId: Int? = R.id.toolbar
    private var mViewPager: ViewPager? = null

    @SuppressLint("ShowToast")
    override fun onCreate() {

        mViewPager = findViewById(R.id.pager)
        mViewPager!!.adapter = PagerAdapter(supportFragmentManager)
        mViewPager!!.currentItem = 0

        val tabLayout = findViewById<View>(R.id.tabs) as TabLayout
        tabLayout.setupWithViewPager(mViewPager)


        tabLayout.getTabAt(0)!!.text = "image 1"
        tabLayout.getTabAt(1)!!.text = "image 2"
        tabLayout.getTabAt(2)!!.text = "image 3"
        tabLayout.getTabAt(3)!!.text = "image 4"

        mViewPager!!.addOnPageChangeListener(TabLayout.TabLayoutOnPageChangeListener(tabLayout))
        tabLayout.addOnTabSelectedListener(object : TabLayout.OnTabSelectedListener {
            override fun onTabSelected(tab: TabLayout.Tab) = tab.select()

            override fun onTabUnselected(tab: TabLayout.Tab) {

            }

            override fun onTabReselected(tab: TabLayout.Tab) {

            }
        })

    }

    inner class PagerAdapter(supportFragmentManager: FragmentManager) : FragmentStatePagerAdapter(supportFragmentManager) {

        override fun getItem(position: Int): Fragment {

            return when (position) {
                0 ->
                    OneFragment()
                1 ->
                    TwoFragment()
                2 ->
                    ThreeFragment()
                3 ->
                    FourFragment()
                else ->
                    TestFragment()
            }
        }

        override fun getCount(): Int = 4
    }
}

 

 

Main에서 BaseActivity를 상속받았으니 다음으로 해줄 것은 BaseActivity.kt를 만들 차례입니다!

BaseActivity.kt

abstract class BaseActivity : AppCompatActivity() {

    private var instance: BaseActivity? = null
    private var mToolbarHeight = 0
    private var mAnimDuration = 0

    private var mVaActionBar: ValueAnimator? = null
    protected abstract var viewId: Int
    protected abstract var toolbarId: Int?

    protected abstract fun onCreate()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        instance = this

        setContentView(viewId)

        if (toolbarId != null)
            findViewById<androidx.appcompat.widget.Toolbar>(toolbarId!!).let {
                setSupportActionBar(it)
                supportActionBar?.setDisplayShowTitleEnabled(false)
            }
        onCreate()
    }

    fun hideActionBar() {
        toolbarId?.let {
            val mToolbar = findViewById<androidx.appcompat.widget.Toolbar>(toolbarId!!)

            if (mToolbarHeight == 0)
                mToolbarHeight = mToolbar.height

            if (mVaActionBar != null && mVaActionBar!!.isRunning)
                return@let

            mVaActionBar = ValueAnimator.ofInt(mToolbarHeight, 0)
            mVaActionBar?.addUpdateListener {
                ValueAnimator.AnimatorUpdateListener { animation ->
                    mToolbar.layoutParams.height = animation.animatedValue as Int
                    mToolbar.requestLayout()
                }
            }

            mVaActionBar?.addUpdateListener {
                object : AnimatorListenerAdapter() {
                    override fun onAnimationEnd(animation: Animator?) {
                        supportActionBar?.hide()
                    }
                }
            }

            mVaActionBar!!.duration = mAnimDuration.toLong()
            mVaActionBar?.start()

        }
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        when (item.itemId) {
            android.R.id.home -> finish()
        }
        return super.onOptionsItemSelected(item)
    }
    // <- 버튼 누를 시 뒤로가기

}

 

 

 

완성시킨 후의 모양!

 

 

 

 

 

 

 

<참고한 강의>

hyogeun-android.tistory.com/entry/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EA%B0%95%EC%9D%98-9-TabLayout-ViewPager-%EC%99%80-BaseActivity%EC%82%AC%EC%9A%A9?category=831353

안드로이드 강의 9. TabLayout & ViewPager 와 BaseActivity사용