(Kotlin) 인피니티 사이클 뷰페이저(infinitecycleviewpager) 예제

이번에는 좌우 스크롤이 되는 페이지를 구현해보겠습니다.

 

라이브러리 추가는 필수겠죠?

    //인피티니 사이클 뷰페이저
    implementation 'com.github.devlight:infinitecycleviewpager:1.0.2'

 

1. Layout 만들기

1) exam.xml

메인 레이아웃에 <com.gigamole.infinitecycleviewpager.HorizontalInfiniteCycleViewPager> 를 추가해주세요.

<LinearLayout
		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"
		android:orientation="vertical">
	<android.support.v7.widget.Toolbar
			android:id="@+id/toolbar"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:background="@color/colorPrimary">
		<TextView
				android:layout_width="wrap_content"
				android:layout_height="wrap_content"
				android:id="@+id/set_date"
				android:text="@string/exam"
				android:textSize="17sp"
				android:textStyle="bold"
				android:layout_gravity="center"
				android:textColor="@android:color/white"/>
	</android.support.v7.widget.Toolbar>

	<com.gigamole.infinitecycleviewpager.HorizontalInfiniteCycleViewPager
			android:id="@+id/exam_cycleview"
			android:layout_width="match_parent"
			android:layout_height="match_parent"
			app:icvp_interpolator="@android:anim/accelerate_decelerate_interpolator"
			app:icvp_scroll_duration="250"
			app:icvp_center_page_scale_offset="30dp"
			app:icvp_min_page_scale_offset="5dp"
			app:icvp_max_page_scale="0.8"
			app:icvp_min_page_scale="0.6"
			app:icvp_medium_scaled="false">

	</com.gigamole.infinitecycleviewpager.HorizontalInfiniteCycleViewPager>
</LinearLayout>

2) exam_card_item.xml

뷰 페이저의 디자인을 꾸며줄 수 있는 xml을 만들어줍니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
		xmlns:android="http://schemas.android.com/apk/res/android"
		android:layout_width="match_parent"
		android:layout_height="match_parent"
		android:background="@drawable/border">

	<TextView
			android:id="@+id/exam_card_item_textview"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:textSize="21sp"
			android:layout_centerVertical="true"
			android:padding="20dp"
			android:textColor="@color/black"
			android:text="예시"/>

</RelativeLayout>

이미지를 보여줄 거면 이미지 뷰, 텍스트를 보여줄 거면 텍스트뷰를 추가해주세요.

2. Kotlin 만들기

1) Adapter.kt 만들기

viewpager를 연결한 어댑터를 만듭니다. 

class ExamCycleAdapter(private val context: Context, private val excelList: MutableList<SearchData>)  : PagerAdapter() {

    override fun getCount(): Int = excelList.size

    override fun isViewFromObject(view: View, obj: Any): Boolean {
        return view.equals(obj)
    }

    override fun destroyItem(container: ViewGroup, position: Int, `object`: Any) {
       container.removeView(`object` as View?)
    }

    override fun instantiateItem(container: ViewGroup, position: Int): Any {
        //데이터를 불러옴(array)
        val excel = excelList[position]
        //카드 아이템 레이아웃을 불러옴
        var view = LayoutInflater.from(context).inflate(R.layout.exam_card_item, container, false)
        //카드 아이템의 텍스트뷰를 선언
        var textview = view.findViewById(R.id.exam_card_item_textview) as TextView
        //텍스트뷰에 데이터 뿌려줌
        textview.text = excel.quiz.replace(".(?!$)".toRegex(), "$0\u200b")
        container.addView(view)
        return view
    }
}

2) Exam.kt 만들기

readExcelFileFromAssets() 대신 각자의 ArrayList를 가져오면 됩니다.

구현 코드는 굉장히 간단합니다.

class  ExamActivity : AppCompatActivity() {

    private var itemlist: MutableList<SearchData> = mutableListOf()
    private var mAdapter: ExamCycleAdapter? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.exam)
        val toolbar = findViewById(R.id.toolbar) as Toolbar
        setSupportActionBar(toolbar)
        val ab = supportActionBar!!
        ab.setDisplayShowTitleEnabled(false)
        ab.setDisplayHomeAsUpEnabled(true)

        //엑셀 불러오기
        readExcelFileFromAssets()

        //페이저 정의
        val pager = findViewById(R.id.exam_cycleview) as HorizontalInfiniteCycleViewPager
        //ExamCycleAdapter 어댑터에 context와 itemlist 보내기
        mAdapter = ExamCycleAdapter(this, itemlist as ArrayList<SearchData>)
        //페이저에 어댑터 연결
        pager.adapter = mAdapter

    }

3. 결과물

 

 

끝.