像商品详情这样的页面，功能多，页面繁杂，特别是对页面逻辑也不少，所以我觉得有必要记录一下开发商品详情页面踩过的坑。
一.别人家的view
如果是仿淘宝或京东的详情页那还好说
image.png
它的导航栏是在上边，这样的结构很好，基本不会有什么大问题，可以自定义一个布局去当标题栏。
关键是有些页面不是导航栏在上边，而是在中间（比如我自己要做的），这种情况其实不是很好，即使是能实现效果，但是体验还是不如JD那样的导航栏放上边的好。
image.png
比如这个taptap的详情页，导航栏就是放中间。
我这里只想说说这种导航栏在中间的情况
二.开发需求
如果是上边的导航栏在中间的情况，肯定会要求我们当滑动时，导航栏会一直顶在布局顶部。
1.用CoordinatorLayout实现布局
我们一看这样的布局，二话不说就马上能想到用CoordinatorLayout去实现这样的效果。没错，这样的布局讲道理应该是用CoordinatorLayout去实现，谷歌也是这样推荐的。
但是，我之前写过一篇文章说CoordinatorLayout有问题，当你折叠的部分高度不高时还不容易看出有什么问题，但是当可折叠部分高度高时，就会出现严重的滑动卡顿的问题，记住，是严重的卡顿。
可能有些大佬能够自定义Behavior来解决卡顿的问题。我也觉得这样的做法是官方的做法，但是我是新手嘛，自定义Behavior我反正试了没用，那只能走其它的路。
2.用Nestedscrollview实现布局
那我就用CoordinatorLayout的内部实现Nestedscrollview来解决这个问题，而Nestedscrollview官方定义本来就能解决滑动的冲突。
（1）自定义NestedScrollingParent和NestedScrollingChild
用Nestedscrollview的原理，我先自己写个NestedScrollingParent和NestedScrollingChild两个viewgroup来显示嵌套滑动的效果。
做法其实不难，就是要分别实现这两个接口的方法。
image.png
image.png
然后你很容易在网上找到这两个接口中方法的使用流程。然后在自定义的viewgroup中完成事件监听onTouchEvent监听点击滑动放开。
我觉得没必要贴代码，就自定义NestedScrollingParent和NestedScrollingChild，网上有很多demo。主要做这些事：
实现接口中的方法
监听事件onTouchEvent
这样就能简单的实现上面说的效果（嵌套滑动并且导航栏会顶在布局顶部）。但是仅仅这样做会发现个问题，没有惯性。如果你仅仅只需要滑动流畅，那不做惯性也是一个不错的选择，但是没有惯性的滑动体验效果真的不是很好，也许是我们习惯了有惯性的滑动效果。
我看了下代码，惯性的实现和这两个接口关系不大，是要自己去实现。要做惯性就要用VelocityTracker这个类
image.png
意思就是这货能追踪触摸事件的速度，我之前没用过这个类，百度了一下资料，效果不是很理想，我尝试实现这个效果但是实际是没能实现的，毕竟没时间研究，以后肯定会写一篇关于这个的，毕竟它这么牛逼的效果。本来想去看看RecyclerView源码试试能不能看懂些什么，但是内聚性比较高加上一大堆静态变量，我还真看不出个所以然。
那么对于我来说用自定义NestedScrollingParent和NestedScrollingChild也失败了，因为我不会做惯性。那我就打算直接自定义NestedScrollingView，因为它内部已经有了惯性的机制。
（2）自定义NestedScrollingView充当NestedScrollingParent
首先我想说这个方法绝对可行，但是我做不到。我没办法让导航栏在滑动的时候停在顶部。
原因很简单，我做不到一件事：当父布局滑动到一定的位置时，子布局通知父布局不要滑动，而子布局来继续滑动，如果是自定义NestedScrollingView，我做不到子布局通知父布局不要滑动而自己滑动。也许是我对这个控件的了解不足，反正我试了很多个方法都不行，但是我觉得这个方法可行。
3.视觉效果实现布局
用CoordinatorLayout有官方的卡顿效果，用Nestedscrollview自己又不熟悉所以做不好，那怎么办，总不能不做吧。所以我就想出了第三种方法，这种方法能够实现那样的效果，只不过是投机取巧去实现。
（1）原理
总的来说还是使用Nestedscrollview嵌套，因为Nestedscrollview可以解决嵌套滑动的问题。那么怎么让图中的导航栏一直停在顶部呢？很简单，我只要做一个一模一样的布局一直放在顶部隐藏着，我监听滑动，当滑动的距离大于等于导航栏距顶部的距离，我就让隐藏的导航栏显示，这样就能产生视觉上的当导航栏滑到顶部时会一直在顶部的效果。
15099406446461509940638249.gif
这个效果就是这样做出来的视觉差。
（2）实现
我们先来实现导航栏tabView吧。导航栏可以使用系统自带的tablayout，但是要注意，这个页面是用两个tablayout的，而且他们是联动的，就是说有一个tablayout切换到tab2的话，其它的tablayout都要切换到tab2。所以我们可以写一个帮助类来做TabLayout之间联动的操作。
我就暂时简单写一个，封装得不是很好。
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设置相同的标题。tabGroupListener()方法是联动，我这里写死两个tab的联动，只用在其中一个加切换fragment的方法就行((TestProductDetails)context).showFragment(tab.getPosition())。
多个的时候用嵌套for循环来联动，我这里写死两个确实扩展性不好。
联动成功之后，监听滑动来判断顶部的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来做，是因为会出现以下的原因：
如果使用viewpager的话，会出现布局高度不固定的情况。你可以设死一个固定的高度，但是这样的话，两个滚动会不兼容，就是会出现子布局的滚动会优先于父布局的滚动，而不是配合滚动。
但是这里有个技巧，你可以设置Viewpager的高度为根据子view的高度进行设置，这样的话就需要自定义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);
}
虽然这样能够解决高度的问题，但是这样做的话，或出现一个显现，假如有两个fragment，那viewpager的高度会取最后测量的那个，也就是说所有的fragment的高度会相同，如果偏低的页面就会补空白，偏高就会滚动。
这样就不行，我们需要的是每个fragment的高度都是自适应的。当然你也可以动态去改变viewpager的高度。
动态改变布局高度的方法是用setLayoutParams()
但是你要获取到布局的高度，需要用多线程来监听绘制后获取viewgroup的高度。
ViewTreeObserver vto = viewgroup.getViewTreeObserver();
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
rlParent.getViewTreeObserver().removeGlobalOnLayoutListener(this);
// todo 获取viewgroup高度
}
});
虽然能实现，但是总的来说非常的麻烦，可能你不明白我说的是什么，但是如果你用viewpager来嵌套的话，就会出现很多问题，所以我建议用FragmentManager来做嵌套，而且你这样的页面中讲真也不应该给它左右滑动，不然会很乱。
三.总结
总的来说，实现第二张图那样的导航栏在中间的情况，真的会有很多坑，而且体验的效果还不如第一张图京东那样好。我也贴些代码吧，由于功能多，我只贴页面逻辑的代码。
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是用来动态添加View（本人不喜欢写死xml布局，这样扩展性差），TabLayout就是导航栏，下面我注释viewpager是因为我之前用viewpager，太麻烦了所以改用FragmentManager，所以这里用FrameLayout
2.初始化tablayout
我上面也说了，写一个帮助类来做tablayout间联动的操作，所以我这里就贴调用这歌辅助类的代码。
private void initTab(){
tabGroup = new ProductDetailsTabGroup(this);
tabGroup.addTabLayout(tabLayout);
tabGroup.addTabLayout(topTabLayout);
tabGroup.addTitiles(titles);
}
监听滑动
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.设置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的话会产生滑动无惯性，这时候你需要给RecyclerView设一个属性recyclerview.setNestedScrollingEnabled(false);在xml中设也行，这样就正常了。
这样就能实现那个效果了，代码也不是很难，就是要多注意一些细节，而且使用FragmentManager的话连懒加载都不用做了，简直方便了很多。
5.总结
按照我这样的做法，你肯定能实现文章里gif图的那种效果，但是，这种方法是投机取巧的方法，也行不会有什么问题，但是和理论对不上，理论上实现这样的效果就是一种解决嵌套滑动的思路（NestedScrollView的那种思路才是正常解决这个方法的正确思路），我这样做虽然能实现，但是容易出BUG，扩展性不好。
再有，这样的情况，真的不使用viewpager，这里用viewpager只会把一个简单的问题给复杂化。
最后，我之前写过一篇关于NestedScrollView嵌套解决滑动冲突，这是我目前发现的能解决滑动冲突最好的方法，至于要实现折叠的特效，还是需要用CoordinatorLayout，而这个东西的卡顿BUG我估计这辈子谷歌是不会去解决它了，所以想做特效，我觉得要理解CoordinatorLayout封装的思想和自定义Behavior，或者直接自定义CoordinatorLayout进行扩展。
2017.11.13 更新
更新内容：添加demo
项目地址 : https://github.com/994866755/handsomeYe.productdetails
最近一直没怎么又时间更新，而且也发现github很久没维护了，然后也抽出点时间也写一个简单的demo实现这个商品详情页面的功能。希望有Bug的话可以提出，有写得不好的地方也能指出来，谢谢。
网友评论