Kotlin

(스크랩) 안드로이드 뷰페이저, 프레그먼트 페이지 관련 이슈

Machine_웅 2018. 11. 7. 13:44
728x90
반응형

 

출처 : http://black-jin0427.tistory.com/94

 

뷰페이저는 아래 보이는 이미지와 같이 좌우 드래그를 통해 화면이 변하는 뷰입니다. 

다양한 방법으로 뷰페이저를 만들 수 있지만 이번에는 Fragment 를 사용한 뷰페이저를 만들어 보겠습니다.





1. MainAcitivty 에서 viewPager 에 adapter 를 설정합니다.

class MainActivity : AppCompatActivity() {

private val adapter by lazy { MainAdapter(supportFragmentManager) }

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

vpMainActivity.adapter = MainActivity@adapter

}

}

저는 코틀린 익스텐션을 사용하기 때문에 별다른 변수 선언 없이 xml 에서 viewPager 변수를 바로 가져와 사용할 수 있습니다.


(vpMainActivity 는 viewpager 의 id 값입니다.)



- activity main

<?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/vpMainActivity"
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.constraint.ConstraintLayout>





2. ViewPager 에 띄울 Fragment 를 선언합니다. (저는 5개의 A ~ D Fragment 를 만들었습니다.)


여기서 Fragment 는 아래를 상속할 수 있도록 합니다.

import android.support.v4.app.Fragment
class AFragment : Fragment() {

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
return inflater.inflate(R.layout.fragment_main, container, false)
}

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

//뷰 설정
tvFragmentMain.text = "A Fragment"

}

}


참고) A ~ D Fragment 모두 동일한 Xml 을 사용하고 textView 통해 구분 합니다. (각 각 따로 xml 을 만드셔도 됩니다.)



- fragment_main

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto">

<TextView
android:id="@+id/tvFragmentMain"
android:textSize="20dp"
android:textStyle="bold"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintBottom_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>





3. 마지막으로 MainAdapter 을 만들면 5개의 화면으로 구성된 ViewPager 가 완성됩니다.


import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
class MainAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {

override fun getItem(position: Int): Fragment? {

return when(position) {

0 -> AFragment()

1 -> BFragment()

2 -> CFragment()

3 -> DFragment()

4 -> EFragment()

else -> null
}

}

// 생성 할 Fragment 의 개수
override fun getCount() = 5

override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
super.destroyItem(container, position, `object`)
//Log.e("FragmentPagerAdapter", "destroyItem position : $position")
}

}


이번 예제에서는 MainAdapter 에서 FragmentStatePagerAdapter 을 상속해서 만들었습니다.


MyViewPager 완성코드


하지만! FragmentPagerAdapter 를 상속하여 뷰페이저를 만들 수 있습니다. 이 둘의 차이에 대해 궁금하실 수도 있을 것 같아 따로 포스팅을 준비했으니 본인의 프로젝트에 맞는 뷰페이저를 만들어 멋지게 코딩하시기 바랍니다.~!~!


FragmentStatePagerAdapter 와 FragmentPagerAdapter 의 차이



연관 포스팅)


뷰페이저에 인디케이터 달기

탭 레이아웃을 사용해보자!



번외) setOffScreenPageLimit 에 대한 탐구



setOffScreenPageLimit 를 변경한 MainAcitivty 의 모습

class MainActivity : AppCompatActivity() {

private val adapter by lazy { MainAdapter(supportFragmentManager) }

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

vpMainActivity.adapter = MainActivity@adapter
vpMainActivity.offscreenPageLimit = 2

}


위에서 설명 했을 때 뷰페이저는 좌우 1개의 화면 미리 생성하고 그 이외의 화면은 제거합니다.

따라서 setOffScreenPageLimit의 default 값은 1이 되는데요. 이 값을 2로 설정하면 좌우 2개의 화면을 미리 생성하게 됩니다.


색칠한 화면이 현재 보고 있는 화면 입니다.


A - B - C            /  초기 우측 B, C 화면 생성


A - - C - D       /  B 로 스와이프하면 D가 생성


B - C - - E       /  D 로 스와이프하면 A는 제거 됨(위 예제는 화면이 5개 까지 이므로 생성 x, 만약 화면이 더 많으면 6번 화면이 생성됨)


C -D -             /  마지막으로 E로 스와이프하면 B는 제거된다. 우측에는 생성할 뷰가 없고 좌측으로는 2개의 뷰가 남게된다.

 

 

 

 

출처 : http://black-jin0427.tistory.com/94

728x90
반응형