[Android Studio] Fragment, ViewPager2

< Fragment >

앱을 만들 때 페이지(뷰)의 역할을 하는 것엔 Activity와 Fragment가 있는데,

한 레이아웃 내에 특정 부분에 fragment를 넣어 사용할 수 있다. 

그리고 Fragment는 Activity내에서 호출되어야 사용할 수 있다.

 

1. Fragment 클래스와 레이아웃 생성

Fragment()를 상속받는 클래스를 만들어 onCreateView를 통해 layout과 연결한다.

// frag_a.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/frag_A"
        android:background="#F10606">
        <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="Fragment A"
            android:textSize="50dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </FrameLayout>

</LinearLayout>

// FragAFragment

package testproject.practice

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment

class FragAFragment : Fragment() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.frag_a, null)
        return view
    }
}

 

2. Activity에서 호스팅

supportFragmentManger로 fragment를 호스팅한다. * commit을 꼭 해줘야 한다.

// FragmentActvity

package testproject.practice

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

class FragmentActivity: AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.frag_main)

        btn_fragmentA.setOnClickListener {
            supportFragmentManager.beginTransaction().replace(R.id.frameLayout, FragAActivity()).commit()
        }
        btn_fragmentB.setOnClickListener {
            supportFragmentManager.beginTransaction().replace(R.id.frameLayout, FragBActivity()).commit()
        }
    }
}

위 코드는 버튼을 누르면 기존 레이아웃 특정 부분을 fragment로 바꿔주는건데, 처음부터 fragment로 설정하려면

아래처럼 add(원래 레이아웃 바꿀 부분, Fragment)해준다.

 

package testproject.practice

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

class FragmentActivity: AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.frag_main)
        supportFragmentManager.beginTransaction().add(
            R.id.frameLayout, FragAActivity()
        ).commit()
        btn_fragmentA.setOnClickListener {
            supportFragmentManager.beginTransaction().replace(R.id.frameLayout, FragAFragment()).commit()
        }
        btn_fragmentB.setOnClickListener {
            supportFragmentManager.beginTransaction().replace(R.id.frameLayout, FragAFragment()).commit()
        }
    }
}

 

 

< ViewPager2 >

페이지를 swipe할 수 있는 기능이다.

ViewPager이후 Viewpager2가 나와 이제는 Viewpager2 사용을 지향한다.

붙이는 adapter에 따라 다르게 만들 수 있다.

 

현재 페이지를 기준으로 양 옆, 총 3개의 페이지만 관리하고 나머지는 메모리에서 삭제한다.

 

출처 : https://ics.upjs.sk/~novotnyr/android/prstom-posuvame-obsah.html

위 사진은 ViewPager고 몇 메소드가 deprecated 되고 대체되었다.

 

PageAdapter -> RecyclerView.Adapter

FragmentStatePageAdapter -> FragmentStateAdapter

addPageChangeListener -> registerOnPageChangeCallback

 

그리고 FragmentStateAdapter의 부모클래스가 RecyclerView.Adapter다. (위 사진에서도 알 수 있듯이..)

 

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=kartmon&logNo=221609109500

 

 

1. Fragment 생성

우클릭 > New > Fragmnet > Fragment(Blank) 

 

각 fragment 내 onCreateView() 부분에 layout만 추가해준다.

override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_my1, container, false)
    }

 

* 위처럼 생성하는 이유는 자동으로 xml을 자동으로 생성해주기 때문! 위처럼 생성하지 않으면 아래와 같은 오류가 나며 앱이 다운된다.

-> 자세한 이유는 추후 추가 예정. 

 

 

2. FragmentAdapter 생성

FragmentStateAdapter(fragmentActivity)를 상속받는 Adapter를 생성한다.

class FragmentAdapter(fragmentActivity: FragmentActivity) : FragmentStateAdapter(fragmentActivity) {
    var fragmentList = listOf<Fragment>()
    override fun getItemCount(): Int {
        return fragmentList.count()
    }

    override fun createFragment(position: Int): Fragment {
        return fragmentList.get(position)
    }
}

 

 

3. Adapter에 fragment 채우고 viewpager adapter로 할당하기

레이아웃 (xml에 viewpager2 위젯을 넣고)

-> Data 생성 (Fragment 리스트를 만들고)

-> adapter 생성 (2에서 생성한 adapter에 mainActivity(viewpager가 있는 activity)를 넘겨서 생성하고)

-> adapter에 데이터 채우고 viewpager의 adapter에 위 adapter 할당)

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

        // https://lab.cliel.com/entry/Kotlin-ViewPager
        var fragmentList = listOf(MyFragment1(), MyFragment2(), MyFragment3())

        // 이 엑티비티를 fragmentActivity로 넘겨 adapter를 생성
        val adapter = FragmentAdapter(this)
        adapter.fragmentList = fragmentList
        // viewpager2의 id임
        myViewPager.adapter = adapter

    }
}

 

---

정리하면 

 

fragment의 adapter에 데이터를 담아준다.
viewpager2의 adapter를 fragment의 adapter로 설정한다!

 

 

해당 프로젝트의 경우 아래 그림과 같다...!

 

 

 

공부 출처 : https://lab.cliel.com/entry/Kotlin-ViewPager

[Kotlin] 위젯 - ViewPager2