ViewPage2

984 阅读1分钟
  • 引入
implementation "androidx.viewpager2:viewpager2:1.0.0"
  • xml使用
<?xml version="1.0" encoding="utf-8"?>
<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=".MainActivity">

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>
  • 自定义Adapter
package com.example.kotlindemo

import android.graphics.Color
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView


/**
 * <pre>
 *     author: Jafar
 *     date  : 2021/10/8
 *     desc  :
 * </pre>
 */
class MyAdapter : RecyclerView.Adapter<MyAdapter.PagerViewHolder>() {

    private var mList: List<Int>? = null

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): PagerViewHolder {
        val view: View =
            LayoutInflater.from(parent.context).inflate(R.layout.item_page, parent, false)
        return PagerViewHolder(view)
    }

    override fun onBindViewHolder(holder: PagerViewHolder, position: Int) {
        holder.bindData(position)
    }

    override fun getItemCount(): Int {
        return mList!!.size
    }

    fun setList(list: List<Int>) {
        mList = list
    }

    inner class PagerViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        private val mTextView: TextView = itemView.findViewById(R.id.tv_text)
        private val colors = arrayOf("#CCFF99", "#41F1E5", "#8D41F1", "#FF99CC")
        fun bindData(index: Int) {
            mTextView.text = index.toString()
            mTextView.setBackgroundColor(Color.parseColor(colors[index]))
        }
    }
}
  • 初始化
package com.example.kotlindemo

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.viewpager2.widget.ViewPager2

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        initViewPage2()
    }

    private fun initViewPage2() {
        val viewPager2 = findViewById<ViewPager2>(R.id.view_pager)
        val myAdapter = MyAdapter()
        myAdapter.setList(arrayListOf(1, 2, 3))
        viewPager2.adapter = myAdapter
    }
}
  • 竖向滑动、缩放效果
viewPager2.orientation = ViewPager2.ORIENTATION_VERTICAL    // 设置滚动方向
val compositePageTransformer = CompositePageTransformer()
compositePageTransformer.addTransformer(ScaleInTransformer())
compositePageTransformer.addTransformer(MarginPageTransformer(10))
viewPager2.setPageTransformer(compositePageTransformer)
val compositePageTransformer = CompositePageTransformer()
compositePageTransformer.addTransformer(ScaleInTransformer())
compositePageTransformer.addTransformer(MarginPageTransformer(50))
viewPager2.setPageTransformer(compositePageTransformer)
  • 与Fragment配合使用 需要自定义Adapter FragmentStateAdapter
package com.example.kotlindemo

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter


/**
 * <pre>
 *     author: Jafar
 *     date  : 2021/10/8
 *     desc  :
 * </pre>
 */
internal class CustomAdapterFragmentPager(fragmentActivity: FragmentActivity) :
    FragmentStateAdapter(fragmentActivity) {

    val PAGE_HOME = 0
    val PAGE_FIND = 1
    val PAGE_INDICATOR = 2
    val PAGE_OTHERS = 3

    override fun createFragment(position: Int): Fragment {
        return when (position) {
            PAGE_HOME -> HomeFragment()
            PAGE_FIND -> PageFragment()
            PAGE_INDICATOR -> IndicatorFragment()
            else -> IndicatorFragment()
        }
    }

    override fun getItemCount(): Int {
        return 4
    }
}
  • TabLayout + Fragment + ViewPage2
package com.example.kotlindemo

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.get
import androidx.recyclerview.widget.RecyclerView
import androidx.viewpager2.widget.CompositePageTransformer
import androidx.viewpager2.widget.MarginPageTransformer
import androidx.viewpager2.widget.ViewPager2
import com.google.android.material.tabs.TabLayout
import com.google.android.material.tabs.TabLayoutMediator

/**
 * TabLayout与ViewPage2与Fragment相结合
 */
class MainActivity3 : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main3)
        initViewPage2()
    }

    private fun initViewPage2() {

        val tabLayout = findViewById<TabLayout>(R.id.tabLayout)
        val viewPager2 = findViewById<ViewPager2>(R.id.view_pager)

        val adapter = CustomAdapterFragmentPager(this)
        viewPager2.adapter = adapter
        val titles = arrayListOf(1, 2, 3)

        titles.forEachIndexed { index, i ->
            tabLayout.addTab(tabLayout.newTab())
            tabLayout.getTabAt(index)?.text = i.toString()
        }

        viewPager2.orientation = ViewPager2.ORIENTATION_HORIZONTAL    // 设置滚动方向
        // 注册滑动监听回调
        viewPager2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
            override fun onPageSelected(position: Int) {
                println("滑动到了$position")
                tabLayout.getTabAt(position)?.select()
            }
        })
        viewPager2.isUserInputEnabled = true   // 禁止用户滑动

        TabLayoutMediator(
            tabLayout, viewPager2
        ) { tab, position ->
        }
    }
}