商品詳情頁上拉查看詳情

Apollo 發(fā)布于2019-08-16 16:51 / 3710人閱讀

摘要：商品詳情頁上拉查看詳情目錄介紹該庫介紹效果展示如何使用注意要點(diǎn)優(yōu)化問題部分代碼邏輯參考案例該庫介紹模仿淘寶京東考拉等商品詳情頁分頁加載的效果。

商品詳情頁上拉查看詳情 目錄介紹

01.該庫介紹

02.效果展示

03.如何使用

04.注意要點(diǎn)

05.優(yōu)化問題

06.部分代碼邏輯

07.參考案例

01.該庫介紹

模仿淘寶、京東、考拉等商品詳情頁分頁加載的UI效果?？梢郧短識(shí)ecyclerView、WebView、ViewPager、ScrollView等等。

項(xiàng)目地址：https://github.com/yangchong2...

02.效果展示

2.1 使用SlideLayout效果

2.2 使用SlideAnimLayout帶有加載動(dòng)畫效果

03.如何使用 3.1 第一種，直接上拉加載分頁【SlideLayout有兩個(gè)子ChildView】

SlideDetailsLayout有兩個(gè)子ChildView：一個(gè)是商品頁layout，一個(gè)是詳情頁layout

在布局中

```

在代碼中

mSlideDetailsLayout.setOnSlideDetailsListener(new SlideLayout.OnSlideDetailsListener() {
    @Override
    public void onStatusChanged(SlideLayout.Status status) {
        if (status == SlideLayout.Status.OPEN) {
            //當(dāng)前為圖文詳情頁
            Log.e("FirstActivity","下拉回到商品詳情");
        } else {
            //當(dāng)前為商品詳情頁
            Log.e("FirstActivity","繼續(xù)上拉，查看圖文詳情");
        }
    }
});

//關(guān)閉商詳頁
mSlideDetailsLayout.smoothClose(true);
//打開詳情頁
mSlideDetailsLayout.smoothOpen(true);

3.2 第一種，上拉加載有動(dòng)畫效果，然后展示分頁【SlideAnimLayout有三個(gè)子ChildView】

SlideAnimLayout有三個(gè)子ChildView：一個(gè)是商品頁layout，一個(gè)是上拉加載動(dòng)畫layout，一個(gè)是詳情頁layout

在布局中

```

在代碼中

mSlideDetailsLayout.setScrollStatusListener(new SlideAnimLayout.onScrollStatusListener() {
    @Override
    public void onStatusChanged(SlideAnimLayout.Status mNowStatus, boolean isHalf) {
        if(mNowStatus== SlideAnimLayout.Status.CLOSE){
            //打開
            if(isHalf){
                mTvMoreText.setText("釋放，查看圖文詳情");
                mIvMoreImg.animate().rotation(0);
                LoggerUtils.i("onStatusChanged---CLOSE---釋放"+isHalf);
            }else{//關(guān)閉
                mTvMoreText.setText("繼續(xù)上拉，查看圖文詳情");
                mIvMoreImg.animate().rotation(180);
                LoggerUtils.i("onStatusChanged---CLOSE---繼續(xù)上拉"+isHalf);
            }
        }else{
            //打開
            if(isHalf){
                mTvMoreText.setText("下拉回到商品詳情");
                mIvMoreImg.animate().rotation(0);
                LoggerUtils.i("onStatusChanged---OPEN---下拉回到商品詳情"+isHalf);
            }else{//關(guān)閉
                mTvMoreText.setText("釋放回到商品詳情");
                mIvMoreImg.animate().rotation(180);
                LoggerUtils.i("onStatusChanged---OPEN---釋放回到商品詳情"+isHalf);
            }
        }
    }
});

//關(guān)閉商詳頁
mSlideDetailsLayout.smoothClose(true);
//打開詳情頁
mSlideDetailsLayout.smoothOpen(true);

04.注意要點(diǎn)

針對(duì)SlideDetailsLayout僅獲取子節(jié)點(diǎn)中的前兩個(gè)View

其中第一個(gè)作為Front，即商品頁；第二個(gè)作為Behind，即圖文詳情WebView頁面。具體看代碼：

@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    final int childCount = getChildCount();
    if (1 >= childCount) {
        throw new RuntimeException("SlideDetailsLayout only accept child more than 1!!");
    }
    mFrontView = getChildAt(0);
    mBehindView = getChildAt(1);
    if(mDefaultPanel == 1){
        post(new Runnable() {
            @Override
            public void run() {
                //默認(rèn)是關(guān)閉狀態(tài)的
                smoothOpen(false);
            }
        });
    }
}

針對(duì)SlideAnimLayout僅獲取子節(jié)點(diǎn)中三個(gè)View，且第二個(gè)為動(dòng)畫節(jié)點(diǎn)View

其中第一個(gè)作為Front，即商品頁；第二個(gè)作為anim，即上拉動(dòng)畫view。第三個(gè)作為Behind，即圖文詳情WebView頁面。具體看代碼：

@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    final int childCount = getChildCount();
    if (1 >= childCount) {
        throw new RuntimeException("SlideDetailsLayout only accept childs more than 1!!");
    }
    mFrontView = getChildAt(0);
    mAnimView = getChildAt(1);
    mBehindView = getChildAt(2);
    mAnimView.post(new Runnable() {
        @Override
        public void run() {
            animHeight = mAnimView.getHeight();
            LoggerUtils.i("獲取控件高度"+animHeight);
        }
    });
    if(mDefaultPanel == 1){
        post(new Runnable() {
            @Override
            public void run() {
                //默認(rèn)是關(guān)閉狀態(tài)的
                smoothOpen(false);
            }
        });
    }
}

05.優(yōu)化問題

異常情況保存狀態(tài)

@Override
protected Parcelable onSaveInstanceState() {
    SavedState ss = new SavedState(super.onSaveInstanceState());
    ss.offset = mSlideOffset;
    ss.status = mStatus.ordinal();
    return ss;
}

@Override
protected void onRestoreInstanceState(Parcelable state) {
    SavedState ss = (SavedState) state;
    super.onRestoreInstanceState(ss.getSuperState());
    mSlideOffset = ss.offset;
    mStatus = Status.valueOf(ss.status);
    if (mStatus == Status.OPEN) {
        mBehindView.setVisibility(VISIBLE);
    }
    requestLayout();
}

當(dāng)頁面銷毀的時(shí)候，移除listener監(jiān)聽，移除動(dòng)畫資源

@Override
protected void onDetachedFromWindow() {
    super.onDetachedFromWindow();
    setScrollStatusListener(null);
    setOnSlideStatusListener(null);
    if (animator!=null){
        animator.cancel();
        animator = null;
    }
}

06.部分代碼邏輯 6.1 如何實(shí)現(xiàn)ScrollView在最頂部或者最底部的時(shí)候，不消費(fèi)事件

具體邏輯在dispatchTouchEvent分發(fā)事件中，當(dāng)滑動(dòng)到頂部或者底部的時(shí)候，則直接讓父View消費(fèi)事件。其他情況是自己是將事件會(huì)向上返還給View的父節(jié)點(diǎn)。

@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
    switch (ev.getAction()) {
        case MotionEvent.ACTION_DOWN:
            downX = ev.getX();
            downY = ev.getY();
            //如果滑動(dòng)到了最底部，就允許繼續(xù)向上滑動(dòng)加載下一頁，否者不允許
            //如果子節(jié)點(diǎn)不希望父進(jìn)程攔截觸摸事件，則為true。
            getParent().requestDisallowInterceptTouchEvent(true);
            break;
        case MotionEvent.ACTION_MOVE:
            float dx = ev.getX() - downX;
            float dy = ev.getY() - downY;
            boolean allowParentTouchEvent;
            if (Math.abs(dy) > Math.abs(dx)) {
                if (dy > 0) {
                    //位于頂部時(shí)下拉，讓父View消費(fèi)事件
                    allowParentTouchEvent = isTop();
                } else {
                    //位于底部時(shí)上拉，讓父View消費(fèi)事件
                    allowParentTouchEvent = isBottom();
                }
            } else {
                //水平方向滑動(dòng)
                allowParentTouchEvent = true;
            }
            getParent().requestDisallowInterceptTouchEvent(!allowParentTouchEvent);
            break;
        default:
            break;
    }
    return super.dispatchTouchEvent(ev);
}

6.2 如何實(shí)現(xiàn)商品頁和詳情頁之間的滑動(dòng)，如何處理上拉加載控件的動(dòng)畫效果

SlideAnimLayout有三個(gè)子ChildView：一個(gè)是商品頁layout，一個(gè)是上拉加載動(dòng)畫layout，一個(gè)是詳情頁layout

通過onInterceptTouchEvent進(jìn)行事件攔截后，在onTouchEvent方法中對(duì)觸摸信息做進(jìn)一步處理可以實(shí)現(xiàn)豎直方向的滑動(dòng)

當(dāng)商品頁ScrollView滑動(dòng)到底部時(shí)，則直接讓父View消費(fèi)事件，該父View也就是SlideAnimLayout

在onInterceptTouchEvent中，當(dāng)打開詳情頁后(也就是CLOSE狀態(tài))，向下拉動(dòng)，當(dāng)y軸滑動(dòng)位移絕對(duì)值大于觸摸移動(dòng)的像素距離，并且當(dāng)y軸滑動(dòng)位移大于0，則攔截事件分發(fā)自己消費(fèi)事件

在onInterceptTouchEvent中，當(dāng)關(guān)閉詳情頁后(也就是OPEN狀態(tài))，向上拉動(dòng)，當(dāng)y軸滑動(dòng)位移絕對(duì)值大于觸摸移動(dòng)的像素距離，并且當(dāng)y軸滑動(dòng)位移小于0，則攔截事件分發(fā)自己消費(fèi)事件

當(dāng)處在商品頁時(shí)，向上拉動(dòng)；或者處于詳情頁時(shí)，向下拉動(dòng)，在拉動(dòng)過程中去改變mSlideOffset值，并且調(diào)用requestLayout()方法去繪制

在屏幕區(qū)域滑動(dòng)兩個(gè)面板只需要改變兩個(gè)面板在y軸方向的位移（有正負(fù)方向）即可?；瑒?dòng)的標(biāo)尺是控件相對(duì)于Top的移動(dòng)，且所有的位移計(jì)算都是基于該標(biāo)尺。在切換面板時(shí)只需要知道對(duì)應(yīng)的offset值即可……

如何處理上拉加載控件的動(dòng)畫效果

添加一個(gè)listener監(jiān)聽，可以監(jiān)聽到狀態(tài)，以及是否達(dá)到一半距離，主要是和offset比較，當(dāng)?shù)竭_(dá)一半距離的時(shí)候，這個(gè)時(shí)候用屬性動(dòng)畫將箭頭view旋轉(zhuǎn)180度即可實(shí)現(xiàn)。

既然要監(jiān)聽滑動(dòng)距離，則首先要獲取該加載控件的高度animHeight，那么在哪里獲取比較合適呢？可以在onFinishInflate()方法中，用post形式獲取控件高度。

那么如何使滑動(dòng)生效，并且看上去比較連貫

自定義布局中有非常重要的兩個(gè)環(huán)節(jié)onMeasure(測量)和onLayout(布局)。測量決定了View的所占的大小，布局決定了View所處的位置。實(shí)現(xiàn)滑動(dòng)的關(guān)鍵思路就在這里，我們?cè)趏nLayout方法中根據(jù)通過onInterceptTouchEvent、onTouchEvent得到的滑動(dòng)信息進(jìn)行計(jì)算而得到布局的位置信息，并把這個(gè)位置信息設(shè)置到子View上面即可實(shí)現(xiàn)滑動(dòng)。

滑動(dòng)后松開手指如何實(shí)現(xiàn)滾動(dòng)效果

也就是說，當(dāng)處在商品頁時(shí)，向上拉動(dòng)，拉動(dòng)位移大于一半時(shí)，松開手指，則直接滑動(dòng)到下一頁詳情頁頁面

具體邏輯在finishTouchEvent方法中，它主要是記錄offset值，以及close或open狀態(tài)下視圖的高度，還有是否發(fā)生切換變化

最后開啟動(dòng)畫，在動(dòng)畫過程中添加動(dòng)畫update的監(jiān)聽，在該方法中去requestLayout()控件，這樣就達(dá)到滾動(dòng)效果了。動(dòng)畫滾動(dòng)結(jié)束后，如果是open狀態(tài)并且是第一次顯示，則設(shè)置詳情頁控件可見。

如何使?jié)L動(dòng)效果比較自然，或者如何調(diào)整滾動(dòng)時(shí)長

可以自定義設(shè)置時(shí)間，直接在布局中設(shè)置……

07.參考案例

感謝下面大佬的開源案例

https://github.com/jeasonlzy/...

https://github.com/hexianqiao...

https://github.com/cnbleu/Sli...

08.其他更多 01.關(guān)于博客匯總鏈接

1.技術(shù)博客匯總

2.開源項(xiàng)目匯總

3.生活博客匯總

4.喜馬拉雅音頻匯總

5.其他匯總

02.關(guān)于我的博客

我的個(gè)人站點(diǎn)：www.yczbj.org，www.ycbjie.cn

github：https://github.com/yangchong211

知乎：https://www.zhihu.com/people/...

簡書：http://www.jianshu.com/u/b7b2...

csdn：http://my.csdn.net/m0_37700275

喜馬拉雅聽書：http://www.ximalaya.com/zhubo...

開源中國：https://my.oschina.net/zbj161...

泡在網(wǎng)上的日子：http://www.jcodecraeer.com/me...

郵箱：yangchong211@163.com

阿里云博客：https://yq.aliyun.com/users/a... 239.headeruserinfo.3.dT4bcV

segmentfault頭條：https://segmentfault.com/u/xi...

掘金：https://juejin.im/user/593943...

項(xiàng)目地址：https://github.com/yangchong2...

GPU云服務(wù)器云服務(wù)器商品詳情 java 商品詳情查看詳情阿里云如何查看服務(wù)器詳情

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/74220.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Apollo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

onevps：新增（支付寶+中文網(wǎng)站），香港vps/新加坡vps/日本vps等9機(jī)房，1Gbps帶寬

閱讀 868·2021-10-09 09:58
Instagram 改進(jìn)了搜索結(jié)果呈現(xiàn)形式，縮小與TikTok的差距

閱讀 714·2021-08-27 16:24
【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

閱讀 1793·2019-08-30 14:15
一道面試題引發(fā)的思考

閱讀 2438·2019-08-30 11:04
前端拼音模糊搜索

閱讀 2167·2019-08-29 18:43
flexible

閱讀 2232·2019-08-29 15:20
vue 解決循環(huán)引用組件報(bào)錯(cuò)的問題

閱讀 2783·2019-08-26 12:20
深入淺出面向?qū)ο蠛驮汀痉馄匦抡J(rèn)識(shí)new】

閱讀 1702·2019-08-26 11:44

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

商品詳情頁上拉查看詳情

相關(guān)文章

Laravel 教程 - 實(shí)戰(zhàn) iBrand 開源電商 API 系統(tǒng)

小程序之仿小米商城Lite

小程序之仿小米商城Lite

發(fā)表評(píng)論

0條評(píng)論

Apollo

男|高級(jí)講師

TA的文章

onevps：新增（支付寶+中文網(wǎng)站），香港vps/新加坡vps/日本vps等9機(jī)房，1Gbps帶寬

Instagram 改進(jìn)了搜索結(jié)果呈現(xiàn)形式，縮小與TikTok的差距

【基礎(chǔ)】這15種CSS居中的方式，你都用過哪幾種？

一道面試題引發(fā)的思考

前端拼音模糊搜索

flexible

vue 解決循環(huán)引用組件報(bào)錯(cuò)的問題

深入淺出面向?qū)ο蠛驮汀痉馄匦抡J(rèn)識(shí)new】

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

商品詳情頁上拉查看詳情

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！