ViewPager的简单使用
首先,ViewPager是一个页面切换组件,经常搭配Fragment使用,也可以用来承载View,目前有ViewPager和ViewPager2,本次使用ViewPager2,先简单实现一个切换图片的ViewPager吧
- 第一步,创建一个空的Activity,并布局中添加ViewPager
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/black"
tools:context=".TestViewPagerActivity">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/testViewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/image"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
- 创建ViewPagerAdapter与并设置
class TestViewPagerActivity : AppCompatActivity() {
private lateinit var viewPager: ViewPager2
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_view_pager)
viewPager = findViewById(R.id.testViewPager)
viewPager.adapter = ViewPagerAdapter(this)
}
class ViewPagerAdapter(val context: Context) : RecyclerView.Adapter<ViewPagerHolder>() {
private val mDataList: MutableList<String> by lazy {
mutableListOf<String>().apply {
add("https://img0.baidu.com/it/u=1697148622,3160789974&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=938")
add("https://img1.baidu.com/it/u=407852637,3650486136&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
add("https://img0.baidu.com/it/u=981218435,2998857702&fm=253&fmt=auto&app=120&f=JPEG?w=1200&h=675")
add("https://img1.baidu.com/it/u=1919509102,1927615551&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500")
add("https://img1.baidu.com/it/u=407852637,3650486136&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500")
}
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewPagerHolder {
return ViewPagerHolder(LayoutInflater.from(context).inflate(R.layout.view_pager_item_layout, parent, false))
}
override fun onBindViewHolder(holder: ViewPagerHolder, position: Int) {
val options = RequestOptions.bitmapTransform(RoundedCorners(DensityUtil.dip2px(context, 16)))
Glide.with(context).load(mDataList[position]).apply(options).into(holder.image)
}
override fun getItemCount(): Int {
return mDataList.size
}
}
class ViewPagerHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
val image: ImageView = itemView.findViewById(R.id.image)
}
}
ViewPager2内部使用的RecyclerView作为容器,因此创建Adapter与ViewHolder只需要参考RecyclerView即可。效果如下:
添加动画
我们可以看到上述的切换效果很平淡无奇,那么要给ViewPager添加动画就需要使用到一个方法
该方法通过设置了一个PageTransformer,那么PageTransformer是什么呢,他其实是一个接口
其中注释中Page参数的翻译如下:页面相对于当前页导航器的正中间位置的位置。0是前面和中间。1是向右整一页的位置,-2是向左两页的位置。最小/最大观测值取决于我们保留多少页,这取决于offscreenPageLimit。
因此我们实现该接口,重写该方法,并通过position的值对page设置属性即可,例如我们要实现如下效果,一张图片滑出屏幕时,缩放为原来的80%,透明度变为原来的50%,实现如下:
class ScaleAndAlphaTransformer : ViewPager2.PageTransformer {
override fun transformPage(page: View, position: Float) {
val minScale = 0.8f
val minAlpha = 0.5f
// 我们只操作可见页面(当前page与其前一个或者后一个页面),因此对position过滤,
var pos = position
if (pos < -1) {
pos = -1f
}
if (pos > 1) {
pos = 1f
}
val tempScale = if (pos < 0) 1 + pos else 1 - pos
val scaleValue = minScale + tempScale * (1 - minScale)
page.scaleX = scaleValue
page.scaleY = scaleValue
val alphaValue = minAlpha + tempScale * (1 - minAlpha)
page.alpha = alphaValue
}
}
viewPager.setPageTransformer(ScaleAndAlphaTransformer())
效果如下:
其它效果可根据position的值进行设置,只要理解postion的值的变化即可。