Android开发 ViewPager2

米姥姥 發表於 2020-8-19 13:58:00

<h1>前言</h1>
　　ViewPage2是ViewPage的取代者，解决了一些解决了其前辈ViewPage的大部分难题，包括从右到左的布局支持，垂直方向，可修改的Fragment集合等。从易用性上来说ViewPage2的确会比ViewPage更简单，并且它实际上是使用RecyclerView实现的。源码里可以很容易看到，另外它的适配器也是RecyclerView.Adapter。
<h1>特别注意</h1>
在developer官网上，已经说明了 ViewPager2在导航键翻页（TV模式），根本没实现。所有，如果你的是TV应用，原则上不建议使用ViewPager2开发（TV应用用它浪费时间），而是使用ViewPager。
这下面说需要完善，都2022年了，居然还没完善。本着钻研的精神（钻牛角尖），本博客最下面给了一个不太稳定的方法实现焦点的触控。 
<img src="https://img2022.cnblogs.com/blog/1497956/202204/1497956-20220408112558646-421558356.png" alt="" loading="lazy">
 
 
<h1>依赖</h1>
<div class="cnblogs_code">
<pre>dependencies {
 implementation "androidx.viewpager2:viewpager2:1.0.0"
}</pre>
</div>
<h1>使用RecyclerView.Adapter</h1>
使用场景一般是首页图片轮播,或者引导页面
xml
<div class="cnblogs_code">
<pre><androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".viewpage2.ViewPager2Activity">

<androidx.viewpager2.widget.ViewPager2
 android:id="@+id/imagePager"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="horizontal" />

</androidx.constraintlayout.widget.ConstraintLayout></pre>
</div>
Adapter
<div class="cnblogs_code">
<pre>class ViewPager2Adapter1() : RecyclerView.Adapter<ViewPager2Adapter1.ViewHolder>() {
val mImageList = mutableListOf<Int>()

fun refreshData(list :MutableList<Int>?){
 list?.let {
 mImageList.addAll(list)
 }
 notifyDataSetChanged()
}

class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
 val imageView = itemView.findViewById<ImageView>(R.id.image)
}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewPager2Adapter1.ViewHolder {
 return ViewHolder(LayoutInflater.from(parent.context).inflate(R.layout.item_view_pager_demo_1, parent, false))
}

override fun onBindViewHolder(holder: ViewPager2Adapter1.ViewHolder, position: Int) {
 holder.imageView.setImageResource(mImageList)
}

override fun getItemCount(): Int = mImageList.size
}</pre>
</div>
activity
<div class="cnblogs_code">
<pre>class ViewPager2Activity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 setContentView(R.layout.activity_view_pager2)
 val adapter = ViewPager2Adapter1()
 val imagePager = findViewById<ViewPager2>(R.id.imagePager)
 imagePager.adapter = adapter
 adapter.refreshData(mutableListOf(R.drawable.ic_landscape_1, R.drawable.ic_landscape_2, R.drawable.ic_landscape_3, R.drawable.ic_landscape_4))

}
}</pre>
</div>
效果图
<img src="https://img2022.cnblogs.com/blog/1497956/202203/1497956-20220303164438063-1262273333.gif" alt="">
 
<h1> </h1>
<h1>使用FragmentStateAdapter</h1>
使用场景一般是主页tab分页,每一页都是Fragment
<div class="cnblogs_code">
<pre>class MessageAdapter(fragments: List<Fragment>, fragment: Fragment) : FragmentStateAdapter(fragment) {
private var mFragments :List<Fragment> = fragments

override fun getItemCount() = mFragments.size

override fun createFragment(position: Int) = mFragments
}</pre>
</div>
上面的代码是在Fragment中使用,如果需要在activity中使用就使用另一个构造方法
<div class="cnblogs_code">
<pre>public FragmentStateAdapter(@NonNull FragmentActivity fragmentActivity)</pre>
</div>
然后是添加到ViewPager2里
<div class="cnblogs_code">
<pre> val fragmentList = listOf(AlertFragment.newInstance(), FamilyFragment.newInstance(), NoticeFragment.newInstance())
 val adapter = MessageAdapter(fragmentList, this)
 mBinding.viewPager.adapter = adapter</pre>
</div>
<h1>与TabLayout配合使用<code dir="ltr"> </code></h1>
<div class="cnblogs_code">
<pre>TabLayout tabLayout = view.findViewById(R.id.tab_layout);
 new TabLayoutMediator(tabLayout, viewPager,
 (tab, position) -> tab.setText("OBJECT " + (position + 1))
 ).attach();</pre>
</div>
 但是请注意!在添加数据的时候不需要在newTab了,参考如下代码
<div class="cnblogs_code">
<pre> override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
 super.onViewCreated(view, savedInstanceState)
 val fragmentList = listOf(AlertFragment.newInstance(), FamilyFragment.newInstance(), NoticeFragment.newInstance())
 val adapter = MessageAdapter(fragmentList, this)
 mBinding.viewPager.adapter = adapter
 val tabIconArray = intArrayOf(R.drawable.message_ic_alert_3, R.drawable.message_ic_family_3, R.drawable.message_ic_notice_3)
 TabLayoutMediator(mBinding.tabLayout, mBinding.viewPager) { tab, position ->

 }.attach()

 for ((index, itemData)in tabIconArray.withIndex()) {
 //这里不需要newTab(),因为上面的TabLayoutMediator已经创建好了tab
 val tab: TabLayout.Tab? = mBinding.tabLayout.getTabAt(index)
 val binding = MessageItemMessageBinding.inflate(layoutInflater, mBinding.tabLayout, false)
 binding.icon.setImageResource(itemData)
 tab?.customView = binding.root
 mItemRedDotArray.add(binding.redDot)
 }
 initListener()
}</pre>
</div>
<h1>禁用左右滑动切换</h1>
<div class="cnblogs_code">
<pre>viewPager.setUserInputEnabled(false)</pre>
</div>
<h1>设置方向</h1>
横
<div class="cnblogs_code">
<pre>android:orientation="horizontal"</pre>
</div>
竖
<div class="cnblogs_code">
<pre>android:orientation="vertical"</pre>
</div>
<h1>设置滑动方向</h1>
从左到右
<div class="cnblogs_code">
<pre>android:layoutDirection="ltr"</pre>
</div>
从右到左
<div class="cnblogs_code">
<pre>android:layoutDirection="rtl"</pre>
</div>
<h1>翻页结果监听</h1>
<div class="cnblogs_code">
<pre> imagePager.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {

 override fun onPageScrollStateChanged(state: Int) {
 super.onPageScrollStateChanged(state)
 /**
 表示ViewPager2处于空闲、稳定状态。当前页面完全可见，并且没有动画正在进行中。
 SCROLL_STATE_IDLE = 0
 表示ViewPager2当前正在被用户拖动，或者通过虚假拖动功能以编程方式进行拖动。
 SCROLL_STATE_DRAGGING = 1
 表示ViewPager2正在稳定到最终位置。
 SCROLL_STATE_SETTLING = 2
 */
 Log.e("zh", "滚动状态变化 : state = $state")
 }

 override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
 super.onPageScrolled(position, positionOffset, positionOffsetPixels)
 /**
 position – 当前显示的第一页的位置索引。如果 positionOffset 不为零，则页面位置+1 将可见。
 positionOffset – 表示在位置处与页面的偏移量, 取值范围
 positionOffsetPixels – 以像素为单位的值，指示与位置的偏移量。
 */
 Log.e("zh", "正在翻页滚动 : position = $position positionOffset = $positionOffset positionOffsetPixels = $positionOffsetPixels")

 }

 override fun onPageSelected(position: Int) {
 super.onPageSelected(position)
 Log.e("zh", "当前页面 : position = $position")
 }
 })</pre>
</div>
<h1>翻页动画</h1>
ViewPager2的翻页动画稍微一点点复杂,需要一些耐心理解.
首先动画的实现是依靠 ViewPager2.PageTransformer 接口回调实现的, 在下面的代码中有注释说明,
<div class="cnblogs_code">
<pre> imagePager.setPageTransformer(object : ViewPager2.PageTransformer {
 override fun transformPage(page: View, position: Float) {
 if (position < -1) { // 范围 -无穷数到 -1
 // 此页面在左侧屏幕外,在这个位置的view已经看不到了,一般不需要处理,只要给初始默认值就行
 Log.e("zh", "此页面在左侧屏幕外: $position")
 } else if (position <= 1) { //范围-1 到 1
 /*
 * 在这个位置的view正在在屏幕中显示,是需要实现动画效果的view
 * 这里其实有2个view会交替回调, 分别是position小于0的左边的view 与 position大于0的右边的view
 */
 if (position < 0) {
 //viewpager左边item的显示
 Log.e("zh", "viewpager左边item的显示位置 = $position view的内存地址 = ${page}")

 } else {
 //viewpager右边item的显示
 Log.e("zh", "viewpager右边item的显示位置 = $position view的内存地址 = ${page}")
 }

 } else { //范围 1 到 +无穷数
 // 此页面在右侧屏幕外,在这个位置的view已经看不到了,一般不需要处理,只要给初始默认值就行
 Log.e("zh", "此页面在右侧屏幕外: $position")
 }
 }
 })</pre>
</div>
如果你看了上面的注释依然不太明白,我们可以用图片解释一下
<h3>图片1</h3>
<img src="https://img2022.cnblogs.com/blog/1497956/202203/1497956-20220303201153728-1934604448.png" alt="" width="714" height="598" loading="lazy">
<h3>图片2</h3>
理解这张图片很重要! 这张图片中的效果出现的时候,就是position 正在返回 -1 到 1的值. 
这正是我们需要实现动画效果(透明度,放大缩小,旋转抛出等等效果)的时候
 <img src="https://img2022.cnblogs.com/blog/1497956/202203/1497956-20220303201908806-1457385566.png" alt="" loading="lazy">
<h2>举例一个淡入淡出动画效果</h2>
在上面说明了动画的取值范围后,这里举例一个最容易实现的动画,淡入淡出动画.
<div class="cnblogs_code">
<pre> imagePager.setPageTransformer(object : ViewPager2.PageTransformer {
 override fun transformPage(page: View, position: Float) {
 if (position < -1) {
 page.alpha = 0f

 } else if (position <= 1) { //范围-1 到 1
 /*
 * 求绝对值,作为动画的变量值
 */
 val animationValue: Float = Math.abs(position)
 if (position < 0) {
 //viewpager左边item的显示
 page.alpha = 1 - animationValue
 } else {
 //viewpager右边item的显示
 page.alpha = 1 - animationValue
 }

 } else { 　　　　　　　　　　　　page.alpha = 0f
 }
 }
 })</pre>
</div>
效果图
<img src="https://img2022.cnblogs.com/blog/1497956/202203/1497956-20220303210052429-2020853800.gif" alt="">
<h1>举一反三实现旋转与缩小放大动画效果</h1>
代码
<div class="cnblogs_code">
<pre> override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 setContentView(R.layout.activity_view_pager2)
 val adapter = ViewPager2Adapter1()
 val imagePager = findViewById<ViewPager2>(R.id.imagePager)
 imagePager.adapter = adapter
 adapter.refreshData(mutableListOf(R.drawable.ic_landscape_1, R.drawable.ic_landscape_2, R.drawable.ic_landscape_3, R.drawable.ic_landscape_4))
 imagePager.setPageTransformer(object : ViewPager2.PageTransformer {
 override fun transformPage(page: View, position: Float) {
 if (position < -1) {
 page.alpha = 0f

 } else if (position <= 1) { //范围-1 到 1
 /*
 * 求绝对值,作为动画的变量值
 */
 val animationValue: Float = Math.abs(position)
 if (position < 0) {
 //viewpager左边item的显示
 page.alpha = 1 - animationValue
 setRotate(page, animationValue)
 setScale(page, animationValue)
 } else {
 //viewpager右边item的显示
 page.alpha = 1 - animationValue
 setRotate(page, animationValue)
 setScale(page, animationValue)
 }

 } else {
 page.alpha = 0f
 }
 }
 })
}

/**
* 旋转效果
*/
fun setRotate(view: View, value: Float) {
 view.rotationX = 0.5f
 view.rotationY = 0.5f
 view.rotation = 360 * value
}

/**
* 缩放效果
*/
fun setScale(view: View, value: Float) {
 view.scaleX = 1 - value
 view.scaleY = 1 - value
}</pre>
</div>
效果图
<img src="https://img2022.cnblogs.com/blog/1497956/202203/1497956-20220303210459985-323161782.gif" alt="">
<h2>看看google给的例子</h2>
例子1
<div class="cnblogs_code">
<pre>public class DepthPageTransformer implements PageTransformer {
private static float MIN_SCALE = 0.75f;

@SuppressLint("NewApi")
@Override
public void transformPage(View view, float position) {
 int pageWidth = view.getWidth();
 if (position < -1) { // [-Infinity,-1)//This page is way off-screen to the left.
 view.setAlpha(0);
 } else if (position <= 0) { // [-1,0]Use //the default slide transition when moving to the left page
 view.setAlpha(1);
 view.setTranslationX(0);
 view.setScaleX(1);
 view.setScaleY(1);
 } else if (position <= 1) { // (0,1]// Fade the page out.
 view.setAlpha(1 - position);
 // Counteract the default slide transition
 view.setTranslationX(pageWidth * -position);
 // Scale the page down (between MIN_SCALE and 1)
 float scaleFactor = MIN_SCALE + (1 - MIN_SCALE)
 * (1 - Math.abs(position));
 view.setScaleX(scaleFactor);
 view.setScaleY(scaleFactor);
 } else { // (1,+Infinity]
 // This page is way off-screen to the right.
 view.setAlpha(0);

 }
}

}</pre>
</div>
 效果图
<img src="https://img2022.cnblogs.com/blog/1497956/202203/1497956-20220304165728286-788027352.gif" alt="">
 
例子2
<div class="cnblogs_code">
<pre>public class ZoomOutPageTransformer implements PageTransformer {
private static float MIN_SCALE = 0.85f;

private static float MIN_ALPHA = 0.5f;

@Override
public void transformPage(View view, float position) {
 int pageWidth = view.getWidth();
 int pageHeight = view.getHeight();

 if (position < -1) { // [-Infinity,-1)
 // This page is way off-screen to the left. 
 view.setAlpha(0);
 } else if (position <= 1) { // [-1,1]
 // Modify the default slide transition to
 // shrink the page as well 
 float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
 float vertMargin = pageHeight * (1 - scaleFactor) / 2;
 float horzMargin = pageWidth * (1 - scaleFactor) / 2;
 if (position < 0) {
 view.setTranslationX(horzMargin - vertMargin / 2);
 } else {
 view.setTranslationX(-horzMargin + vertMargin / 2);
 }
 // Scale the page down (between MIN_SCALE and 1) 
 view.setScaleX(scaleFactor);
 view.setScaleY(scaleFactor);
 // Fade the page relative to its size. 
 view.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE)
 / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
 } else { // (1,+Infinity]
 // This page is way off-screen to the right. 
 view.setAlpha(0);
 }
}
} </pre>
</div>
效果图
<img src="https://img2022.cnblogs.com/blog/1497956/202203/1497956-20220304165913682-68116882.gif" alt="">
<h1>背景图片与ViewPager2 左右滑动的联动动画实现</h1>
xml
<div class="cnblogs_code">
<pre> <ImageView
 android:id="@+id/bgImage"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:scaleX="1.1"
 android:scaleY="1.1"
 android:background="@mipmap/launcher_ic_bg" />

<androidx.viewpager.widget.ViewPager
 android:id="@+id/viewPage"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintTop_toBottomOf="parent"
 app:layout_constraintVertical_bias="1.0"
 tools:layout_editor_absoluteX="0dp" /></pre>
</div>
java
<div class="cnblogs_code">
<pre> mBinding.viewPage.addOnPageChangeListener(object : ViewPager.OnPageChangeListener {
 var lastPosition = 0
 var animationValue = 50f
 lateinit var objectAnimator : ObjectAnimator
 override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
 mDotsAdapter.setSelectItem(position)
 if (lastPosition == position){
 return
 }
 if (lastPosition < position){
 //右
 animationValue = animationValue -50f
 objectAnimator= ObjectAnimator.ofFloat(mBinding.bgImage,"translationX", animationValue)
 } else{
 //左
 animationValue = animationValue + 50f
 objectAnimator= ObjectAnimator.ofFloat(mBinding.bgImage,"translationX", animationValue)
 }
 objectAnimator.duration = 500
 objectAnimator.start()
 lastPosition = position
 }

 override fun onPageSelected(position: Int) {
 }

 override fun onPageScrollStateChanged(state: Int) {
 }
 })</pre>
</div>
<h1>TV应用焦点与ViewPager2的兼容处理</h1>
在developer官网上，已经说明了 ViewPager2在导航键翻页（TV模式），根本没实现。所有，如果你的是TV应用，原则上不建议使用ViewPager2开发，而是使用ViewPager。如果你非得杆上ViewPager2，下面这个代码也提供一个实现思路。但是十分不稳定
TV应用特别是支持触控又支持遥控器的TV设备，如何让焦点翻页？特别是如何只使用遥控器方向键的情况下翻页呢？
<div class="cnblogs_code">
<pre> override fun onCreate(savedInstanceState: Bundle?) {
 super.onCreate(savedInstanceState)
 setContentView(mBinding.root)
 //注册全局焦点监听 
 mBinding.root.getViewTreeObserver().addOnGlobalFocusChangeListener(focusChangeListener)
}

override fun onDestroy() {
 super.onDestroy()
 mBinding.root.viewTreeObserver.removeOnGlobalFocusChangeListener(focusChangeListener)
}

private val focusChangeListener: ViewTreeObserver.OnGlobalFocusChangeListener = object : ViewTreeObserver.OnGlobalFocusChangeListener {
 override fun onGlobalFocusChanged(oldFocus: View?, newFocus: View?) {
 Log.e("zh", "newFocus: ${newFocus} ")
 if (newFocus != null) {
 /**
 * viewPage里的当前焦点view的第3个父类其实是RecyclerView,这里需要准确找到它。
 * 当前你也可以使用另一种方法，那就是继承ViewPage，然后让mRecyclerView 全局变量暴露到外包
 */
 mBinding.viewPage.findFocus()?.parent?.parent?.parent?.let { recyclerView ->
 if (recyclerView is RecyclerView) {
 /**
 * 重点方法：findContainingViewHolder
 * 根据当前焦点view找到当前的ViewHolder
 */
 val viewHolder = recyclerView.findContainingViewHolder(mBinding.viewPage.findFocus())
 if (viewHolder != null) {
 if (viewHolder.layoutPosition != RecyclerView.NO_POSITION) {
 //使其翻页
 mBinding.viewPage.currentItem = viewHolder.layoutPosition
 }
 }
 }
 }
 }
 }
}</pre>
</div>
 
<h1>ViewPager2的已知bug</h1>
 因为ViewPager与SwipeRefreshLayout冲突导致RecyclerView或者其他列表布局的item无法点击的问题
 
End

</div>
<div id="MySignature" role="contentinfo">
<div style="text-align: center">
本文来自博客园，作者：观心静，转载请注明原文链接：https://www.cnblogs.com/guanxinjing/p/13528962.html 
<div style="color:orange;font-size:16px;">本文版权归作者和博客园共有，欢迎转载，但必须给出原文链接，并保留此段声明，否则保留追究法律责任的权利。 </div>
</div> 
来源：https://www.cnblogs.com/guanxinjing/p/13528962.html

頁: [1]

琼殿技术论坛's Archiver

Android开发 ViewPager2