android商品详情页开发-低调大师

android商品详情页开发

2017-11-05 544

像商品详情这样的页面，功能多，页面繁杂，特别是对页面逻辑也不少，所以我觉得有必要记录一下开发商品详情页面踩过的坑。

一.别人家的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

然后你很容易在网上找到这两个接口中方法的使用流程。然后在自定义的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的话可以提出，有写得不好的地方也能指出来，谢谢。

微信关注我们

原文链接：https://yq.aliyun.com/articles/667404

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Android 5.0+删除Sdcard文件

在Android5.0往后的平台上，你想通过单纯的调用File.delete()或着ContentResolver.delete()来删除Sdcard上的文件会删除失败。前者提示没有权限，后者仅仅删除数据库文件对应的信息，但物理文件还存在，手机重启后MediaScanner会重新将其信息扫描进数据库。那既然如此，有没有什么办法可以删除Sdcard上的文件呢？ root？将apk放在system下？这些都太小题大做了，下面介绍一个在非root情况下使用平台正规api删除sdcard文件的方法。 Documents 在Android平台中，提供了一个名为DocumenstProvider的内容提供者，当然要使用它就必需继承它。它的作用就是帮助开发者构件一棵Documents树，树的根节点及文件目录的根结点。底下的文件或文件夹就是这棵树的枝叶。说了这么多，我们来介绍一下今天的主角：ExternalStorageProvider，他是继承自DocumenstProvider的一个平台类，通过它我们就能间接的删除Sdcard上的文件了。获取读写权限 finalIntentintent=n...

2017-11-06

826

版权声明：本文为博主原创文章，转载请标明出处。 https://blog.csdn.net/chaoyu168/article/details/78457875 在项目中使用了Java8和Jack编译器来使用一些Java 8的新特性，比如Lambda。在app的build.gradle文件中加入如下配置： android { compileSdkVersion 'android-25' buildToolsVersion '25.0.2' defaultConfig { jackOptions { enabled true } } compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } 将项目中一些可以复用的代码整理成 module ，然后在 app 中引用。问题来了，首先是 Jack 是不能在 modlue 中 enable 的。如果将下面代码写在 modlue 的 build.gradle 中，报错：Library proj...

2017-11-06

716

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。