ViewPager란 무엇이고, 어떤 기능을 할까요?
ViewPager가 사용된 예시에는 무엇이 있을까요?
ViewPager와 ViewPager2의 차이는 무엇일까요?
android:orientation
설정으로 ****세로 페이징 지원android:layoutDirection
설정으로 오른쪽에서 왼쪽(RTL) 페이징 지원ViewPager2에서 사용할 수 있는 속성들은 무엇이 있을까요?
<androidx.viewpager2.widget.ViewPager2
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
**android:orientation="vertical"
android:layoutDirection="rtl"**/>
android:orientation
페이징 방향(수직,수평) 설정android:layoutDirection
RTL 페이징 수동설정 가능라이브러리 추가
implementation "androidx.viewpager2:viewpager2:1.0.0"
ViewPager2를 사용할 Activity/Fragment에 배치
<!-- ViewPager2를 이용하기 위해 어떤 라이브러리를 사용해야 할까요 -->
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/view_pager
android:width="match_parent"
android:height="500dp" />
ViewPager2에서 사용할 Adapter 설정
rough 한 방법
// 3개의 화면을 구성한다고 가정
// OneFragment, TwoFragment, ThreeFragment
class ViewPageAdapter(fragmentActivity: FragmentActivity): FragmentStateAdapter(fragmentActivity) {
// 페이지 갯수 설정
override fun getItemCount(): Int = 3
// 불러올 Fragment 정의
override fun createFragment(position: Int): Fragment {
return when (position) {
0 -> HomeFragment()
1 -> SecondFragment()
2 -> ThirdFragment()
else -> throw IllegalArgumentException("Invalid position $position")
}
}
}
// MainActivity
class MainActivity : AppCompatActivity() {
private lateinit var binding : ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
binding.viewpage.adapter = ViewPageAdapter(this)
}
}
동적인 방법
// 3개의 화면을 구성한다고 가정
// OneFragment, TwoFragment, ThreeFragment
class ViewPageAdapter2(fragmentActivity: FragmentActivity): FragmentStateAdapter(fragmentActivity) {
var fragments : ArrayList<Fragment> = ArrayList()
// 페이지 갯수 설정
override fun getItemCount(): Int = fragments.size
// 불러올 Fragment 정의
override fun createFragment(position: Int): Fragment {
return fragments[position]
}
fun addFragment(fragment: Fragment) {
fragments.add(fragment)
notifyItemInserted(fragments.size-1)
}
fun removeFragment() {
fragments.removeLast()
notifyItemRemoved(fragments.size)
}
}
// MainActivity
class MainActivity : AppCompatActivity() {
private lateinit var binding : ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
val adapter = ViewPageAdapter2(this)
adapter.addFragment(HomeFragment())
adapter.addFragment(SecondFragment())
adapter.addFragment(ThirdFragment())
binding.viewpage.adapter = adapter
}
}
class ViewpageAdapter(val datas : Array<Int>) : RecyclerView.Adapter<ViewpageAdapter.ViewHolder>() {
inner class ViewHolder(private val binding : ViewpagePostBinding) : RecyclerView.ViewHolder(binding.root){
fun bind(item : Int){
binding.ivImage.setImageResource(item)
}
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
holder.bind(datas[position])
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val binding = ViewpagePostBinding.inflate(LayoutInflater.from(parent.context),parent,false)
return ViewHolder(binding)
}
override fun getItemCount(): Int {
return datas.size
}
}
// MainActivity
class MainActivity : AppCompatActivity() {
private lateinit var binding : ActivityMainBinding
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
binding = ActivityMainBinding.inflate(layoutInflater)
setContentView(binding.root)
val adapter = ViewpageAdapter(item.imgList)
binding.viewpager.adapter = adapter
}
}
TabLayout이란 무엇이고, 어떤 기능을 할까요?
TabLayout이 사용된 예시에는 무엇이 있을까요?
TabLayout에서 사용할 수 있는 속성들은 무엇이 있을까요?
<com.google.android.material.tabs.TabLayout
android:id="@+id/tabLayout"
android:layout_width="0dp"
android:layout_height="wrap_content"
app:tabIndicatorColor="색상"
app:tabIndicatorHeight="3dp"
app:tabIndicatorGravity="top | center | bottom | stretch"
app:tabGravity="fill"
app:tabRippleColor="@android:color/transparent"
>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Monday"
android:icon="@drawable/아이콘"/>
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tuesday" />
<com.google.android.material.tabs.TabItem
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Wednesday" />
</com.google.android.material.tabs.TabLayout>
→ TabLayout 전체 설정
→ TabItem 설정
Indicator란 무엇이고, 어떤 역할을 할까요?
ViewPager2에서 Indicator를 설정하려면 어떻게 해야할까요?
Indicator과 ViewPager2 연동하기
TabLayout과 ViewPager가 들어가는 XML 파일에 View 추가하기
<com.google.android.material.tabs.TabLayout
android:id="@+id/tab_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:tabIndicatorFullWidth="false"
app:tabSelectedTextColor="#3f3fff"
app:tabIndicatorColor="#3f3fff"
app:tabRippleColor="#00ff0000"/>
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="0dp"/>
ViewPager Adapter 구현하기
class ViewPageAdapter(fragmentActivity: FragmentActivity): FragmentStateAdapter(fragmentActivity) {
// 페이지 갯수 설정
override fun getItemCount(): Int = 3
// 불러올 Fragment 정의
override fun createFragment(position: Int): Fragment {
return when (position) {
0 -> HomeFragment()
1 -> SecondFragment()
2 -> ThirdFragment()
else -> throw IllegalArgumentException("Invalid position $position")
}
}
}
val viewPagerAdapter = ViewPagerAdapter(this)
binding.view_pager.adapter = viewPagerAdapter
TabLayoutMediator(binding.tab_layout, binding.view_pager){
// tab, position -> 적용하고 싶은 이벤트 or 명령들 작성
tab, position -> tab.text = tabTextList[position]
}.attach()
binding.viewpage.registerOnPageChangeCallback(object: ViewPager2.OnPageChangeCallback(){
override fun onPageScrolled(
position: Int,
positionOffset: Float,
positionOffsetPixels: Int
) {
super.onPageScrolled(position, positionOffset, positionOffsetPixels)
}
override fun onPageSelected(position: Int) {
super.onPageSelected(position)
}
override fun onPageScrollStateChanged(state: Int) {
super.onPageScrollStateChanged(state)
}
})
private val sliderImageHandler: Handler = Handler()
private val sliderImageRunnable = Runnable { binding.viewpage.currentItem = binding.viewpage.currentItem + 1 }
binding.viewpage.registerOnPageChangeCallback(object: ViewPager2.OnPageChangeCallback(){
override fun onPageSelected(position: Int) {
super.onPageSelected(position)
sliderImageHandler.removeCallbacks(sliderImageRunnable)
//자동 스크롤은 3초 당 한 번 넘어가도록
sliderImageHandler.postDelayed(sliderImageRunnable, 3000)
}
})
class ViewPageRecyclerAdapter(val datas : Array<Int>) : RecyclerView.Adapter<ViewPageRecyclerAdapter.ViewHolder>() {
inner class ViewHolder(private val binding : ViewpageItemBinding) : RecyclerView.ViewHolder(binding.root){
fun bind(item : Int){
binding.iv.setImageResource(item)
}
}
override fun onBindViewHolder(holder: ViewHolder, position: Int) {
holder.bind(datas[position % datas.size])
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
val binding = ViewpageItemBinding.inflate(LayoutInflater.from(parent.context),parent,false)
return ViewHolder(binding)
}
override fun getItemCount(): Int = Int.MAX_VALUE
}
하핳 ViewPager2 정보 찾다가, 이 글 발견해서 읽고 있었는데 진성님이셨네여!!!
글 잘 읽었습니다!!