티스토리 뷰

반응형

ViewPager로 프래그먼트간의 슬라이드하기

안드로이드에서 옆으로 넘기는 화면을 구현하기 위해 ViewPager을 사용한다. 객체에는 페이지 간 전환을 위한 스와이프 동작이 내장되어 있으며 기본적으로 화면 슬라이드 애니메이션을 표시하므로 직접 애니메이션을 만들 필요가 없다 (참고: developer.android.com/training/animation/screen-slide?hl=ko)

 

 

 

 

Fragment 생성

먼저 넘길 페이지 수만큼 각각의 프래그먼트를 생성하고

class FirstFragment : Fragment(){

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

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


    }

    override fun onResume() {
        super.onResume()

    }

}

 

Adapter 만들기

when 안에 0부터 페이지 순서대로 프래그먼트와 연결해준다.

getCount()에는 총 페이지 수(프래그먼트 수)를 넣어준다 

class ViewPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {

    override fun getItem(position: Int): Fragment {

        return when(position) {

            0       ->  FirstFragment()

            1       ->  SecondFragment()

            else       ->  ThirdFragment()

        }

    }

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

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        super.destroyItem(container, position, `object`)
    }

}

 

 

메인 xml에 추가

팔레트에 있는 뷰페이저를 사용하지 않고 코드로 위젯 뷰페이저를 입력해줬다. 

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPager_main"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="30dp"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="30dp"
        android:layout_marginBottom="30dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="parent" />

 

 

메인페이지 액티비티에 추가

class MainActivity : AppCompatActivity() {

    //  viewpager
    private val adapter by lazy { ViewPagerAdapter(supportFragmentManager) }

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

        //  initialize viewpager
        viewPager_main.adapter = MainActivity@adapter
        
        }
        
}

 

 

하단 인디케이터 달기

yuuj.tistory.com/181

 

[Android][Kotlin] ViewPager Indicator 달기

뷰페이저로 이동할때마다 지금이 몇번째 페이지인지 알 수 있도록 하단에 인디케이터를 달아줬다. 인디케이터로 사용할 shape 만들기 /drawable 안에 shape_circle_gray.xml

yuuj.tistory.com

 

버튼 클릭으로 화면 넘기는법

yuuj.tistory.com/39

 

[Android][Kotlin] 버튼 클릭으로 ViewPager 페이지 넘기기

how to change page on Button click in ViewPager viewpager.currentItem으로 뷰페이저 객체의 현재 위치를 받아오고, viewpager.setCurrentItem(position, smoothScroll)으로 이동하고싶은 위치를 설정해주면 된..

yuuj.tistory.com

 

 

반응형