[Kotlin][Android] 화면 넘기기 구현하기

이번 포스팅에선 코틀린을 사용해서 넘길 수 있는 화면을 구현해 보겠습니다.

자바로 만드는 방법은 아래 포스팅을 참고해 주세요.

https://stickode.tistory.com/30

[Java][Android] 프래그먼트를 이용한 화면 전환

 

이 포스팅에서 사용한 코드들은 아래의 스틱코드 링크에서 확인하실 수 있습니다.

https://stickode.com/detail.html?no=2220 

스틱코드

 

먼저 뷰페이저와 탭 레이아웃을 사용하기 위해 아래의 의존성 문구를 앱 수준 gradle 파일에 작성합니다.

implementation 'com.google.android.material:material:1.3.0-alpha01'

 

그 다음 메인 화면의 xml 파일을 아래와 같이 만들어줍니다.

<?xml version="1.0" encoding="utf-8"?>
<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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="1"
        app:layout_constraintHeight_percent=".9"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tablayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintWidth_percent="1"
        app:layout_constraintHeight_percent=".1"
        app:tabIndicatorColor="@color/colorPrimaryDark"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/viewpager">

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1번 탭"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="2번 탭"/>

        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="3번 탭"/>

    </com.google.android.material.tabs.TabLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

이제 뷰페이저에 사용할 프래그먼트를 3개 만들겠습니다.

프래그먼트를 만들려면 java 패키지 안의 com.example.xxx 패키지를 우클릭한 후 아래와 같이 클릭하면 됩니다.

저는 FirstFragment, SecondFragment, ThirdFragment란 이름으로 각각 프래그먼트를 만들었습니다.

화면이 넘어가는 것을 확인하기 위해 프래그먼트들의 xml은 아래와 같이 간단하게 텍스트뷰 하나만 넣었습니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ThirdFragment">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="첫 번째 프래그먼트"
        android:gravity="center"
        android:textSize="30sp"/>

</androidx.constraintlayout.widget.ConstraintLayout>

프래그먼트들의 자바 파일은 건드리지 않았습니다. 만들어졌을 때의 모습 그대로 두면 됩니다.

 

다음으로 뷰페이저에 사용할 어댑터를 만들겠습니다. 코틀린 클래스를 하나 만든 후 아래와 같이 만들어줍니다.

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentPagerAdapter

class PageAdapter(manager: FragmentManager): FragmentPagerAdapter(manager)
{
    private val fragmentList = ArrayList<Fragment>()
    private val titleList = ArrayList<String>()

    override fun getItem(position: Int): Fragment = fragmentList[position]

    override fun getCount(): Int = titleList.size

    override fun getPageTitle(position: Int): CharSequence? = titleList[position]

    fun addFragment(fragment: Fragment, title: String)
    {
        fragmentList.add(fragment)
        titleList.add(title)
    }
}

 

 

이제 메인 화면의 자바 파일을 만들겠습니다.

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity()
{

    override fun onCreate(savedInstanceState: Bundle?)
    {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val adapter = PageAdapter(supportFragmentManager)

        adapter.addFragment(FirstFragment(), "1번")
        adapter.addFragment(SecondFragment(), "2번")
        adapter.addFragment(ThirdFragment(), "3번")

        viewpager.adapter = adapter
        tablayout.setupWithViewPager(viewpager)
    }
}

 

이렇게 한 후 앱을 빌드해서 확인해보면 아래와 같이 동작하는 걸 볼 수 있습니다.

뷰페이저기 때문에 밑의 탭들을 누르지 않고 손가락으로 밀어서 스와이프해도 화면이 넘어가는 걸 볼 수 있습니다.