Imitación de Android Taobao, Jingdong Banner deslizar para ver detalles gráficos

Estoy participando en el "Programa de Vela · Nuggets"

escribir delante

Este artículo se basa ViewPager2en el Bannerefecto logrado y luego se da cuenta del efecto de imitar a Taobao y Jingdong Banneral pasar a la última página y continuar deslizando para ver los detalles de las imágenes y los textos. Sobre ViewPager2el principio y su presentación, puede consultar los dos artículos anteriores:
1. Comprensión profunda de Android del principio y la práctica de ViewPager2 (Parte 1)
2. Comprensión profunda de Android del principio y la práctica de ViewPager2 (Parte 2)

representaciones

Análisis de principios

• BannerEl de la derecha 查看更多Viewestá envuelto, el 子Viewancho 父Viewpredeterminado Banneres match_parent, y 查看更多el del lado derecho de la pantalla es invisible;
• Al Bannerdeslizar hacia la izquierda y hacia la derecha, el evento de deslizamiento actual se Bannerconsume en , es decir, 父Viewno será interceptado.
• Cuando se Bannerdesliza hacia el extremo derecho y continúa deslizándose, 父Viewel evento se interceptará en este momento, de modo que el evento se asumirá y 父Viewse consumirá en , y el contenido del deslizamiento se podrá deslizar. ¿Cómo deslizarlo? Durante el evento, al deslizar, y durante el evento, debe deslizar automáticamente hacia la izquierda o hacia la derecha para ver más, para completar el consumo de un evento;父ViewonTouchEvent()父ViewMOVEscrollTo()/scrollBy()UP/CANCELScrollerstartScroll()子View
• Cuando UP/CANCELse activa el evento, 子Viewla distancia para ver más deslizamientos es más de la mitad, y se considera que se deben activar más operaciones para ver más. Por supuesto, los valores aquí los puede configurar usted mismo.

código central

• 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 (vista principal)

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
        }
    }
}
复制代码

父ViewLos comentarios son muy claros, por lo que no hay necesidad de explicar demasiado. Aquí hay una cosa a tener en cuenta. Se sabe que Bannerdebe juzgar la dirección de deslizamiento cuando se desliza en la última página: si continúa deslizándose hacia la izquierda , debe 父Viewinterceptar el evento deslizante y consumirlo usted mismo; cuando se desliza hacia la derecha, no es 父Viewnecesario procesar los eventos deslizantes Bannery el consumo de eventos aún se realiza.

Sin embargo 滑动方向需要起始位置(DOWN事件)的X坐标 - 滑动时的X坐标(MOVE事件) 的差值进行判断, ¿dónde lleva el problema la coordenada X de la posición inicial? 父View¿ Estás onInterceptTouchEvent()->DOWN事件ahí? Esto no es posible, porque la dirección de deslizamiento se MOVE事件juzga en la entrada, y 父Viewsi onInterceptTouchEvent()->DOWN事件se intercepta en la entrada, los eventos posteriores no Bannerse transmitirán. Aquí puedes elegir 父Viewresolverlo dispatchTouchEvent()->DOWN事件.

El diseño XML correspondiente a VpLoadMoreView :

<?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>
复制代码

Aquí , y debe 父View(VpLoadMoreView)ser LinearLayoutun diseño horizontal, XMLla etiqueta utilizada en el diseño de nivel superior merge, que no solo puede optimizar el diseño de una capa, sino también 父Viewoperar directamente y cargar los detalles gráficos en ella 子View.

Dirección de la fuente

Para ver la dirección del código completo, consulte: imitación de Android Taobao, Jingdong Banner deslícese hasta el final para ver los detalles gráficos