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

功能需求:
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);
	}

})
发布了114 篇原创文章 · 获赞 33 · 访问量 22万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章