[Android, ViewPager] xml 를 이용한 뷰페이저 만들기

안녕하세요. 블랙진 입니다.

Fragment 를 사용한 View Pager 만들기는 이전에 포스팅을 했는데요.

이번에는 간단하게 xml 를 inflate 하여 만드는 법을 소개하겠습니다.

1. activiy_main.xml 에 ViewPager 을 선언해 줍니다.

<?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">
    
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</android.support.constraint.ConstraintLayout>

2. ViewPager 에 연결 시킬 MainAdapter 를 만듭니다.

2-1 먼저 생성 할 아이템을 만들어 줍니다.

item_main.xml

간단하게 ImageView 하나가 있는 item 입니다.

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

    <ImageView
        android:id="@+id/iv_item_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</android.support.constraint.ConstraintLayout>

2-2  ViewPager 에 연결할 MainAdapter 를 설정합니다. 이는 PagerAdapter 를 상속받아서 만듭니다.

class MainAdapter(context: Context) : PagerAdapter() {

    /**
     *  사용할 아이템에는 RGB 의 color hex code 값을 넣었습니다.
     *  기본 아이템은 #000000 인 검은색입니다.
     */
    private var items: Array<String> = arrayOf("000000")

    
    //inflater 객체가 있어야 item_main.xml 을 불러와 사용할 수 있습니다.
    private val inflater by lazy { LayoutInflater.from(context}

    //instantiateItem 메소드 에서 생성한 객체를 이용할 것인지 여부를 반환 합니다.
    override fun isViewFromObject(view: View, `object`: Any) = view == `object`

    //생성할 뷰페이저의 뷰 개수 입니다.
    override fun getCount() = items.size

    //뷰페이저에서 사용할 뷰객체를 생성 및 등록해줍니다.
    override fun instantiateItem(container: ViewGroup, position: Int): Any {

        val view = inflater.inflate(R.layout.item_main, null)

        val ivItemMain = view.findViewById(R.id.iv_item_main) as ImageView

        ivItemMain.setBackgroundColor(Color.parseColor("#" + items[position]))

        container.addView(view)

        return view
    }

    //생성 되어있는 뷰객체를 삭제해 줍니다.
    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        container.removeView(`object` as View)
    }

    //MainActivity 에서 item 을 등록해 줍니다.
    fun setItems(items: Array<String>) {
        this.items = items
        notifyDataSetChanged()
    }

}

setItems 를 제외한 모든 함수가 설정 되어 있어야지만 adapter 가 작동 됩니다. 모두 필수로 설정해 주세요.!!

자 이제 어댑터 생성까지 끝났으니 본격적으로 MainActivity 에 연결해 보겠습니다.

3. MainAdapter 에 생성한 viewPager 와 mainAdapter 를 연결해 줍니다.

class MainActivity: AppCompatActivity() {

    lateinit var mainViewPager: ViewPager

    private val mainAdapter by lazy { MainAdapter(this) }

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

        mainViewPager = findViewById(R.id.vp_activity_main)
        mainViewPager.adapter = mainAdapter

        mainAdapter.setItems(arrayOf("ff0000", "00ff00", "0000ff", "ffff00", "00ffff"))

    }
}

mainViewPager 에 adapter 만 연결해 주면 모든 준비가 끝납니다.

mainAdapter 에 setItems 로 5가지 색의 배경을 넣어 주었습니다. 이렇게 되면 5가지 색의 배경이 있는 viewPager 가 완성!!