ViewPager+Fragment，一屏展示多个Fragment，中间正常，两边漏一点

Posted 2022-12-06 夜尽天明89

功能需求：
1、有多个布局，要求滑动展示，中间大，两边小，两边小的布局，大部分在屏幕外，屏幕里面，漏出来一点，让用户知道可以滑动；
2、这多个布局，内容有差异，甚至，可能有较大差异；
3、在边缘处，也可以滑动。

类似画廊效果，其实网上有对应的，但是，细节地方，有些博客写的不全，我刚开始写，对着一两个博客写，总是出现奇怪的问题，或者没有效果。对比了不同的博客，才出来效果。为此，我写个博客，干脆把所有需要注意的细节，都写出来。一步到位。

本项目中，用到的 Viewpager 的 PageTransformer ，是借鉴自另外一个项目。那个项目中，有多种动画样式。有兴趣的，可以去看看。

后面的细节说明，请一定、一定、一定要读完

功能分析：
1、可以滑动，且每个布局之间，可能（现在或未来）有较大差异。使用 viewpager+Fragment
2、滑动附带变大、变小功能，使用 viewpager 的 setPageTransformer

项目地址

为了适应不同的情况。viewpager+Fragment，可以直接出现在Activity中，也可以嵌套出现在 Fragment 中，所以，两种情况，我在项目都写了。

效果图（左右黑边，表示手机屏幕边缘）：
1、默认情况

2、滑动了一点

3、滑动停止

细节说明：
1、要实现中间正常展示，左右两边漏一点，需要有2点要注意
1、1：viewpager的宽度，不能为 match_parent
1、2：viewpager和其直接父控件，都需要添加属性

android:clipChildren="false"

如：

<LinearLayout
        android:id="@+id/viewPagerLl_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clipChildren="false"
        android:gravity="center"
        android:orientation="horizontal">

        <androidx.viewpager.widget.ViewPager
            android:id="@+id/myViewPager_1"
            android:layout_width="250dp"
            android:layout_height="400dp"
            android:clipChildren="false"
            android:overScrollMode="never" />

</LinearLayout>

2、给viewpager添加滑动监听，并且 onPageScrolled 中做个处理。

myViewPager_1?.addOnPageChangeListener(object : ViewPager.OnPageChangeListener 
	override fun onPageScrollStateChanged(state: Int) 
	

	override fun onPageScrolled(
		position: Int,
		positionOffset: Float,
		positionOffsetPixels: Int
		) 

			//有的博客中说要加这句话，但是实际测试发现，没有这个，也没异常。安全起见，还是保留
			viewPagerLl_1?.invalidate()
		

		override fun onPageSelected(position: Int) 
			Toast.makeText(this@ViewPagerInActivity, "$position", Toast.LENGTH_SHORT).show()
		
)

到此，基本功能具备了。会发现，滑动当前完全展示的布局以外的地方，是无效的。无法滑动。这就需要再进行额外的处理。

最后，优化滑动处理

为了好区分，我就给每个滑动布局（viewpager中的Fragment）加个背景，用于观察边界。


这里，每个大的色块，如：绿色。表示Fragment的大小。其实，也是viewpager的大小。（viewpager指定了大小，Fragment的根布局是 match_parent）

如果做了上面 说明 中的那两步，只能触摸中间完整展示大小的色块，才能滑动。现在需要的是，滑动中间色块的两边（如 第二张图的左右 绿、黄色块，也能滑动）

1、给viewpager添加一个父布局（父控件），宽度建议充满屏幕（最终要根据实际需求来）
2、处理父控件的触摸事件，触摸父控件的时候（其实就是触摸viewpager以外的地方），把触摸事件交给viewpager

viewPagerLl_1?.setOnTouchListener(object : View.OnTouchListener 
	override fun onTouch(v: View?, event: MotionEvent?): Boolean 
	
		return myViewPager_1.dispatchTouchEvent(event);
	

)