目的

多數的APP都有banner功能，banner的實現大多使用的是viewpager，而viewpager自帶是沒有從最后一頁滑到第一頁，從第一頁滑到第一頁。而為了能夠更好的體驗，需要實現此功能。

效果圖

可以注意從No.3切換至No.1和No.1切換至No.3之間的過渡。

效果圖

思路

例：我們要顯示三張圖片，分別為No.1,No.2,No.3。

1. 修改List
   在傳入Adapter時的List需要做一下修改，如圖：
   
   List
   
   當No.1滑動到白色底的No.3且滑動結束時，將currentItem設置為藍色底的No.3；當從藍色底的No.3滑動至白色底的No.1且滑動結束時，將currentItem設置為藍色底的No.1。
   這里要強調的是滑動結束，為何要在滑動結束時才去切換的原因是：若滑動未結束就切換，會出現不連貫的情況（滑動的動畫未結束時，就會強行進行切換）。
2. 為ViewPager添加監聽事件
   ViewPager.OnPageChangeListener接口中共有三個方法：onPageScrollStateChanged、onPageScrolled、onPageSelected。當ViewPager滑動時，會分別觸發三個方法。在onPageSelected方法中記錄position，在onPageScrollStateChanged做切換（當state = 0時）。state = 0 表示動畫結束，這樣可以做到順滑，無卡頓。state的定義如下：

    /**
     * Indicates that the pager is in an idle, settled state. The current page
     * is fully in view and no animation is in progress.
     */
    public static final int SCROLL_STATE_IDLE = 0;

    /**
     * Indicates that the pager is currently being dragged by the user.
     */
    public static final int SCROLL_STATE_DRAGGING = 1;

    /**
     * Indicates that the pager is in the process of settling to a final position.
     */
    public static final int SCROLL_STATE_SETTLING = 2;

代碼實現

代碼使用的是kotlin，java類似。

• Fragment

    lateinit var vpBanner: ViewPager
    val list = ArrayList<Banner>()
    lateinit var adapter: BannerAdapter
    var mPosition = -1
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
    }

    override fun onCreateView(inflater: LayoutInflater?, container: ViewGroup?,
                              savedInstanceState: Bundle?): View? {
        if (currentView == null) {
            currentView = inflater!!.inflate(R.layout.fragment_search, container, false)
            vpBanner = currentView!!.vpBanner

            val banner = Banner()
            banner.desc = "No.1"
            banner.imgSourceId = R.mipmap.image_banner_1
            val banner2 = Banner()
            banner2.desc = "No.2"
            banner2.imgSourceId = R.mipmap.image_banner_2
            val banner3 = Banner()
            banner3.desc = "No.3"
            banner3.imgSourceId = R.mipmap.image_banner_3
            list.add(banner3)
            list.add(banner)
            list.add(banner2)
            list.add(banner3)
            list.add(banner)
            adapter = BannerAdapter(activity, list)
            vpBanner.adapter = adapter
            vpBanner.setCurrentItem(1, false)

            vpBanner.setOnPageChangeListener(object : ViewPager.OnPageChangeListener {
                override fun onPageScrollStateChanged(state: Int) {
                    if (state == 0){
                        if (mPosition == 0) {
                            vpBanner.setCurrentItem(list.size - 2, false)
                        } else if (mPosition == list.size - 1) {
                            vpBanner.setCurrentItem(1, false)
                        }
                    }
                    LogUtils.e("OnPageChangeListener","state -> $state")
                }

                override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) {
                    LogUtils.e("OnPageChangeListener", "onPageScrolled,position -> $position,positionOffset -> $positionOffset,positionOffsetPixels -> $positionOffsetPixels")
                }

                override fun onPageSelected(position: Int) {
                    LogUtils.e("OnPageChangeListener","onPageSelected , position -> $position")
                    mPosition = position

                }

            })

        }
        return currentView
    }

• Adapter
  Adapter中需要注意的是instantiateItem和destroyItem，此前使用container?.removeViewAt一直會報越界的錯誤，后面改成container?.removeView就不會了。

class BannerAdapter constructor(activity: Activity, list: ArrayList<Banner>) : PagerAdapter() {

    val mActivity = activity
    val mLIst = list
    lateinit var currentView: View
    lateinit var ivBanner: ImageView
    lateinit var tvDesc: TextView

    override fun instantiateItem(container: ViewGroup?, position: Int): Any {
        currentView = LayoutInflater.from(mActivity).inflate(R.layout.item_banner_image, container, false)
        val banner = mLIst[position]

        ivBanner = currentView.ivBanner
        tvDesc = currentView.tvDesc

        tvDesc.text = banner.desc

        Picasso.with(mActivity)
                .load(banner.imgSourceId)
                .placeholder(R.mipmap.image_banner_1)
                .into(ivBanner)

        container?.addView(currentView, 0)
        return currentView
    }

    override fun isViewFromObject(view: View?, `object`: Any?): Boolean {
        return view == `object`
    }

    override fun getCount(): Int {

        return mLIst.size
    }

    override fun destroyItem(container: ViewGroup?, position: Int, `object`: Any?) {
        LogUtils.e("destroyItem", "destroyItem -> $position")
        container?.removeView(`object` as View?)
    }
}

• item_banner_image

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical">

    <ImageView
        android:id="@+id/ivBanner"
        android:layout_width="wrap_content"
        android:layout_height="170dp"
        app:srcCompat="@mipmap/image_banner_1"/>

    <TextView
        android:id="@+id/tvDesc"
        android:layout_width="match_parent"
        android:background="#50707070"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/ivBanner"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:text="TextView"/>
</RelativeLayout>

• Banner

class Banner {
    var desc: String = ""
    var imgSourceId: Int = -1
}