Viewpager (이미지 슬라이드)

손라가락으로 휙휙 넘기는 슬라이드 기능을 만들어보겠습니다.

 

아래의 이미지 부분을 넘기면, 이미지가 넘어가는 형태의 기능입니다.

 

앱을 사용하다가 많이 보셨을 것 같습니다.

 

 

 

Viewpager라고하는데 코딩을 시작해보죠.

 

자, xml에서 ViewPager 부분을 만들어줍니다.

 

다른 레이아웃 부분은 지우고, ViewPager부분만 추출한 코드입니다.

 

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/viewpager_area"
        app:layout_constraintTop_toBottomOf="@id/header_area"
        android:layout_width="match_parent"
        android:layout_marginTop="10dp"
        android:layout_height="wrap_content">

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="436dp"
            android:layout_height="220dp"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="8dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="8dp">

        </androidx.viewpager.widget.ViewPager>

    </androidx.constraintlayout.widget.ConstraintLayout>

 

그다음 ViewPagerAdapter를 만들어주구요

 

 

class ViewPagerAdapter(private val context : Context) : PagerAdapter() {

    private var layoutInflater : LayoutInflater? = null
    val Image = arrayOf(
        R.drawable.ai,
        R.drawable.css,
        R.drawable.html
    )


    override fun isViewFromObject(view: View, `object`: Any): Boolean {
        return view ===  `object`
    }

    override fun getCount(): Int {
        return Image.size
    }


    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        layoutInflater = context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        val v = layoutInflater!!.inflate(R.layout.viewpager_activity, null)
        val image = v.findViewById<View>(R.id.imageview) as ImageView

        image.setImageResource(Image[position])
        val vp = container as ViewPager
        vp.addView(v , 0)


        return v

    }


    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
        val vp = container as ViewPager
        val v = `object` as View
        vp.removeView(v)
    }
}

 

나머지는 Activity에서 연결만 해주면 됩니다.

 

class MainActivity : AppCompatActivity() {

    internal lateinit var viewpager : ViewPager

    override fun onCreate(savedInstanceState: Bundle?) {

        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewpager = findViewById(R.id.viewpager) as ViewPager

        val adapter = ViewPagerAdapter(this)
        viewpager.adapter = adapter
        

        
    }
}

 

이렇게 하면 Imager Slider의 기능이 완료되었습니다!