ViewPager2基础介绍

ViewPager2

viewPager2如今已经发布到1.0.0-beta04，它相较于viewPager我认为比较重大的改善就是采用RecyclerView的Adapter，这使得它能够很方便的动态添加，移除，变动item，这在老版本的ViewPager中是比较麻烦的

使用

1. 添加依赖

dependencies {
    implementation "androidx.viewpager2:viewpager2:1.0.0-beta04"
}
复制代码

2. layout中添加

<androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewPager2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
复制代码

4. 添加具体的子layout布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.appcompat.widget.AppCompatTextView
        android:id="@+id/tvTitle"
        android:textColor="@android:color/white"
        android:layout_width="wrap_content"
        android:layout_centerInParent="true"
        tools:text= "item"
        android:textSize="32sp"
        android:layout_height="wrap_content" />

</RelativeLayout>
复制代码

3. 为ViewPager2建立Adapter类，不一样于ViewPager，咱们可使用RecyclerView.Adapter

class ViewPagerAdapter : RecyclerView.Adapter<PagerVH>() {

    private val colors = intArrayOf(
        android.R.color.black,
        android.R.color.holo_red_light,
        android.R.color.holo_blue_dark,
        android.R.color.holo_purple
    )

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PagerVH =
        PagerVH(LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false))

    override fun getItemCount(): Int = colors.size

    override fun onBindViewHolder(holder: PagerVH, position: Int) = holder.itemView.run {
        tvTitle.text = "item $position"
        container.setBackgroundResource(colors[position])
    }
}

class PagerVH(itemView: View) : RecyclerView.ViewHolder(itemView)
复制代码

将ViewPager2和adapter关联

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        viewPager2.adapter = ViewPagerAdapter()
    }
}
复制代码

看起来是否是很是简单，使用方法基本和RecyclerView相同

垂直滑动

若是以前在viewpager中使用垂直滑动只可以用第三方库，如今使用ViewPager2，咱们能够很方便的切换滑动方向

viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL
复制代码

使用FragmentStateAdapter

同样能够在ViewPager2中搭配fragments使用

• 首先，让咱们建立一个fragment

class PagerFragment : Fragment() {

    override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
        return inflater.inflate(R.layout.item_page, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        arguments?.let {
            container.setBackgroundResource(it.getInt("color"))
            tvTitle.text = "Item ${it.getInt("position")}"
        }
    }
}
复制代码

• 而后建立一个Adapter

class ViewPagerFragmentStateAdapter(fm: FragmentManager) : FragmentStateAdapter(fm) {

    private val colors = intArrayOf(
        android.R.color.black,
        android.R.color.holo_red_light,
        android.R.color.holo_blue_dark,
        android.R.color.holo_purple
    )

    override fun getItem(position: Int): Fragment = PagerFragment().apply {
        arguments = bundleOf(
            "color" to colors[position],
            "position" to position
        )
    }

    override fun getItemCount(): Int = colors.size
}
复制代码

• 而后在Ativity中绑定

viewPager2.adapter = ViewPagerFragmentStateAdapter(supportFragmentManager)
复制代码

OnPageChangeCallback

若是用以前的viewPager,若是咱们要添加监听器，是这样的:

oldViewPager.addOnPageChangeListener(object:ViewPager.OnPageChangeListener{
    override fun onPageScrollStateChanged(state: Int) {
        // useless
    }

    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
        // useless too
    }

    override fun onPageSelected(position: Int) {
        // useful
    }
})
复制代码

不得不重写三个方法，而ViewPager2中，使用OnPageChangeCallback能够很方便的添加监听器

viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    override fun onPageSelected(position: Int) {
        super.onPageSelected(position)
        // No boilerplate, only useful
    }
})
复制代码

如何搭配tablayout

若是想要搭配tablayout,使用一个TabLayoutMediator类就能够了

TabLayoutMediator(tabLayout, viewPager) { tab, position ->
            tab.text = Card.DECK[position].toString()
        }.attach()
复制代码

如何实现动态增添item

直接像RecyclerView同样动态添加，删除就能够了

adapter.notifyItemRangeInserted(position, count);
adapter.notifyItemRangeRemoved(position, count);
adapter.notifyItemMoved(fromPosition, toPosition);
adapter.notifyItemRangeChanged(position, count, payload);
复制代码

item过渡动画：PageTransformer

当用户由一个item切换到另一个item，可不能够有一些额外的动画呢。

基于ViewPager2.PagerTransformer能够实现这样的功能。

主要是建立一个类继承ViewPager2.PageTransformer，重写transformPage()这个方法，这个方法有两个参数，一个是View, 一个position(float)，具体的使用就是position参数表明了此刻用户滑动到了哪一个位置，而后根据这个位置position去计算你想要让View所作的变换，这些变换包括但不限于

• rotation
• translationX/Y
• scaleX/Y

例如

private val mAnimator = ViewPager2.PageTransformer { page, position ->
        val absPos = Math.abs(position)
        page.apply {
            rotation = if (rotateCheckBox.isChecked) position * 360 else 0f
            translationY = if (translateY) absPos * 500f else 0f
            translationX = if (translateX) absPos * 350f else 0f
            if (scaleCheckBox.isChecked) {
                val scale = if (absPos > 1) 0F else 1 - absPos
                scaleX = scale
                scaleY = scale
            } else {
                scaleX = 1f
                scaleY = 1f
            }
        }
    }
复制代码

以后再和viewPager绑定

viewPager.setPageTransformer(mAnimator)
复制代码

项目：

• google官方在github上有一个项目，展现了ViewPager2所能实现的一些相效果：google官方项目

参考文章:

• Medium