像商品详情这样的页面,功能多,页面繁杂,特别是对页面逻辑也不少,所以我觉得有必要记录一下开发商品详情页面踩过的坑。
一.别人家的view
如果是仿淘宝或京东的详情页那还好说
它的导航栏是在上边,这样的结构很好,基本不会有什么大问题,可以自定义一个布局去当标题栏。
关键是有些页面不是导航栏在上边,而是在中间(比如我自己要做的),这种情况其实不是很好,即使是能实现效果,但是体验还是不如JD那样的导航栏放上边的好。
比如这个taptap的详情页,导航栏就是放中间。
我这里只想说说这种导航栏在中间的情况
二.开发需求
如果是上边的导航栏在中间的情况,肯定会要求我们当滑动时,导航栏会一直顶在布局顶部。
1.用CoordinatorLayout实现布局
我们一看这样的布局,二话不说就马上能想到用CoordinatorLayout去实现这样的效果。没错,这样的布局讲道理应该是用CoordinatorLayout去实现,谷歌也是这样推荐的。
但是,我之前写过一篇文章说CoordinatorLayout有问题,当你折叠的部分高度不高时还不容易看出有什么问题,但是当可折叠部分高度高时,就会出现严重的滑动卡顿的问题,记住,是严重的卡顿。
可能有些大佬能够自定义Behavior来解决卡顿的问题。我也觉得这样的做法是官方的做法,但是我是新手嘛,自定义Behavior我反正试了没用,那只能走其它的路。
2.用Nestedscrollview实现布局
那我就用CoordinatorLayout的内部实现Nestedscrollview来解决这个问题,而Nestedscrollview官方定义本来就能解决滑动的冲突。
(1)自定义NestedScrollingParent和NestedScrollingChild
用Nestedscrollview的原理,我先自己写个NestedScrollingParent和NestedScrollingChild两个viewgroup来显示嵌套滑动的效果。
做法其实不难,就是要分别实现这两个接口的方法。
然后你很容易在网上找到这两个接口中方法的使用流程。然后在自定义的viewgroup中完成事件监听onTouchEvent监听点击滑动放开。
我觉得没必要贴代码,就自定义NestedScrollingParent和NestedScrollingChild,网上有很多demo。主要做这些事:
实现接口中的方法
监听事件onTouchEvent
这样就能简单的实现上面说的效果(嵌套滑动并且导航栏会顶在布局顶部)。但是仅仅这样做会发现个问题,没有惯性。如果你仅仅只需要滑动流畅,那不做惯性也是一个不错的选择,但是没有惯性的滑动体验效果真的不是很好,也许是我们习惯了有惯性的滑动效果。
我看了下代码,惯性的实现和这两个接口关系不大,是要自己去实现。要做惯性就要用VelocityTracker这个类
意思就是这货能追踪触摸事件的速度,我之前没用过这个类,百度了一下资料,效果不是很理想,我尝试实现这个效果但是实际是没能实现的,毕竟没时间研究,以后肯定会写一篇关于这个的,毕竟它这么牛逼的效果。本来想去看看RecyclerView源码试试能不能看懂些什么,但是内聚性比较高加上一大堆静态变量,我还真看不出个所以然。
那么对于我来说用自定义NestedScrollingParent和NestedScrollingChild也失败了,因为我不会做惯性。那我就打算直接自定义NestedScrollingView,因为它内部已经有了惯性的机制。
(2)自定义NestedScrollingView充当NestedScrollingParent
首先我想说这个方法绝对可行,但是我做不到。我没办法让导航栏在滑动的时候停在顶部。
原因很简单,我做不到一件事:当父布局滑动到一定的位置时,子布局通知父布局不要滑动,而子布局来继续滑动,如果是自定义NestedScrollingView,我做不到子布局通知父布局不要滑动而自己滑动。也许是我对这个控件的了解不足,反正我试了很多个方法都不行,但是我觉得这个方法可行。
3.视觉效果实现布局
用CoordinatorLayout有官方的卡顿效果,用Nestedscrollview自己又不熟悉所以做不好,那怎么办,总不能不做吧。所以我就想出了第三种方法,这种方法能够实现那样的效果,只不过是投机取巧去实现。
(1)原理
总的来说还是使用Nestedscrollview嵌套,因为Nestedscrollview可以解决嵌套滑动的问题。那么怎么让图中的导航栏一直停在顶部呢?很简单,我只要做一个一模一样的布局一直放在顶部隐藏着,我监听滑动,当滑动的距离大于等于导航栏距顶部的距离,我就让隐藏的导航栏显示,这样就能产生视觉上的当导航栏滑到顶部时会一直在顶部的效果。
这个效果就是这样做出来的视觉差。
(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的话可以提出,有写得不好的地方也能指出来,谢谢。