【参考借鉴】 Android仿京东、天猫商品详情页
首先看一下效果图
GIF图片太大了，就看一下截图吧。想看效果的去下载apk。
001.png
002.png
003.png
一、项目结构分析
1、顶部是TabLayout+ViewPager来实现，主要处理在DetailFragment中。布局中最外层是CoordinatorLayout，其次是自定义的一个view，slideDetailsLayout。来看一下detailFragment的布局文件。
<android.support.design.widget.CoordinatorLayout
android:layout_above="@id/goodDetail_bottomLinearId"
android:layout_alignParentTop="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.zxh.taobaogooddetail.views.SlideDetailsLayout
android:id="@+id/slideDetailsLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/backgroundWhite">
<ScrollView
android:id="@+id/scrollView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scrollbars="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@color/backgroundGray">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.youth.banner.Banner
android:id="@+id/detail_banner"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</com.youth.banner.Banner>
</RelativeLayout>
<View style="@style/common_horizontal_line" />
<TextView
style="@style/style_black_s15"
android:background="@color/backgroundWhite"
android:ellipsize="end"
android:lineSpacingMultiplier="1.3"
android:maxLines="2"
android:text="雀巢（Nestle）咖啡1+2原味速溶咖啡饮品100条1500g（新老包装随机发货)" />
<LinearLayout
android:background="@color/backgroundWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp">
<TextView
style="@style/style_red_s18"
android:layout_marginLeft="3dp"
android:text="￥99.00"
android:textStyle="bold" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="15sp"
android:layout_marginLeft="4dp"
android:text="￥120" />
</LinearLayout>
<LinearLayout
android:layout_marginTop="12dp"
android:padding="2dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/backgroundWhite"
android:gravity="center_vertical">
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="促销"
android:textColor="#888888"/>
<TextView
style="@style/style_black_s15"
android:layout_width="0dp"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:text="购买2-3件可享受每件9折"/>
<ImageView
android:layout_marginRight="10dp"
android:layout_width="24dp"
android:layout_height="wrap_content"
android:src="@mipmap/more"/>
</LinearLayout>
<LinearLayout
android:background="@color/backgroundWhite"
android:layout_marginTop="12dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="已选"
android:textColor="#888888"/>
<TextView
style="@style/style_black_s15"
android:layout_width="0dp"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:text="原味100条，1件"/>
</LinearLayout>
<LinearLayout
android:layout_marginTop="12dp"
android:background="@color/backgroundWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="送至"
android:textColor="#888888"/>
<ImageView
android:layout_width="14dp"
android:layout_height="14dp"
android:src="@mipmap/address"/>
<TextView
style="@style/style_black_s15"
android:layout_width="0dp"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:text="北京>朝阳区>三环以内"/>
<ImageView
android:layout_marginRight="10dp"
android:layout_width="24dp"
android:layout_height="wrap_content"
android:src="@mipmap/more"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
android:visibility="invisible"
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="重量"
android:textColor="#888888"/>
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="现货"
android:textColor="@color/mainColor"/>
<TextView
style="@style/style_black_s15"
android:layout_width="0dp"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:text="15:00下单，可预约今晚送达"
android:textColor="#888888"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="重量"
android:textColor="#888888"/>
<TextView
style="@style/style_black_s15"
android:layout_width="0dp"
android:layout_weight="1"
android:ellipsize="end"
android:maxLines="1"
android:text="1200g"/>
</LinearLayout>
</LinearLayout>
<LinearLayout
android:layout_marginTop="12dp"
android:background="@color/backgroundWhite"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="评论(1080)"
android:textColor="#888888"/>
<TextView
style="@style/style_black_s15"
android:layout_width="0dp"
android:layout_weight="1"/>
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="好评度"/>
<TextView
android:layout_marginRight="10dp"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:text="100%"
android:textSize="15sp"
android:textColor="@color/mainColor"/>
</LinearLayout>
<View style="@style/common_horizontal_line" />
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<ImageView
android:layout_width="32dp"
android:layout_height="32dp"
android:src="@mipmap/head"/>
<TextView
style="@style/style_black_s15"
android:layout_width="wrap_content"
android:text="隐***膀"/>
<TextView
style="@style/style_black_s15"
android:layout_width="0dp"
android:layout_weight="1"/>
<ImageView
android:layout_width="12dp"
android:layout_height="12dp"
android:src="@mipmap/star"/>
<ImageView
android:layout_width="12dp"
android:layout_height="12dp"
android:src="@mipmap/star"/>
<ImageView
android:layout_width="12dp"
android:layout_height="12dp"
android:src="@mipmap/star"/>
<ImageView
android:layout_width="12dp"
android:layout_height="12dp"
android:src="@mipmap/star"/>
<ImageView
android:layout_width="12dp"
android:layout_height="12dp"
android:src="@mipmap/star"/>
</LinearLayout>
<TextView
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/backgroundWhite"
android:ellipsize="end"
android:lineSpacingMultiplier="1.3"
android:maxLines="2"
android:textColor="#555555"
android:text="发货速度快，早上下单，下午就收到货了。都是用小纸箱装好的，日期也新鲜，准备每天早晚都冲一杯蜂蜜水喝喝。" />
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.zxh.taobaogooddetail.views.MyImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="@mipmap/goods_img01"
android:scaleType="fitXY"/>
<View
android:layout_width="8dp"
android:layout_height="wrap_content"/>
<com.zxh.taobaogooddetail.views.MyImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="@mipmap/goods_img02"
android:scaleType="fitXY"/>
<View
android:layout_width="8dp"
android:layout_height="wrap_content"/>
<com.zxh.taobaogooddetail.views.MyImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="@mipmap/goods_img03"
android:scaleType="fitXY"/>
<View
android:layout_width="8dp"
android:layout_height="wrap_content"/>
<com.zxh.taobaogooddetail.views.MyImageView
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
android:src="@mipmap/goods_img04"
android:scaleType="fitXY"/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
<RelativeLayout
android:id="@+id/detail_allCommentRelative"
android:layout_marginTop="2dp"
android:layout_marginRight="8dp"
android:layout_marginLeft="8dp"
android:background="@drawable/login_btn_bg"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="12dp">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="全部评价"
android:textSize="14sp"
android:textColor="#888888"
android:layout_centerInParent="true"/>
</RelativeLayout>
<!-- 上拉查看图文详情 -->
<LinearLayout
android:id="@+id/pull_up_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/backgroundWhite"
android:gravity="center_vertical"
android:padding="12dp"
android:orientation="horizontal">
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="2px"
android:background="@color/divide"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="继续拖动,查看图文详情"
android:paddingLeft="12px"
android:paddingRight="12px"
android:textSize="12sp"
android:textColor="#888888"/>
<View
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="2px"
android:background="@color/divide"/>
</LinearLayout>
</LinearLayout>
</ScrollView>
<include layout="@layout/include_item_tab" />
</com.zxh.taobaogooddetail.views.SlideDetailsLayout>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_up"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="30dp"
android:src="@mipmap/top"
app:backgroundTint="#ffffff"
app:borderWidth="0dp"
app:fabSize="mini"
app:rippleColor="#ffffff" />
</android.support.design.widget.CoordinatorLayout>
2、SlideDetailsLayout实现setOnSlideDetailsListener监听事件，滑动操作的处理主要在这里执行。
@Override
public void onStatusChanged(SlideDetailsLayout.Status status) {
//当前为图文详情页
if (status == SlideDetailsLayout.Status.OPEN) {
fabUp.show();
activity.operaTitleBar(true, true, false);
} else {
//当前为商品详情页
fabUp.hide();
activity.operaTitleBar(false, false, true);
}
}
3、图文详情中的自定义WebView.
public class ItemWebView extends WebView {
public float oldY;
private int t;
private float oldX;
public ItemWebView(Context context) {
super(context);
}
public ItemWebView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ItemWebView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_MOVE:
float Y = ev.getY();
float Ys = Y - oldY;
float X = ev.getX();
if (Ys > 0 && t == 0) {
getParent().getParent().requestDisallowInterceptTouchEvent(false);
}
break;
case MotionEvent.ACTION_DOWN:
getParent().getParent().requestDisallowInterceptTouchEvent(true);
oldY = ev.getY();
oldX = ev.getX();
break;
case MotionEvent.ACTION_UP:
getParent().getParent().requestDisallowInterceptTouchEvent(true);
break;
default:
break;
}
return super.onTouchEvent(ev);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
this.t = t;
super.onScrollChanged(l, t, oldl, oldt);
}
下载demo查看效果
gooddetail.png
网友评论
麻烦给发个源码，谢谢啦 215396052@qq.com