android商品详情详解

首先看下效果图（样式，布局可以根据产品要求改变），

先大致说一下，整体结构使用的是LinearLayout实现，分上下两部分，上边就是我们能滑动的自定义布局，下面就是“进入店铺”，“立即购买”这两个无关紧要的布局；

下面是根据产品的要求更改的，每个APP几乎都不一样，所以说是无关紧要；

布局文件骨架：

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

    <!--因为要在整体布局右下角放一个置顶图标，所以用frameLayout包裹一下-->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <!--自定义的相对布局-->
        <www.gd.com.goodsdetails.view.ScrollViewContainer
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <!--上半区域的scrollview，因为上半区域也要滑动-->
            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">

                    <FrameLayout
                        android:layout_width="match_parent"
                        android:layout_height="240dp">
                        <!--这块区域放轮播图-->
                    </FrameLayout>

                    <FrameLayout
                        android:layout_width="match_parent"
                        android:layout_height="500dp">
                        <!--这块区域放商品详情信息-->
                    </FrameLayout>

                    <!--
                    中间继续拖动条目（继续拖动，查看图文详情）
                    可以根据产品需求更改自己想要的样式（一般这里都是一些简单的文字）
                    -->
                    <RelativeLayout
                        android:layout_width="match_parent"
                        android:layout_height="40dp">
                        ......
                    </RelativeLayout>

                </LinearLayout>

            </ScrollView><!--结束：上半区域的scrollview-->

            <!--下面需要显示的webview了-->
            <WebView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true" />
            
        </www.gd.com.goodsdetails.view.ScrollViewContainer>

        <!--一键滑到顶部的图片-->
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="15dp" />
        
    </FrameLayout>

    <!--*******************************************************-->
    
    <!--这些无关紧要，“进入店铺”，“立即购买”-->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
       	......
    </LinearLayout>

</LinearLayout>

真个页面最大的难点就是这个自定义的布局文件：ScrollViewContainer

不过非常爽的就是大家不用自己写，直接从demo中把ScrollViewContainer复制到自己的项目中即可使用，非常方便；

效果图就是我们项目中真是使用的，ScrollViewContainer同样分为上下两部分，从“拖动条目”分开；

上半部分最上面一般都会放置一个轮播图，然后下面放一些商品详情，让大家选择的一些属性信息；

这些大家可以根据需求自己添加；

下半部分一般都是放一个webview但是“京东”放置了三个；

我们不用纠结放置几个，因为我们可以把下面的webview更改为ScrollView，然后里面想放什么放什么；

点击打开链接免费下载源码