Android / ViewPager

https://developer.android.com/guide/navigation/navigation-swipe-view-2?hl=ko

ViewPager2를 사용하여 탭으로 스와이프 뷰 만들기  |  Android 개발자  |  Android Developers

 

한장씩 넘겨가면서 볼수 있는 뷰.

recylcerView 구조로 구현됨. —> item_frame.xml , adapter 구현

1. 추가하고 싶은 곳 레이아웃에 androidx.viewpager2.widget.ViewPager2 요소 추가
2. 아이템 담을 레이아웃 xml 생성
3. adapter 구현 

class FrameAdapter(private val list : List<FrameItem>) : RecyclerView.Adapter<FrameViewHolder>(){
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): FrameViewHolder {
        val inflater = parent.context.getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater
        val binding = ItemFrameBinding.inflate(inflater, parent, false)
        return FrameViewHolder(binding)

    }

    override fun getItemCount(): Int {
        return list.size
    }

    override fun onBindViewHolder(holder: FrameViewHolder, position: Int) {
        holder.bind(list[position])

    }

}


data class FrameItem(
    val uri : Uri
)

class FrameViewHolder(private val binding:ItemFrameBinding) : RecyclerView.ViewHolder(binding.root){
    fun bind(item : FrameItem){
        binding.frameImageView.setImageURI(item.uri)
    }
}

 

 

activity 에서 adapter 연결 및, 받은 데이터 연결

// ex) 이미지를 뷰페이저로 구현 (갤러리처럼 한장한장씩 보게.)
val images = (intent.getStringArrayExtra("images") ?: emptyArray())
            .map{uriString -> FrameItem(Uri.parse(uriString))}
            
val frameAdapter = FrameAdapter(images)

binding.viewPager.adapter = frameAdapter

뷰페이져는 보통 탭과 함께 많이 사용됨.

1. 탭 레이아웃 추가 com.google.android.material.tabs.TabLayout
2. 액티비티에서 탭레이아웃과 뷰페이져 연결 (TabLayoutMediator)

TabLayoutMediator(
            binding.tabLayout,
            binding.viewPager,
        ){  tab, position ->
            binding.viewPager.currentItem = tab.position
        }.attach()
        
        
 // tab 의 텍스트도 수정 가능
 TabLayoutMediator(binding.tabLayout,binding.viewPager) { tab, position ->
            run {
                val textView = TextView(this@MainActivity)
                textView.text = "position $position"
                textView.gravity = Gravity.CENTER
//                tab.text = "position $position"
                tab.customView = textView
            }
        }.attach()

 

 3. 연결은 됐는데 비주얼적으로 확실하게 보이지 않음.  --> 아래 점으로 표시해주기

ic_dot_unselected.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:thickness="3dp"
    android:innerRadius="0dp"
    android:useLevel="false"
    >
    <solid android:color="@color/gray"/>
</shape>

black 일때 선택. gray 비선택. (2개파일)
innerRadius 를 넣어줘야 조그맣게 나옴

selector_tab.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_dot_selected" android:state_selected="true"/>
    <item android:drawable="@drawable/ic_dot_unselected" android:state_selected="false"/>
</selector>

• 탭레이아웃에 tabIndicator=@null 로 설정 (아래 디폴트 라인으로 나오던 것)
• 탭레이아웃에 app:tabBackground="@drawable/selector_tab” 추가

 

이 예시는 RecyclerViewAdapter 를 사용한 예시임.

---

FragmentStateAdapter 사용한 Adapter

class ViewPagerAdapter(private val mainActivity: MainActivity) : FragmentStateAdapter(mainActivity) {
    // 뷰페이저 총 페이지 수.
    override fun getItemCount(): Int {
        return 3
    }

    override fun createFragment(position: Int): Fragment {
    	// 뷰페이저 선택시 해당 프래그먼트로.
        return when(position) {
            0-> {
                WebViewFragment()
            }

            1 ->{
                BFragment()
            }

            else -> {
                WebViewFragment()
            }

        }
    }

}