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

效果图

原理分析

• 
  
• 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滑动至最后查看图文详情