본문 바로가기

ANDROID/UI - UX

[안드로이드] ViewPager의 페이지 별 요소를 참조할 때의 유의점

ViewPager에 개별 페이지를 구현하고자 할 때에는 기존 방식에서 이슈가 없었는데,

 

개별 페이지 내에서 조작해야 하는 요소가 들어가고 나니 문제가 생겼다.

 

페이지를 이동하면서 페이지들의 생명주기가 변하는 것, 그리고 참조값이 달라지기 때문인지 

 

넣어준 버튼들과 터치 이벤트가 제대로 동작하지 않았다.

 

이를 해결해주기 위해서는 Adapter 내에서 instantiateItem을 override 해주어야 했다.

 

override한 instantiateItem 내부에 참조하는 요소들을 지역변수로 할당해주니 

 

페이지 별로 참조하고자 했던 요소들이 정상적으로 동작하는 걸 확인할 수 있었다.

 

override fun instantiateItem(container: ViewGroup, position: Int): Any {

    if (::binding.isInitialized) {
    	
        // 참조하고자 하는 요소를 지역변수로 개별 참조
        val seekBar = binding.balanceSeekbar
        var dynamicThumbColor = Color.argb(1, MAX_RGB,0,0)

        val seekbarChangeListener = object: SeekBar.OnSeekBarChangeListener {
            override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {

                dynamicThumbColor = Color.argb(255, MAX_RGB - progress,0,progress)

                seekBar!!.thumb.mutate().colorFilter = BlendModeColorFilterCompat.createBlendModeColorFilterCompat(dynamicThumbColor, BlendModeCompat.SRC_ATOP)
                seekBar.invalidate()

                if (progress <= 20) {
                    seekBar.progress = 20
                }

                if (progress >= 170) {
                    seekBar.progress = 170
                }
            }

            override fun onStartTrackingTouch(seekBar: SeekBar?) {

            }

            override fun onStopTrackingTouch(seekBar: SeekBar?) {

            }
        }

		// 개별 동작을 원했던 seekBarChangeListener를 개별 참조한 seekBar에 적용하였음.
        seekBar.setOnSeekBarChangeListener(seekbarChangeListener)
    }

    return super.instantiateItem(container, position)
}

 

 

 

< 참조 >

https://selfish-developer.com/entry/ViewPager%EC%99%80-PageAdapter

 

ViewPager와 PageAdapter

0. ViewPager와 PagerAdapter ViewPager와 PagerAdapter는 아래 네이버 앱의 뉴스, 연애 스포츠 탭처럼 큰 화면 안에서 여러 개의 작은 화면을 좌우로 움직이는 UI를 구성할 때 사용하는 안드로이드 라이브러리다...

selfish-developer.com