[개념] 안드로이드 ViewPager(뷰페이저) (1)

쓰리원·2022년 5월 1일
0

ViewPager

목록 보기
1/1
post-thumbnail

ViewPager2로 넘어가서 일반 ViewPager는 사용하지 않지만, 전체적인 ViewPager를 정리하는 차원에서 공식문서로 알아보도록 하겠습니다.

1. ViewPager로 프래그먼트 간 슬라이드

화면 슬라이드는 하나의 전체 화면에서 다른 전체 화면으로 전환하는 것으로, 설정 마법사 또는 슬라이드쇼와 같은 UI에서 일반적으로 사용됩니다. 이 과정에서는 지원 라이브러리에서 제공하는 ViewPager로 화면 슬라이드를 실행하는 방법을 보여줍니다. ViewPager 객체는 화면 슬라이드에 자동으로 애니메이션을 적용할 수 있습니다. 다음은 콘텐츠의 한 화면에서 다음 화면으로 전환되는 화면 슬라이드입니다.

2. 프래그먼트 만들기

onCreateView() 메서드에서 방금 만든 레이아웃을 반환하는 Fragment 클래스를 만듭니다. 그러면 사용자에게 표시할 새 페이지가 필요할 때마다 상위 활동에서 이 프래그먼트의 인스턴스를 만들 수 있습니다.

    import android.support.v4.app.Fragment
	import androidx.fragment.app.Fragment
    
    //공식문서는 import android.support.v4.app.Fragment로 작성되어 있습니다.
    //androidx로 바꿔줍니다.
    
    class ScreenSlidePageFragment : Fragment() {

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

공식문서는 import android.support.v4.app.Fragment로 작성되어 있습니다. androidx로 바꿔줍니다.

3. 뷰(fragment_screen_slide_page.xml) 만들기

나중에 프래그먼트 콘텐츠에 사용할 레이아웃 파일을 만듭니다. 프래그먼트 콘텐츠에 대한 문자열도 정의해야 합니다. 다음 예제에는 텍스트를 표시하는 텍스트 뷰가 포함되어 있습니다.

    <!-- fragment_screen_slide_page.xml -->
    <ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <TextView style="?android:textAppearanceMedium"
            android:padding="16dp"
            android:lineSpacingMultiplier="1.2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/lorem_ipsum" />
    </ScrollView>
    

4. ViewPager 추가

ViewPager 객체에는 페이지 간 전환을 위한 스와이프 동작이 내장되어 있으며 기본적으로 화면 슬라이드 애니메이션을 표시하므로 직접 애니메이션을 만들 필요가 없습니다. ViewPager는 표시할 새 페이지의 요소로 PagerAdapter 객체를 사용하므로 PagerAdapter는 개발자가 이전에 만든 프래그먼트 클래스를 사용합니다.

시작하려면 ViewPager가 포함된 레이아웃을 만듭니다.

    <!-- activity_screen_slide.xml -->
    <android.support.v4.view.ViewPager
       -->변경해주기 <androidx.viewpager.widget.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    

<android.support.v4.view.ViewPager 를 androidx로 바꿔줍니다. <androidx.viewpager.widget.ViewPager

다음을 실행하는 Activity을 만듭니다.

콘텐츠 뷰를 ViewPager가 있는 레이아웃으로 설정합니다.
FragmentStatePagerAdapter 추상 클래스를 확장하는 클래스를 만들고 getItem() 메서드를 구현하여 ScreenSlidePageFragment의 인스턴스를 새 페이지로 제공합니다. 페이저 어댑터는 어댑터에서 만들 페이지 수(예에서는 5개)를 반환하는 getCount() 메서드도 구현해야 합니다.
PagerAdapter를 ViewPager에 연결합니다.

import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager
    
: androidx로 바꿔줍니다.
    
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.Fragment

private const val NUM_PAGES = 5

class ScreenSlidePagerActivity : FragmentActivity() {

    /**
     * The pager widget, which handles animation and allows swiping horizontally to access previous
     * and next wizard steps.
     */
    private lateinit var mPager: ViewPager

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

        // Instantiate a ViewPager and a PagerAdapter.
        mPager = findViewById(R.id.pager)

        // The pager adapter, which provides the pages to the view pager widget.
        val pagerAdapter = ScreenSlidePagerAdapter(supportFragmentManager)
        mPager.adapter = pagerAdapter
    }

    override fun onBackPressed() {
        if (mPager.currentItem == 0) {
            // If the user is currently looking at the first step, allow the system to handle the
            // Back button. This calls finish() on this activity and pops the back stack.
            super.onBackPressed()
        } else {
            // Otherwise, select the previous step.
            mPager.currentItem = mPager.currentItem - 1
        }
    }

    /**
     * A simple pager adapter that represents 5 ScreenSlidePageFragment objects, in
     * sequence.
     */
    private inner class ScreenSlidePagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm) {
        override fun getCount(): Int = NUM_PAGES

        override fun getItem(position: Int): Fragment = ScreenSlidePageFragment()
    }
}

import android.support.v4.app.Fragment
import android.support.v4.app.FragmentManager

: androidx로 바꿔줍니다.

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

5. Reference

https://developer.android.com/training/animation/screen-slide?hl=ko

profile
가장 아름다운 정답은 서로의 협업안에 있다.

0개의 댓글