像商品詳情這樣的頁面新症，功能多评凝，頁面繁雜坯钦，特別是對頁面邏輯也不少蟀苛，所以我覺得有必要記錄一下開發(fā)商品詳情頁面踩過的坑益咬。

一.別人家的view

如果是仿淘寶或京東的詳情頁那還好說

image.png

它的導航欄是在上邊，這樣的結(jié)構(gòu)很好帜平，基本不會有什么大問題幽告，可以自定義一個布局去當標題欄。

關(guān)鍵是有些頁面不是導航欄在上邊裆甩，而是在中間（比如我自己要做的）冗锁，這種情況其實不是很好，即使是能實現(xiàn)效果嗤栓，但是體驗還是不如JD那樣的導航欄放上邊的好冻河。

image.png

比如這個taptap的詳情頁，導航欄就是放中間茉帅。

我這里只想說說這種導航欄在中間的情況

二.開發(fā)需求

如果是上邊的導航欄在中間的情況叨叙，肯定會要求我們當滑動時，導航欄會一直頂在布局頂部堪澎。

1.用CoordinatorLayout實現(xiàn)布局

我們一看這樣的布局擂错，二話不說就馬上能想到用CoordinatorLayout去實現(xiàn)這樣的效果。沒錯樱蛤，這樣的布局講道理應該是用CoordinatorLayout去實現(xiàn)钮呀，谷歌也是這樣推薦的。

但是昨凡，我之前寫過一篇文章說CoordinatorLayout有問題爽醋，當你折疊的部分高度不高時還不容易看出有什么問題，但是當可折疊部分高度高時便脊，就會出現(xiàn)嚴重的滑動卡頓的問題蚂四，記住，是嚴重的卡頓就轧。

可能有些大佬能夠自定義Behavior來解決卡頓的問題证杭。我也覺得這樣的做法是官方的做法，但是我是新手嘛妒御，自定義Behavior我反正試了沒用解愤，那只能走其它的路。

2.用Nestedscrollview實現(xiàn)布局

那我就用CoordinatorLayout的內(nèi)部實現(xiàn)Nestedscrollview來解決這個問題乎莉，而Nestedscrollview官方定義本來就能解決滑動的沖突送讲。

（1）自定義NestedScrollingParent和NestedScrollingChild

用Nestedscrollview的原理奸笤，我先自己寫個NestedScrollingParent和NestedScrollingChild兩個viewgroup來顯示嵌套滑動的效果。

做法其實不難，就是要分別實現(xiàn)這兩個接口的方法。

image.png

image.png

然后你很容易在網(wǎng)上找到這兩個接口中方法的使用流程督怜。然后在自定義的viewgroup中完成事件監(jiān)聽onTouchEvent監(jiān)聽點擊滑動放開。

我覺得沒必要貼代碼健盒，就自定義NestedScrollingParent和NestedScrollingChild，網(wǎng)上有很多demo称簿。主要做這些事：

實現(xiàn)接口中的方法
監(jiān)聽事件onTouchEvent

這樣就能簡單的實現(xiàn)上面說的效果（嵌套滑動并且導航欄會頂在布局頂部）扣癣。但是僅僅這樣做會發(fā)現(xiàn)個問題，沒有慣性憨降。如果你僅僅只需要滑動流暢父虑，那不做慣性也是一個不錯的選擇，但是沒有慣性的滑動體驗效果真的不是很好授药，也許是我們習慣了有慣性的滑動效果士嚎。

我看了下代碼，慣性的實現(xiàn)和這兩個接口關(guān)系不大悔叽，是要自己去實現(xiàn)莱衩。要做慣性就要用VelocityTracker這個類

image.png

意思就是這貨能追蹤觸摸事件的速度，我之前沒用過這個類娇澎，百度了一下資料膳殷，效果不是很理想，我嘗試實現(xiàn)這個效果但是實際是沒能實現(xiàn)的九火，畢竟沒時間研究，以后肯定會寫一篇關(guān)于這個的册招，畢竟它這么牛逼的效果岔激。本來想去看看RecyclerView源碼試試能不能看懂些什么，但是內(nèi)聚性比較高加上一大堆靜態(tài)變量是掰，我還真看不出個所以然虑鼎。

那么對于我來說用自定義NestedScrollingParent和NestedScrollingChild也失敗了，因為我不會做慣性键痛。那我就打算直接自定義NestedScrollingView炫彩，因為它內(nèi)部已經(jīng)有了慣性的機制。

（2）自定義NestedScrollingView充當NestedScrollingParent

首先我想說這個方法絕對可行絮短，但是我做不到江兢。我沒辦法讓導航欄在滑動的時候停在頂部。

原因很簡單丁频，我做不到一件事：當父布局滑動到一定的位置時杉允，子布局通知父布局不要滑動邑贴，而子布局來繼續(xù)滑動，如果是自定義NestedScrollingView叔磷，我做不到子布局通知父布局不要滑動而自己滑動拢驾。也許是我對這個控件的了解不足，反正我試了很多個方法都不行改基，但是我覺得這個方法可行繁疤。

3.視覺效果實現(xiàn)布局

用CoordinatorLayout有官方的卡頓效果，用Nestedscrollview自己又不熟悉所以做不好秕狰，那怎么辦稠腊，總不能不做吧。所以我就想出了第三種方法封恰，這種方法能夠?qū)崿F(xiàn)那樣的效果麻养，只不過是投機取巧去實現(xiàn)。

（1）原理
總的來說還是使用Nestedscrollview嵌套诺舔，因為Nestedscrollview可以解決嵌套滑動的問題鳖昌。那么怎么讓圖中的導航欄一直停在頂部呢？很簡單低飒，我只要做一個一模一樣的布局一直放在頂部隱藏著许昨，我監(jiān)聽滑動，當滑動的距離大于等于導航欄距頂部的距離褥赊，我就讓隱藏的導航欄顯示糕档，這樣就能產(chǎn)生視覺上的當導航欄滑到頂部時會一直在頂部的效果。

15099406446461509940638249.gif

這個效果就是這樣做出來的視覺差拌喉。

（2）實現(xiàn)

我們先來實現(xiàn)導航欄tabView吧速那。導航欄可以使用系統(tǒng)自帶的tablayout，但是要注意尿背，這個頁面是用兩個tablayout的端仰，而且他們是聯(lián)動的，就是說有一個tablayout切換到tab2的話田藐，其它的tablayout都要切換到tab2荔烧。所以我們可以寫一個幫助類來做TabLayout之間聯(lián)動的操作。

我就暫時簡單寫一個汽久，封裝得不是很好鹤竭。

public class ProductDetailsTabGroup {

    private Context context;
    private List<TabLayout> tabLayoutList;

    public ProductDetailsTabGroup(Context context){
        this.context = context;
        tabLayoutList = new ArrayList<>();
    }

    public void addTabLayout(TabLayout tabLayout){
        tabLayoutList.add(tabLayout);
    }

    public void addTitiles(String[] titles){

        if (tabLayoutList == null || tabLayoutList.size() < 1){
            return;
        }

        for (int i = 0; i < tabLayoutList.size(); i++) {
            for (int j = 0; j < titles.length; j++) {
                tabLayoutList.get(i).addTab(tabLayoutList.get(i).newTab().setText(titles[j]));
            }
        }

    }

    public void tabGroupListener(){

        if (tabLayoutList == null || tabLayoutList.size() < 1){
            return;
        }

        tabLayoutList.get(0).setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                tabLayoutList.get(1).getTabAt(tab.getPosition()).select();
                ((TestProductDetails)context).showFragment(tab.getPosition());
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

        tabLayoutList.get(1).setOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                tabLayoutList.get(0).getTabAt(tab.getPosition()).select();
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });

    }

}

addTitiles方法是所有tablayout設(shè)置相同的標題。tabGroupListener()方法是聯(lián)動景醇，我這里寫死兩個tab的聯(lián)動臀稚，只用在其中一個加切換fragment的方法就行((TestProductDetails)context).showFragment(tab.getPosition())。

多個的時候用嵌套for循環(huán)來聯(lián)動啡直，我這里寫死兩個確實擴展性不好烁涌。

聯(lián)動成功之后苍碟，監(jiān)聽滑動來判斷頂部的tablayout的顯示和隱藏。

scrollview.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
            @Override
            public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                if (scrollY >= tabLayout.getTop()+contentView.getTop()+emptyViewGroup.getContentView().getTop()){
                    topTabLayout.setVisibility(View.VISIBLE);
                }else {
                    topTabLayout.setVisibility(View.GONE);
                }
            }
        });

（3）嵌套布局的Viewgroup

我想說說嵌套布局的viewgroup撮执，用FragmentManager來做而不用viewpager來做微峰，是因為會出現(xiàn)以下的原因：

如果使用viewpager的話，會出現(xiàn)布局高度不固定的情況抒钱。你可以設(shè)死一個固定的高度蜓肆，但是這樣的話，兩個滾動會不兼容谋币，就是會出現(xiàn)子布局的滾動會優(yōu)先于父布局的滾動仗扬，而不是配合滾動。

但是這里有個技巧蕾额，你可以設(shè)置Viewpager的高度為根據(jù)子view的高度進行設(shè)置早芭，這樣的話就需要自定義viewpager重寫onMeasure方法

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            int height = 0;
            for (int i = 0; i < getChildCount(); i++) {
                View child = getChildAt(i);
                child.measure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED));
                int h = child.getMeasuredHeight();
                if (h > height)
                    height = h;
            }

            mHight = height;
            heightMeasureSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

雖然這樣能夠解決高度的問題，但是這樣做的話诅蝶，或出現(xiàn)一個顯現(xiàn)退个，假如有兩個fragment，那viewpager的高度會取最后測量的那個调炬，也就是說所有的fragment的高度會相同语盈，如果偏低的頁面就會補空白，偏高就會滾動缰泡。
這樣就不行刀荒，我們需要的是每個fragment的高度都是自適應的。當然你也可以動態(tài)去改變viewpager的高度棘钞。

動態(tài)改變布局高度的方法是用setLayoutParams()

但是你要獲取到布局的高度缠借，需要用多線程來監(jiān)聽繪制后獲取viewgroup的高度。

 ViewTreeObserver vto = viewgroup.getViewTreeObserver();
        vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {
                rlParent.getViewTreeObserver().removeGlobalOnLayoutListener(this);
               // todo 獲取viewgroup高度
            }
        });

雖然能實現(xiàn)宜猜，但是總的來說非常的麻煩烈炭，可能你不明白我說的是什么，但是如果你用viewpager來嵌套的話宝恶，就會出現(xiàn)很多問題，所以我建議用FragmentManager來做嵌套趴捅，而且你這樣的頁面中講真也不應該給它左右滑動垫毙，不然會很亂。

三.總結(jié)

總的來說拱绑，實現(xiàn)第二張圖那樣的導航欄在中間的情況综芥，真的會有很多坑，而且體驗的效果還不如第一張圖京東那樣好猎拨。我也貼些代碼吧膀藐，由于功能多屠阻，我只貼頁面邏輯的代碼。

1.布局

（1）最外層布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <com.xxxxx.xxxxx.components.widget.view.MyPullRefreshScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/scrollview"
        android:layout_above="@+id/ll_bottom"
        >
    </com.xxxxx.xxxxx.components.widget.view.MyPullRefreshScrollView>

    <android.support.design.widget.TabLayout
        android:layout_alignParentTop="true"
        android:id="@+id/tl_top_tab"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/white"
        android:visibility="gone"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabTextColor="@color/app_black"
        app:tabSelectedTextColor="@color/login_red"
        app:tabIndicatorColor="@color/login_red"
        app:tabIndicatorHeight="2dp"
      app:tabTextAppearance="@style/MyTabLayoutTextAppearanceInverse"
        />

</RelativeLayout>

MyPullRefreshScrollView是一個自定義的可下拉刷新的基于PullToRefreshBase的view额各，然后TabLayout就是上面說的要一直在頂部的導航欄国觉，默認是隱藏。

MyPullRefreshScrollView：

public class MyPullRefreshScrollView extends PullToRefreshBase <NestedScrollView>{

    private NestedScrollView berScrollView;
    private FrameLayout flContent;

    public PullRefreshBerScrollView(Context context) {
        super(context);
    }

    public PullRefreshBerScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public PullRefreshBerScrollView(Context context, Mode mode) {
        super(context, mode);
    }

    @Override
    public Orientation getPullToRefreshScrollDirection() {
        return Orientation.VERTICAL;
    }

    @Override
    protected NestedScrollView createRefreshableView(Context context, AttributeSet attrs) {
        berScrollView = (NestedScrollView) LayoutInflater.from(context).inflate(R.layout.layout_berscrollview,null);
        flContent = (FrameLayout) berScrollView.findViewById(R.id.fl_content);
        return berScrollView;
    }

    public void addView(View view){
        flContent.addView(view);
    }

    public NestedScrollView getBerScrollView() {
        return berScrollView;
    }

    @Override
    protected boolean isReadyForPullEnd() {
        return false;
    }

    @Override
    protected boolean isReadyForPullStart() {
        return berScrollView.getScrollY() <= 0;
    }
}

下拉控件中虾啦，控制能否下拉的條件就是.getScrollY() <= 0（滑動距離是否小于等于0）

主要布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:background="@color/white"
        android:id="@+id/ll_scroll_content"
        ></LinearLayout>


    <android.support.design.widget.TabLayout
        android:id="@+id/tl_tab"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/white"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabTextColor="@color/app_black"
        app:tabSelectedTextColor="@color/login_red"
        app:tabIndicatorColor="@color/login_red"
        app:tabIndicatorHeight="2dp"
        app:tabTextAppearance="@style/MyTabLayoutTextAppearanceInverse"
        />

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/divider_grey"/>


    <!--<com.xxx.xxx.ui.activity.test.MyTestViewPager-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="wrap_content"-->
        <!--android:id="@+id/vp"-->
        <!--></com.xxx.xxx.ui.activity.test.MyTestViewPager>-->

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/fl_child_content"
        ></FrameLayout>

</LinearLayout>

我用了mvvm模式麻诀，最上邊的LinearLayout是用來動態(tài)添加View（本人不喜歡寫死xml布局，這樣擴展性差）傲醉，TabLayout就是導航欄蝇闭，下面我注釋viewpager是因為我之前用viewpager，太麻煩了所以改用FragmentManager硬毕，所以這里用FrameLayout

2.初始化tablayout

我上面也說了呻引，寫一個幫助類來做tablayout間聯(lián)動的操作，所以我這里就貼調(diào)用這歌輔助類的代碼吐咳。

private void initTab(){
        tabGroup = new ProductDetailsTabGroup(this);
        tabGroup.addTabLayout(tabLayout);
        tabGroup.addTabLayout(topTabLayout);
        tabGroup.addTitiles(titles);
    }

監(jiān)聽滑動

scrollview.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() {
            @Override
            public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
                if (scrollY >= tabLayout.getTop()+contentView.getTop()+emptyViewGroup.getContentView().getTop()){
                    topTabLayout.setVisibility(View.VISIBLE);
                }else {
                    topTabLayout.setVisibility(View.GONE);
                }
            }
        });

3.設(shè)置fragmentManger

public void showFragment(int position){
        for (int i = 0; i < fragments.length; i++) {
            if (i == position){
                if (fragments[i] == null){
                    addFragment(position);
                    fragmentManager.beginTransaction().add(R.id.fl_child_content, fragments[i]).commit();
                }else {
                    fragmentManager.beginTransaction().attach(fragments[i]).commit();
                }
            }else {
                if (fragments[i] != null){
                    fragmentManager.beginTransaction().detach(fragments[i]).commit();
                }
            }
        }
    }

4.子view布局

<android.support.v4.widget.NestedScrollView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/framelayout"
            >
        </FrameLayout>

    </android.support.v4.widget.NestedScrollView>

記得子view要嵌套NestedScrollView逻悠。

注意一下，如果你用RecyclerView做子View的話會產(chǎn)生滑動無慣性挪丢，這時候你需要給RecyclerView設(shè)一個屬性recyclerview.setNestedScrollingEnabled(false);在xml中設(shè)也行蹂风，這樣就正常了。

這樣就能實現(xiàn)那個效果了乾蓬，代碼也不是很難惠啄，就是要多注意一些細節(jié)，而且使用FragmentManager的話連懶加載都不用做了任内，簡直方便了很多撵渡。

5.總結(jié)

按照我這樣的做法，你肯定能實現(xiàn)文章里gif圖的那種效果死嗦，但是趋距，這種方法是投機取巧的方法，也行不會有什么問題越除，但是和理論對不上节腐，理論上實現(xiàn)這樣的效果就是一種解決嵌套滑動的思路（NestedScrollView的那種思路才是正常解決這個方法的正確思路），我這樣做雖然能實現(xiàn)摘盆，但是容易出BUG翼雀，擴展性不好。

再有孩擂，這樣的情況狼渊，真的不使用viewpager，這里用viewpager只會把一個簡單的問題給復雜化类垦。

最后狈邑，我之前寫過一篇關(guān)于NestedScrollView嵌套解決滑動沖突城须，這是我目前發(fā)現(xiàn)的能解決滑動沖突最好的方法，至于要實現(xiàn)折疊的特效米苹，還是需要用CoordinatorLayout糕伐，而這個東西的卡頓BUG我估計這輩子谷歌是不會去解決它了，所以想做特效驱入，我覺得要理解CoordinatorLayout封裝的思想和自定義Behavior赤炒，或者直接自定義CoordinatorLayout進行擴展。

2017.11.13 更新

更新內(nèi)容：添加demo

項目地址 : https://github.com/994866755/handsomeYe.productdetails

最近一直沒怎么又時間更新亏较，而且也發(fā)現(xiàn)github很久沒維護了莺褒，然后也抽出點時間也寫一個簡單的demo實現(xiàn)這個商品詳情頁面的功能。希望有Bug的話可以提出雪情，有寫得不好的地方也能指出來遵岩，謝謝。