AndroidBanner - ViewPager 03

上一篇文章，描述了如何实现自动轮播的，以及手指触摸的时候停止轮播，抬起继续轮播，其实还遗留了一些问题：

1. 当banner不可见的时候，也需要停止轮播
2. 给banner设置点击事件，长时间的触摸也会被默认是一个点击事件

这篇文章就来解决这些问题，并处理一下banner的曝光打点问题。

解决banner 不可见依旧轮播的问题

思考一下：什么时候可以轮播，什么时候不可以轮播

当Banner添加到屏幕上，且对用户可见的时候，可以开始轮播
当Banner从屏幕上移除，或者Banner不可见的时候，可以停止轮播
当手指触摸到Banner时，停止轮播
当手指移开时，开始轮播

所以，我们需要知道什么时候View可见，不可见，添加到屏幕上和从屏幕上移除，幸运的是，这些，android都提供了对应的接口来获取。

OnAttachStateChangeListenner

该接口可以通知我们view添加到屏幕上或者从屏幕上被移除,或者可以直接重写view的onAttachedToWindow和onDetachedFromWindow方法

// view提供的接口，可以通过 addOnAttachStateChangeListener 添加舰艇
public interface OnAttachStateChangeListener {  
	public void onViewAttachedToWindow(@NonNull View v);  
	public void onViewDetachedFromWindow(@NonNull View v);  
}

// 复写view的方法
override fun onAttachedToWindow() {  
    super.onAttachedToWindow()  
}  
  
override fun onDetachedFromWindow() {  
    super.onDetachedFromWindow()  
}

这里我们通过复写方法的方式处理

onVisibilityChanged

view 提供了方法，可以复写该方法，获取到view 的可见性变化

protected void onVisibilityChanged(@NonNull View changedView, @Visibility int visibility) {  
}

onWindowVisibilityChanged

view 提供了方法，可以复习该方法，当前widow的可见性发生变化的时候，会调用通知给我们

protected void onWindowVisibilityChanged(@Visibility int visibility) {  
    if (visibility == VISIBLE) {  
        initialAwakenScrollBars();  
    }  
}

我们根据上面的api，可以封装一个接口，来监听View的可见性

VisibleChangeListener

interface VisibleChangeListener {  
    /**  
     * view 可见  
     */  
    fun onShown()  
  
    /**  
     * view 不可见  
     */  
    fun onDismiss()  
}

Banner重写方法，进行调用

override fun onVisibilityChanged(changedView: View, visibility: Int) {  
    Log.e(TAG, "onVisibilityChanged ${changedView == this}, vis: $visibility")  
    dispatchVisible(visibility)  
}  
  
override fun onWindowVisibilityChanged(visibility: Int) {  
    super.onWindowVisibilityChanged(visibility)  
    Log.e(TAG, "onWindowVisibilityChanged $visibility")  
    dispatchVisible(visibility)  
}  
  
override fun onAttachedToWindow() {  
    super.onAttachedToWindow()  
    Log.e(TAG, "onAttachedToWindow ")  
    this.mAttached = true  
}  
  
override fun onDetachedFromWindow() {  
    Log.e(TAG, "onDetachedFromWindow ")  
    super.onDetachedFromWindow()  
    this.mAttached = false  
}

private fun dispatchVisible(visibility: Int) {  
    val visible = mAttached && visibility == VISIBLE  
    if (visible) {  
        prepareLoop()  
    } else {  
        stopLoop()  
    }  
    mVisibleChangeListener?.let {  
        when (visible) {  
            true -> it.onShown()  
            else -> it.onDismiss()  
        }  
    }  
}

页面滚动时处理banner轮播

滚动监听，如果是scrollview，就监听滚动事件处理即可。如果是listview，recyclerview可以选择监听onscrollstatechanged，更高效。
下面是scrollview的监听处理

mBinding.scrollView.setOnScrollChangeListener(object :OnScrollChangeListener{  
    override fun onScrollChange(  
        v: View?,  
        scrollX: Int,  
        scrollY: Int,  
        oldScrollX: Int,  
        oldScrollY: Int  
    ) {  
        val visible = mBinding.vpBanner.getGlobalVisibleRect(Rect())  
        Log.e(TAG,"banner visible : $visible")  
        if(visible){  
            mBinding.vpBanner.startLoop()  
        }else{  
            mBinding.vpBanner.stopLoop()  
        }  
    }  
})

点击事件的处理

首先要声明一个点击事件回调接口

interface PageClickListener {  
    fun onPageClicked(position: Int)  
}

重写banner的onTouch事件，将移动距离小于100，且按压时间小于500ms的事件认为是点击事件

private var mMoved = false  
private var mDownX = 0F  
private var mDownY = 0F  
  
/**  
 * 当前事件流结束时，恢复touch处理的相关变量  
 */  
private fun initTouch() {  
    this.mMoved = false  
    this.mDownX = 0F  
    this.mDownY = 0F  
}  
  
private fun calculateMoved(x: Float, y: Float, ev: MotionEvent) {  
    mClickListener?.let {  
        // 超过500ms(系统默认的时间) 我们认为不是点击事件  
        if (ev.eventTime - ev.downTime >= 500) {  
            return  
        }  
        // 移动小于阈值我们认为是点击  
        if (sqrt(((x - mDownX).pow(2) + (y - mDownY).pow(2))) >= MOVE_FLAG) {  
            return  
        }  
        val count = adapter?.count ?: 0  
        if (count == 0) {  
            return  
        }  
        // 由于我们实现无限轮播的方式是重新设置当前选中的item，这里要将currentItem重新映射回去  
        val index = when (currentItem) {  
            in 1..count - 2 -> currentItem - 1  
            0 -> count - 1  
            else -> 0  
        }  
        it.onPageClicked(index)  
    }  
}  
  
override fun onTouchEvent(ev: MotionEvent?): Boolean {  
    when (ev?.action) {  
        MotionEvent.ACTION_DOWN -> {  
            this.mDownY = ev.y  
            this.mDownX = ev.x  
            stopLoop()  
        }  
        MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {  
            val y = ev.y  
            val x = ev.x  
            calculateMoved(x, y, ev)  
            initTouch()  
            prepareLoop()  
        }  
    }  
    return super.onTouchEvent(ev)  
}

曝光打点的处理

监听page切换，当page变化的时候，从实际展示的数据队列中取出数据进行曝光。

class ExposureHelper(private val list: List<*>, private var last: Int = -1) :  
    ViewPager.OnPageChangeListener {  
  
    private var mStart: AtomicBoolean = AtomicBoolean(false);  
  
    override fun onPageScrolled(position: Int, positionOffset: Float, positionOffsetPixels: Int) =  
        Unit  
  
    override fun onPageSelected(position: Int) {  
        Log.e(TAG, "$position $last")  
        if (last >= 0) {  
            exposure()  
        }  
        last = position  
    }  
  
    override fun onPageScrollStateChanged(state: Int) = Unit  
  
    /**  
     * 开始曝光  
     * @param current Int  
     */    fun startExposure(current: Int) {  
        mStart.set(true)  
        last = current  
    }  
  
    /**  
     * 停止曝光  
     */  
    fun endExposure() {  
        if (mStart.get()) {  
            mStart.set(false)  
            exposure()  
        }  
    }  
  
    /**  
     * 实际执行数据上报的处理  
     */  
    private fun exposure() {  
        val data = list[last]  
        Log.e(TAG, "data:$data")  
    }  
  
    companion object {  
        private const val TAG = "ExposureHelper"  
    }  
}

VPAdapter 对外提供实际展示的数据集

private val mData = mutableListOf<T>()  
  
fun setData(data: List<T>) {  
    mData.clear()  
    if (this.loop && data.size > 1) {  
        // 数组组织一下，用来实现无限轮播  
        mData.add(data[data.size - 1])  
        mData.addAll(data)  
        mData.add(data[0])  
    } else {  
        mData.addAll(data)  
    }  
}

fun getShowDataList():List<T>{  
    return mData  
}

在Banner中的配置使用

private var mExposureHelper: ExposureHelper? = null

/**  
 * 自动轮播  
 */  
fun startLoop() {  
    if (mLoopHandler == null) {  
        mLoopHandler = Handler(Looper.getMainLooper()) { message ->  
            return@Handler when (message.what) {  
                LOOP_NEXT -> {  
                    loopNext()  
                    true  
                }  
                else -> false  
            }  
        }  
    }  
    if (mLoopHandler?.hasMessages(LOOP_NEXT) != true) {  
        Log.e(TAG, "startLoop")  
        mLoopHandler?.sendEmptyMessageDelayed(LOOP_NEXT, mLoopDuration)  
    }  
    // 开始轮播时开始曝光（可见时会触发轮播）  
    mExposureHelper?.startExposure(currentItem)  
}  
  
fun stopLoop() {  
    // 停止轮播时结束曝光（不可见时会停止轮播）  
    mExposureHelper?.endExposure()  
    mLoopHandler?.removeMessages(LOOP_NEXT)  
}

fun bindExposureHelper(exposureHelper: ExposureHelper?) {  
    mExposureHelper = exposureHelper  
    mExposureHelper?.let {  
        addOnPageChangeListener(it)  
    }  
    mExposureHelper?.startExposure(currentItem)  
}

代码：huyuqiwolf/Banner (github.com)