5주차 복습 메모

Glide라이브러리, ViewPager2

https://dreaminsweetpotato.tistory.com/118

5주차 실습(1)-Glide 라이브러리, ViewPager2

 

 

1. glide 사용설정&뷰바인딩 설정

2. xml에서 뷰페이저 레이아웃 만들고

3. 뷰페이저에 출력할 프래그먼트의 레이아웃 만들고

4. 어댑터 구현

class ImageSliderVPAdapter(val context: Context, val imgList : MutableList<String>)

형식은 그냥 익히기

4-1. inner class로 ViewHolder 구현

fun bind 구현

4-2. 메서드들 구현

onCreateViewHolder는 바인딩한 뷰를 inflate

getItemCount는 아이템사이즈 리턴

onBindViewHolder는 뷰 스크롤해서 뷰홀더 객체 재사용할때마다 호출됨.

왜? 안에 있는 데이터 바꾸기 위해!

이때 onBindViewHolder는 ViewHolder에서 구현한 bind 함수를 호출함

 

5. MainActivity 구현

5-1. 뷰바인딩하고 데이터 담을 자료구조 선언

5-2. onCreate에서 바인딩&inflate 해주고 setContentView(binding.root)

5-3. initDummyData()로 자료구조에 데이터 넣기

5-4. initViewPager()로 어댑터 연결해줌

(바인딩한 뷰의 자체 어댑터를, 내가 만든 어댑터 파일에 context와 이미지리스트 전달한 것.

그 둘을 연결)

5-5. 이벤트 내용 설정해줌

fun initViewPager() 안에서 호출먼저하고 내용 선언은 밖에서 함

binding.imageAreaVp.registerOnPageChangeCallback

// 뷰페이저의 여러 속성 중 하나로, 인자로 콜백 함수를 넣어준다.

 

 

TabLayout

https://dreaminsweetpotato.tistory.com/119

5주차 실습(2)-TabLayout

1. 뷰바인딩 설정하고

2. glide사용안할거니까 이미지파일을 drawable에 넣어두기

3. 레이아웃바인딩해주고

4. 메인 xml에서 tabLayout 태그 넣고

(다양한 속성 참고.

tabIndicatorcolor/tabIndicatorFullWidth/tabRippleColor/tabTextColor 등)

5. 탭 레이아웃 아래에 뷰페이저도 추가해주기

6. 뷰페이저에 들어갈 프래그먼트들 만들어주기(아이템, 텍스트)

❗️바인딩 문법, 액티비티 vs 프래그먼트

액티비티는

binding = ActivityMainBinding.inflate(layoutinflater)

프래그먼트는

binding = FragmentImageBinding.inflate(inflater, container, false)

override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = FragmentImageBinding.inflate(inflater, container, false)
        return binding.root
    }

7. 프래그먼트 레이아웃 짜고

 

🧐이론복습

뷰페이저 사용을 위해서는 뷰페이저 어댑터가 있어야 하고, 탭레이아웃에 뷰페이저를 접목시키기 위해서는 TabLayout Mediator라는 것을 사용함.

8. 탭레이아웃뷰페이저어댑터 만들기

그냥 뷰페이저 어댑터는 리사이클러뷰의 어댑터를 상속받는 형식이었고

class ImageSliderVPAdapter(val context: Context, val imgList : MutableList<String>) : RecyclerView.Adapter<ImageSliderVPAdapter.ViewHolder>()

이번에는 FragmentStateAdapter를 상속받도록 함

class TabLayoutVPAdapter(activity: FragmentActivity) : FragmentStateAdapter(activity)

TabLayoutVPAdapter는 인자로 Fragment Activity를 받고 그 activity를 FragmentStateAdapter에 생성자로 넣어줌

 

9. 상속받았으므로 메서드 오버라이드

override fun getItemCount(): Int = 2

override fun createFragment(position: Int): Fragment{}

// TabLayout에 어떤 Fragment를 출력할 것인가에 대한 메서드.

when 구문 이용해서 position 값을 받아서

0일 때는 ImageFragment 실행, 나머지일 때는 TextFragment 실행 ➡️막혔던 부분

// TabLayoutVPAdapter

package com.iyr.tablayoutpractice

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter

class TabLayoutVPAdapter(activity: FragmentActivity) : FragmentStateAdapter(activity) {
    override fun getItemCount(): Int = 2

    override fun createFragment(position: Int): Fragment {
        return when(position) {
            0 -> ImageFragment()
            else -> TextFragment()
        }
    }

}

 

10. 이제 메인액티비티에서 합쳐주자

10-1. initView()

onCreate(){}안에 호출 먼저 하고 onCreate() 밖에 내용 선언.

 

일단 뷰페이저와 탭레이아웃을 연동하기 이전에 어댑터를 반드시! 부착해줘야함.

binding.mainVp.adapter = TabLayoutVPAdapter(this)

// 이때 TabLayoutVPAdapter는 생성자로 FragmentActivity를 필요로 하기 때문에 그냥 this 라고 해줌

 

10-2. 어댑터 연결 후에 tabLayoutMediator로 뷰페이저와 탭레이아웃 연동하기

TabLayoutMediator(binding.mainTb, binding.mainVp)

인자

1) 탭레이아웃

2) 뷰페이저

3) 탭레이아웃-뷰페이저 연결 전략에 대한 함수(마지막 매개변수가 함수일 때는 중괄호를 열어서 익명함수를 넣어줌으로써 구현할 수 있음)

// initView 밖에 tabLayout 에 들어갈 정보 먼저 (전역변수로) 세팅해주기
private val tabList = arrayListOf("이미지", "텍스트")

private fun initView() {
...

    TabLayoutMediator(binding.mainTb, binding.mainVp) { tab, position ->
        tab.text = tabList[position]
    }.attach()
}

 

tab.text = tabList[position]

탭의 뷰의 텍스트정보를 tabList라는 리스트의 position 값으로 세팅하겠다.

 

그리고 탭레이아웃 구현했으면 꼭 끝에 attach 메서드 구현해줘야 정상적으로 적용됨

// MainActivity 완성

package com.iyr.tablayoutpractice

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import com.google.android.material.tabs.TabLayoutMediator
import com.iyr.tablayoutpractice.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {
    private lateinit var binding: ActivityMainBinding
    private val tabList = arrayListOf("이미지", "텍스트")

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        initView()
    }

    private fun initView() {
        binding.mainVp.adapter = TabLayoutVPAdapter(this)
        
        TabLayoutMediator(binding.mainTb, binding.mainVp) { tab, position ->
            tab.text = tabList[position]
        }.attach()
    }
}

 

11. 이미지 프래그먼트에 이미지 세팅해주기

 

// ImageFragment.kt 이미지 세팅
package com.iyr.tablayoutpractice

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import com.iyr.tablayoutpractice.databinding.FragmentImageBinding

class ImageFragment : Fragment() {

    private lateinit var binding: FragmentImageBinding // 바인딩

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        binding = FragmentImageBinding.inflate(inflater, container, false)
        return binding.root // 뷰 객체화
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        initImageView()
    }

    private fun initImageView() { // 이미지뷰에 리소스값 넣기
        binding.imageIv.setImageResource(R.drawable.bear)
    }


}