Android仿淘宝、京东Banner滑动查看图文详情

本文已同步发表于我的微信公众号，搜索 代码说 即可关注，欢迎与我沟通交流。

我正在参加「掘金·启航计划」

写在前面

本文基于 ViewPager2 实现的 Banner 效果，进而实现了仿淘宝、京东Banner滑动至最后一页时继续滑动来查看图文详情的效果。关于 ViewPager2 的原理及其封装，可以参见之前的两篇文章：
1、Android 深入理解ViewPager2原理及其实践(上篇)
2、Android 深入理解ViewPager2原理及其实践(下篇)

效果图

原理分析

• Banner与右侧的查看更多View都是子View，被父View包裹，默认Banner的宽度是match_parent，而查看更多则是在屏幕的右侧，处于不可见状态；
• 当Banner进行左右滑动时，当前的滑动事件是在Banner中消费的，即父View不会进行拦截。
• 当Banner滑动到最右侧且要继续滑动时，此时父View会进行事件的拦截，从而事件由父View接管，并在父View的onTouchEvent()中消费事件，此时就可以滑动父View中的内容了。怎么滑动呢？在MOVE事件时通过scrollTo()/scrollBy()滑动，而在UP/CANCEL事件时，需要通过Scroller的startScroll()自动滑动到查看更多子View的左侧或右侧，从而完成一次事件的消费；
• 当UP/CANCEL事件触发时，查看更多子View滑动的距离超过一半，认为需要触发查看更多操作了，当然这里的值都可以自行设置。

核心代码

• TJBannerFragment.kt

/**
 * 仿淘宝京东宝贝详情Fragment
 */
class TJBannerFragment : BaseFragment() {
    private val mModels: MutableList<Any> = mutableListOf()
    private val mContainer: VpLoadMoreView by id(R.id.vp2_load_more)

    override fun getLayoutId(): Int {
        return R.layout.fragment_tx_news_n
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        initVerticalTxScroll()
    }

    private fun initVerticalTxScroll() {
        mModels.add(TxNewsModel(MConstant.IMG_4, "美轮美奂节目", "奥运五环缓缓升起"))
        mModels.add(TxNewsModel(MConstant.IMG_1, "精美商品", "9块9包邮"))
        mContainer.setData(mModels) {
            showToast("打开更多页面")
        }
    }
}

• VpLoadMoreView.kt(父View)

class VpLoadMoreView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
    defStyle: Int = 0,
) : LinearLayout(context, attrs, defStyle) {

    private val mMVPager2: MVPager2 by id(R.id.mvp_pager2)
    private var mNeedIntercept: Boolean = false //是否需要拦截VP2事件
    private val mLoadMoreContainer: LinearLayout by id(R.id.load_more_container)
    private val mIvArrow: ImageView by id(R.id.iv_pull)
    private val mTvTips: TextView by id(R.id.tv_tips)

    private var mCurPos: Int = 0 //Banner当前滑动的位置
    private var mLastX = 0f
    private var mLastDownX = 0f //用于判断滑动方向
    private var mMenuWidth = 0 //加载更多View的宽度
    private var mShowMoreMenuWidth = 0 //加载更多发生变化时的宽度
    private var mLastStatus = false // 默认箭头样式
    private var mAction: (() -> Unit)? = null
    private var mScroller: OverScroller
    private var isTouchLeft = false //是否是向左滑动
    private var animRightStart = RotateAnimation(0f, -180f,
        Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f).apply {
        duration = 300
        fillAfter = true
    }

    private var animRightEnd = RotateAnimation(-180f, 0f,
        Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f).apply {
        duration = 300
        fillAfter = true
    }

    init {
        orientation = HORIZONTAL
        View.inflate(context, R.layout.fragment_tx_news, this)
        mScroller = OverScroller(context)
    }

    /**
     * @param mModels 要加载的数据
     * @param action 回调Action
     */
    fun setData(mModels: MutableList<Any>, action: () -> Unit) {
        this.mAction = action
        mMVPager2.setModels(mModels)
            .setLoop(false) //非循环模式
            .setIndicatorShow(false)
            .setLoader(TxNewsLoader(mModels))
            .setPageTransformer(CompositePageTransformer().apply {
                addTransformer(MarginPageTransformer(15))
            })
            .setOrientation(ViewPager2.ORIENTATION_HORIZONTAL)
            .setAutoPlay(false)
            .setOnBannerClickListener(object : OnBannerClickListener {
                override fun onItemClick(position: Int) {
                    showToast(mModels[position].toString())
                }
            })
            .registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
                override fun onPageScrollStateChanged(state: Int) {
                    if (mCurPos == mModels.lastIndex && isTouchLeft && state == ViewPager2.SCROLL_STATE_DRAGGING) {
                        //Banner在最后一页 & 手势往左滑动 & 当前是滑动状态
                        mNeedIntercept = true //父View可以拦截
                        mMVPager2.setUserInputEnabled(false) //VP2设置为不可滑动
                    }
                }

                override fun onPageSelected(position: Int) {
                    mCurPos = position
                }
            })
            .start()
    }

    override fun onLayout(changed: Boolean, l: Int, t: Int, r: Int, b: Int) {
        mMenuWidth = mLoadMoreContainer.measuredWidth
        mShowMoreMenuWidth = mMenuWidth / 3 * 2
        super.onLayout(changed, l, t, r, b)
    }

    override fun dispatchTouchEvent(ev: MotionEvent?): Boolean {
        when (ev?.action) {
            MotionEvent.ACTION_DOWN -> {
                mLastX = ev.x
                mLastDownX = ev.x
            }
            MotionEvent.ACTION_MOVE -> {
                isTouchLeft = mLastDownX - ev.x > 0 //判断滑动方向
            }
        }
        return super.dispatchTouchEvent(ev)
    }

    override fun onInterceptTouchEvent(ev: MotionEvent?): Boolean {
        var isIntercept = false
        when (ev?.action) {
            MotionEvent.ACTION_MOVE -> isIntercept = mNeedIntercept //是否拦截Move事件
        }
        //log("ev?.action: ${ev?.action},isIntercept: $isIntercept")
        return isIntercept
    }

    @SuppressLint("ClickableViewAccessibility")
    override fun onTouchEvent(ev: MotionEvent?): Boolean {
        when (ev?.action) {
            MotionEvent.ACTION_MOVE -> {
                val mDeltaX = mLastX - ev.x
                if (mDeltaX > 0) {
                    //向左滑动
                    if (mDeltaX >= mMenuWidth || scrollX + mDeltaX >= mMenuWidth) {
                        //右边缘检测
                        scrollTo(mMenuWidth, 0)
                        return super.onTouchEvent(ev)
                    }
                } else if (mDeltaX < 0) {
                    //向右滑动
                    if (scrollX + mDeltaX <= 0) {
                        //左边缘检测
                        scrollTo(0, 0)
                        return super.onTouchEvent(ev)
                    }
                }
                showLoadMoreAnim(scrollX + mDeltaX)
                scrollBy(mDeltaX.toInt(), 0)
                mLastX = ev.x
            }
            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
                smoothCloseMenu()
                mNeedIntercept = false
                mMVPager2.setUserInputEnabled(true)
                //执行回调
                val mDeltaX = mLastX - ev.x
                if (scrollX + mDeltaX >= mShowMoreMenuWidth) {
                    mAction?.invoke()
                }
            }
        }
        return super.onTouchEvent(ev)
    }

    private fun smoothCloseMenu() {
        mScroller.forceFinished(true)
        /**
         * 左上为正，右下为负
         * startX：X轴开始位置
         * startY: Y轴结束位置
         * dx：X轴滑动距离
         * dy：Y轴滑动距离
         * duration：滑动时间
         */
        mScroller.startScroll(scrollX, 0, -scrollX, 0, 300)
        invalidate()
    }

    override fun computeScroll() {
        if (mScroller.computeScrollOffset()) {
            showLoadMoreAnim(0f) //动画还原
            scrollTo(mScroller.currX, mScroller.currY)
            invalidate()
        }
    }

    private fun showLoadMoreAnim(dx: Float) {
        val showLoadMore = dx >= mShowMoreMenuWidth
        if (mLastStatus == showLoadMore) return
        if (showLoadMore) {
            mIvArrow.startAnimation(animRightStart)
            mTvTips.text = "释放查看图文详情"
            mLastStatus = true
        } else {
            mIvArrow.startAnimation(animRightEnd)
            mTvTips.text = "滑动查看图文详情"
            mLastStatus = false
        }
    }
}

父View的注释很清晰，不用过多解释了，这里需要注意一点，已知在Banner的最后一页滑动时需要判断滑动方向：继续向左滑动，需要父View拦截滑动事件并自己进行消费；向右滑动时，父View不需要处理滑动事件，仍由Banner进行事件消费。

而滑动方向需要起始位置(DOWN事件)的X坐标 - 滑动时的X坐标(MOVE事件) 的差值进行判断，那问题在哪里取起始位置的X坐标呢？在父View的onInterceptTouchEvent()->DOWN事件里吗？这里是不行的，因为滑动方向是在MOVE事件里判断的，在父View的onInterceptTouchEvent()->DOWN事件里拦截的话，后续事件不会往Banner里传递了。这里可以选择在父View的dispatchTouchEvent()->DOWN事件里即可解决。

VpLoadMoreView对应的XML布局：

<?xml version="1.0" encoding="utf-8"?>
<merge 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"
    android:background="@color/white"
    android:orientation="horizontal"
    tools:parentTag="android.widget.LinearLayout">

    <!--ViewPager2-->
    <org.ninetripods.lib_viewpager2.MVPager2
        android:id="@+id/mvp_pager2"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <!--加载更多View-->
    <LinearLayout
        android:id="@+id/load_more_container"
        android:layout_width="100dp"
        android:layout_height="200dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ImageView
            android:id="@+id/iv_pull"
            android:layout_width="18dp"
            android:layout_height="18dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="10dp"
            android:src="@drawable/icon_arrow_pull" />

        <TextView
            android:id="@+id/tv_tips"
            android:layout_width="16dp"
            android:layout_height="match_parent"
            android:layout_marginStart="10dp"
            android:gravity="center_vertical"
            android:text="滑动查看图文详情"
            android:textColor="#333333"
            android:textSize="14sp"
            android:textStyle="bold" />
    </LinearLayout>
</merge>

这里的父View(VpLoadMoreView)是LinearLayout，且必须是横向布局，XML的顶层布局使用的merge标签，这样既可以优化一层布局，又可以在父View中直接操作加载图文详情的子View。

源码地址

完整代码地址参见：Android仿淘宝、京东Banner滑动至最后查看图文详情

欢迎扫描下方二维码或搜索微信公众号 代码说， 关注我的微信公众号查看最新文章~