Android 照貓畫虎~ 來實(shí)現(xiàn)一下皮皮蝦的詳情頁效果

前言

封閉、無聊、刷皮皮、詳情頁、交互式、有意思、實(shí)現(xiàn)下

1、分析功能點(diǎn)

  • 下滑關(guān)閉詳情頁
  • 左滑關(guān)閉詳情頁
  • 右滑切換短視頻

2、實(shí)現(xiàn)思路

那么即可左滑又可右滑還不沖突的東西是什么

ViewPager

好！確定詳情頁父布局使用Viewpager那么咱們只需要考慮下滑手勢的問題了

3、實(shí)現(xiàn) （不要在意命名、特別在意查看項(xiàng)目即可滿足好奇心??）

XML

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <merge
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:parentTag=".widget.XBBDetailView">

        <!-- 狀態(tài)欄 -->
        <com.kasiengao.ksgframe.common.widget.CView
            android:id="@+id/status_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/black"
            tools:layout_height="24dp" />

        <!-- ViewPager -->
        <androidx.viewpager.widget.ViewPager
            android:id="@+id/detail_vp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/status_bar"
            android:overScrollMode="never" />

        <!-- Back -->
        <androidx.appcompat.widget.AppCompatImageView
            android:id="@+id/back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@id/detail_vp"
            android:layout_marginStart="@dimen/view_space"
            android:layout_marginTop="12dp"
            android:elevation="5dp"
            android:src="@drawable/ic_cover_back" />
    </merge>
</layout>

class XBBDetailView(context: Context) : RelativeLayout(context) {

    private val mBinding: LayoutXbbDetailBinding by lazy {
        DataBindingUtil.inflate(
            LayoutInflater.from(context), R.layout.layout_xbb_detail, this, true
        )
    }
}

- 列表到詳情頁的過渡動(dòng)畫

皮皮蝦 仿皮皮蝦

看得出來是從列表中的視頻容器Y坐標(biāo)為起點(diǎn)平移到頂部的一個(gè)動(dòng)畫效果

  • 獲取列表視頻容器在屏幕中的坐標(biāo)getLocationOnScreen
  • 拿到列表視頻容器的Y到減去狀態(tài)欄高度位置做一個(gè)平移動(dòng)畫即可
  • 數(shù)據(jù)源截取集合subList從點(diǎn)擊列表的position到size做一個(gè)截取
// 列表截取
val subList = mAdapter.data.subList(position, mAdapter.data.size)

/**
 * 打開詳情頁
 *
 * @param position      列表位置
 * @param data          數(shù)據(jù)源
 * @param listContainer 列表容器
 */
fun openDetail(position: Int, data: List<VideoBean>, listContainer:PlayerContainerView{
    // 添加到View層級(jí)下
    this.mActivity.findViewById<ViewGroup>(android.R.id.content)?.let {
        if (!it.contains(this)) {
            it.addView(this)
        }
    }
    // 列表容器坐標(biāo)
    val location = IntArray(2)
    this.mListContainer.getLocationOnScreen(location)
    // 動(dòng)畫
    ObjectAnimator.ofFloat(
        mBinding.detailVp, Y,
        location[1].toFloat(), mStatusBarHeight.toFloat()
    ).let {
        it.interpolator = LinearInterpolator()
        it.duration = 150
        it.start()
    }
    // Init
    this.post {
        this.mBinding.detailVp.setCurrentItem(1, false)
    }
}

注意：setCurrentItem(1, false)ViewPager初始頁一定要設(shè)置為第1頁，需要預(yù)留第0頁作為關(guān)閉頁

看起來是不是so easy來咱接著往下走

- 右滑切換短視頻

這里其實(shí)就是簡單的ViewPager右滑切換了

皮皮蝦 仿皮皮蝦
  • 但是需要注意的是右滑切換后同時(shí)要同步Recycler的Item位置
  • 否則findViewHolderForLayoutPosition會(huì)報(bào)空指針，
  • 同步Recycler的Item位置是因?yàn)樵陉P(guān)閉詳情頁的也需要做過渡動(dòng)畫
override fun onPageSelected(position: Int) {
    ...
    // 同步列表Item的位置
    scrollToPositionWithOffset(getRealListPosition())
}

override fun onPageScrollStateChanged(state: Int) {
    ...
    when (state) {
        ViewPager.SCROLL_STATE_IDLE -> {
               // 同步列表的容器
               mListContainer = getItemPlayContainer(getRealListPosition())
            }
        }
    }
}

/**
 * 指定Item滑動(dòng)到頂部
 */
fun scrollToPositionWithOffset(position: Int) {
    (layoutManager as LinearLayoutManager).scrollToPositionWithOffset(position, 0)
}

/**
 * 獲取Item中的視頻容器View
 */
fun getItemPlayContainer(position: Int): PlayerContainerView {
     return (findViewHolderForLayoutPosition(position) as XBBAdapter.ViewHolder).mPlayContainer
}

- 左滑關(guān)閉詳情頁

皮皮蝦 仿皮皮蝦

在上面咱們說到了預(yù)留了第0頁作為了關(guān)閉頁，那么很簡單第0頁只需要添加一個(gè)空View且透明即可，在滑動(dòng)結(jié)束后關(guān)閉詳情頁即可。

override fun onPageSelected(position: Int) {
    // 關(guān)閉頁
    if (position == PAGE_FINISH) {
        ...
        // 切回至舊容器 (原列表容器)
        mSignalPlayer.bindContainer(mListContainer, false)
        return
    }
}

override fun onPageScrollStateChanged(state: Int) {
    when (state) {
        ViewPager.SCROLL_STATE_IDLE -> {
            ...
            // 關(guān)閉頁
            if (currentItem == PAGE_FINISH) {
                // Finish
                finishDetail()
                return
            }
        }
    }
}

/**
 * 關(guān)閉詳情頁
 */
private fun finishDetail() {
    // 從View層級(jí)中移除
    this.mActivity.findViewById<ViewGroup>(android.R.id.content)
        ?.removeView(this@XBBDetailView)
    ...
}

左滑關(guān)閉邏輯也就結(jié)束了、也是非常的easy哈??

- 下滑關(guān)閉詳情頁

皮皮蝦 仿皮皮蝦

這里就比較關(guān)鍵了需要用到事件分發(fā)

首先在詳情頁可以看到評(píng)論列表可上下滑動(dòng)，那就需要限制在列表頂部的時(shí)候才可以下滑關(guān)閉

這里需要在父布局中重寫onInterceptTouchEvent去判斷滑動(dòng)偏移量與列表是否在頂部邏輯

/**
 * 事件分發(fā)
 */
override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
    var intercept = false
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            this.mDownX = event.x
            this.mDownY = event.y
        }
        MotionEvent.ACTION_MOVE -> {
            if ((event.y - mDownY) > 23) {
                if (mItemView.getScrollView().isOnTop) {
                    intercept = true
                }
            }
        }
    }
    return intercept
}

然后重寫onTouchEvent當(dāng)事件被攔截時(shí)此處會(huì)被執(zhí)行，然后根據(jù) X Y 坐標(biāo)去設(shè)置更新容器即可

override fun onTouchEvent(event: MotionEvent): Boolean {
    if (!mItemView.getScrollView().isOnTop) {
        return true
    }
    when (event.action) {
        MotionEvent.ACTION_DOWN -> {
            this.mDownX = event.x
            this.mDownY = event.y
        }
        MotionEvent.ACTION_UP -> {
            ...
        }
        MotionEvent.ACTION_MOVE -> {
            val moveX = event.x - mDownX
            this.mMoveY = (event.y - mDownY)
            this.mItemView.getPlayerContainer().x = moveX
            this.mItemView.getPlayerContainer().y = mMoveY
            ...
        }
    }
    return true
}

到這里就結(jié)束了效果也實(shí)現(xiàn)了。
在這里也只是提供個(gè)思路有更好的辦法歡迎評(píng)論區(qū)一起討論，那下面就直接倉庫地址了感興趣的朋友么希望給個(gè)Star支持一下??

KsgFrame

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容